1. Getting Started with jQuery

2. 1. Introduction to jQuery 2. Selection and DOM manipulation Contents 2

3. What is jQuery? Why use jQuery? Getting jQuery 1. Getting Started with jQuery 3

4. jQuery is a free, open-source JavaScript library Dramatically simplifies the task of writing client-side JavaScript code in your Web pages Hides browser-specific nuances, which is a great help! Simplifies Ajax calls The success story of jQuery First released in 2006 Widely adopted by major Web platforms, including Microsoft IE6+, Chrome, Firefox 2+, Safari3+, Opera 9+ What is jQuery? 4

5. Here are some of the reasons jQuery is so popular: Cross-browser compatibility Fast and small Short learning curve and great documentation Many plug-ins available Compliant with CSS3 selectors Helpful utilities jQuery UI Widespread adoption Why use jQuery? 5

6. You can download jQuery from http://jquery.com You can then incorporate jQuery in a page as follows: You can access directly at Microsoft CDN or Google CDN You can then incorporate jQuery in a page using one of the following: Getting jQuery 6 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js" type="text/javascript"> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js" type="text/javascript"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript">

7. jQuery philosophy jQuery selector syntax A closer look at selector syntax Some more selector examples Getting and setting attributes DOM manipulation Demonstration 2. Selection and DOM Manipulation 7

8. jQuery Philosophy 8

9. jQuery uses CSS3-style selector syntax to intelligently locate elements etc. in your page You can locate elements based on nesting, IDs, tag names, etc. Example: jQuery Selector Syntax 9 Joe Allen 100000 Nathan Dyer 120000 … Joe Allen 100000 Nathan Dyer 120000 … $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); });

10. $() Short-hand for jQuery(), a powerful function for DOM queries $(document) Returns the document object on the page $(document).ready Binds a function when the DOM is ready to be manipulated $("table#employeesTable tr:nth-child(even)") Finds element whose ID is employeesTable Then finds all its child elements at even index.addClass("even") jQuery method to add a CSS class to specified DOM object A Closer Look at Selector Syntax 10 $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); });

11. CSS style Hierarchy Form Some More Selector Examples 11 $("#myID") // Find by id. $(".myClass") // Find by class name. $("myTag") // Find by tag (element name). $("#id,.class, tag") // Find by multiple criteria. $("#myID") // Find by id. $(".myClass") // Find by class name. $("myTag") // Find by tag (element name). $("#id,.class, tag") // Find by multiple criteria. $("form input") // Find descendant. $("#main > *") // Find child. $("#prev ~ div") // Find sibling. $("form input") // Find descendant. $("#main > *") // Find child. $("#prev ~ div") // Find sibling. $("form :radio") // Find radio elements in forms. $("#dvMainForm :checkbox") // Find checkbox in a form. $("input:disabled") // Find disabled input elements. $("form :radio") // Find radio elements in forms. $("#dvMainForm :checkbox") // Find checkbox in a form. $("input:disabled") // Find disabled input elements.

12. Getting attributes: Setting attributes: Getting and Setting Attributes 12 $("em").attr("title") $("label").html() $("p:first").text() $("input").val() $("em").attr("title") $("label").html() $("p:first").text() $("input").val() $("em").attr("title", "hello") $("label").html("hello") $("p:first").text("hello") $("input").val("hello") $("em").attr("title", "hello") $("label").html("hello") $("p:first").text("hello") $("input").val("hello")

13. DOM Manipulation 13 $("#target").addClass("css_class"); $("#target").toggleClass("css_class"); $("p").append(" Hello "); $("span").appendTo("#foo"); $("p").after(" Hello "); $("p").before(" Hello ");

14. Let's take a look at a demonstration of how to use jQuery to select and manipulate DOM objects… The demo is located in the following folder: C:\JavaScriptWebDev\Demos\08-GettingStartedWithjQuery Code: Go to the HellojQuery sub-folder Open HellojQuery.sln in Visual Studio Demo instructions: See Demo_SelectionDomManipulation.docx Demonstration 14

15. 15 Any Questions?