Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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?
