1 / 15

Getting Started with jQuery

Getting Started with jQuery. Contents. Introduction to jQuery Selection and DOM manipulation. 1. Getting Started with jQuery. What is jQuery? Why use jQuery? Getting jQuery. What is jQuery?. jQuery is a free, open-source JavaScript library

elma
Download Presentation

Getting Started with jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Getting Started with jQuery

  2. Contents Introduction to jQuery Selection and DOM manipulation 2

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

  4. What is jQuery? • 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+ 4

  5. Why use jQuery? • 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 5

  6. Getting jQuery <script src="/js/jquery.js" type="text/javascript"> </script> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js" type="text/javascript"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"> </script> • 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: 6

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

  8. jQuery Philosophy Find content in the HTML document (selector) Do something to it (method) 8

  9. jQuery Selector Syntax <table id="employeesTable"> <tr> <td>Joe</td><td>Allen</td><td>100000</td> </tr> <tr> <td>Nathan</td><td>Dyer</td><td>120000</td> </tr> … <script type="text/javascript"> $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); </script> • 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: 9

  10. A Closer Look at Selector Syntax <script type="text/javascript"> $(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); </script> • $() • 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 <table> element whose ID is employeesTable • Then finds all its <tr> child elements at even index • .addClass("even") • jQuery method to add a CSS class to specified DOM object 10

  11. Some More Selector Examples $("#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 :radio") // Find radio elements in forms. $("#dvMainForm :checkbox") // Find checkbox in a form. $("input:disabled") // Find disabled input elements. CSS style Hierarchy Form 11

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

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

  14. Demonstration • 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 14

  15. Any Questions? 15

More Related