Getting Started with jQuery

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?