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 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="/js/jquery.js" type="text/javascript"> </script>
<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.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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
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
<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> …
<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>
<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
A Closer Look at Selector Syntax
10
<script type="text/javascript">$(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); </script>
<script type="text/javascript">$(document).ready(function () { $("table#employeesTable tr:nth-child(even)").addClass("even"); }); </script>
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").addClass("css_class");
$("#target").toggleClass("css_class"); $("#target").toggleClass("css_class");
$("p").append("<strong>Hello</strong>"); $("p").append("<strong>Hello</strong>");
$("span").appendTo("#foo"); $("span").appendTo("#foo");
$("p").after("<b>Hello</b>"); $("p").after("<b>Hello</b>");
$("p").before("<b>Hello</b>"); $("p").before("<b>Hello</b>");
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?
Recommended
