Getting Started with jQuery

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

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

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

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

You can download jQuery from 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=" type="text/javascript"> <script src=" type="text/javascript"> <script src=" type="text/javascript"> <script src=" type="text/javascript">

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

jQuery Philosophy 8

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 Nathan Dyer … Joe Allen Nathan Dyer … $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); });

$() 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"); });

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.

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")

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

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 Any Questions?