What is Jquery ?

jQuery is not a language

most popular client side library written on top of
the JavaScript.
simple and reusable
jQuery is a client side language so it can be easily
used with ASP.NET,PHP,JSP and Servlets.
simplifies the process of traversing and finding
elements in HTML document. It provides methods to
make animations, add ajax interaction to the page,
provides an easy way to apply CSS to any items and
provides an easy mechanism for binding and
unbinding events

Features of jQuery
It works on all browsers
It is fast and extensible
Make look UI stunning
Allows to access elements in the
document
Easily apply CSS
Perform animation in better way
Ajax Interaction made easy
Change documents content easily
Event handling made easy
Big pool of reusable plugins for
various functionalities

How to use jQuery

jQuery file can be downloaded from jQuery Official website
http://www.jquery.com/
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google

jQuery Versions
The uncompressed .js file is easy to read and modify, but
it's around 190kb in size (at the time of writing).
The minified .js file has all comments, whitespace, and
other unnecessary characters removed from the file,
squeezing the whole library into a mere 23kb (ie;
lightweight).

Download latest copy of the jQuery.

it's a single JavaScript file.
No installation is required,
copy the jquery.js and placed it in script
directory
And add reference of the jquery.js.
<script
src="Script/jquery.js"type="text/javascr
ipt"></script>

 It supports latest CSS3 selectors and standards

and it supports almost all the modern web
browsers such as IE 6.0+, FireFox 2+, Safari
3.0+, Opera 9.0+ and Chrome
Microsoft has partnership with JQuery and the
latest version of Visual Studio 2010 ships with
built in JQuery library and full intellisense
support. Even if you developing web
applications using Visual Studio 2008, JQuery is
always available free to download and use in
your projects

CDN(Content Distribution/Delivery
Network)
large distributed system of servers deployed in multiple data
centers in the Internet. The goal of a CDN is to serve content to endusers with high availability and high performance.
Advantages of using CDN.
Reduce Load: It reduces the load on your web server as it
downloads from Google server's.
Caching: The most important benefit is caching. If any previously
visited site by user is using jQuery from any CDN then the cached
version will be used. It will not be downloaded again.
Serves fast: As CDN has dozen's of different servers around the
web and it will download the jQuery from whichever server is closer
to the user.
Parallel Downloading: As the jQuery js file is on a separate
domain, modern browsers will download the script in parallel with
scripts on your domain.

3 different CDN that provide jQuery.

Google
Microsoft
jQuery

Basic Jquery Syntax

de

gdfg

Demo:- we will see how easily we

can change the CSS.

Output

$(document).ready()function.
an entry pointand gets called as soon as DOM is loaded. You need to
place all your jQuery code within this function. JavaScript developers
can think of window.onload() being similar to $(document).ready(). But
it is different
Running Code Unobtrusively When the DOM is Ready
"document ready" handler. This accomplishes two things: First, it
ensures that
the code does not run until the DOM is ready. This confirms that any
elements being accessed are actually in existence,so the script won't
return any errors. Second, this ensures that your code is unobtrusive.
That is, it's separated from content (XHTML) and presentation
(CSS).

jQuery makes it easy to:?

1) Find :- elements in an HTML

document
2) Change : - HTML Content
3) Listen :- to what a User does &
react accordingly
4) Animate :- Content on the page
5) Talk :- on the n/w to fetch new
content.

Change Contents

1) Find :- elements in an HTML

document
2) Change : - HTML Content
3) Listen :- to what a User does &
react accordingly
4) Animate :- Content on the page
5) Talk :- on the n/w to fetch new
content.

Change Content (Eg: )

How can we modify
the text of the
<h1> element?

Find the HTML Elements

To Find / search
through our HTML
We need to
understand how
our browser
Organizes the
HTML it receives

Document Object Model

DOM
A tree-like structure created by
browsers so we can quickly find
HTML Elements using JavaScript

DOM Structure

Loading HTML into the DOM

Traversing through the DOM

Jquery to Rescue

How Jquery Access the DOM

How can we search through the

DOM

Basic CSS Selectors

Using Jquery Fn: (Selectors) to Find

Nodes

Select Element , get Text & modify it.

1. Get Element -

2. Get Elements Text - text()- Gets & Sets

3. Modify Text:- text() modifies text.

WHY Document.ready()

Document.ready()

So Our Final code is

It is an entry pointand gets called as soon as DOM is loaded.

You need to place all your jQuery code within this function.
JavaScript developers can think of window.onload() being similar to
(document).ready(). But it is different.
A .ready() handler can be placed anywhere on the page and you can
even have multiple ready handlers in the page.

window.onload() vs $(document).ready()

document.ready() gets called as soon as your

DOM is loaded. It does not wait for the
elements /contents to get loaded fully. So its FAST.
For example, there are very heavy images on any web
page and takes time to load.
If you have used window.onload() then it will wait until
all your images are loaded fully, hence it slows down
the execution.

Selecting by ELEMENT

Changing multiple elements at once

 Select Multiple Elements

Modify Their Text.

Selecting by ID

Selecting by Class

Selecting Elements in jQuery

The jQuery library allows you to select elements in your XHTML by
wrapping them in $("") (you could also use single
quotes), which is the jQuery wrapper. Here are some examples of
"wrapped sets" in jQuery:
$("div"); // selects all HTML div elements
$("#myElement"); // selects one HTML element with ID "myElement"
$(".myClass"); // selects HTML elements with class "myClass"
$("p#myElement"); // selects paragraph elements with ID
"myElement"
$("ul li a.navigation");
// selects anchors with class "navigation" that are nested in list
items
jQuery supports the use of all CSS selectors, even those in CSS3.
Here are some examples of alternate selectors

Selecting Descendants

Q) How do we find the <li> elements that are

inside of the <ul> with ID destinations ?

It takes a bit more code, but its faster.

Selecting only Direct

children

How do we find only the <li> elements that are

direct children of the destinations <ul> the

children(), unlike find(), only

selects direct children

Selecting multiple elements

How do we find only elements with either a promo class or a france ID

 Selecting Elements in jQuery

The jQuery library allows you to select elements in your XHTML by wrapping them in $("") (you could also
use single quotes), which is the jQuery wrapper. Here are some examples of "wrapped sets" in jQuery:

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"
$(".myClass"); // selects HTML elements with class "myClass"
$("p#myElement"); // selects paragraph elements with ID "myElement"
$("ul li a.navigation");// selects anchors with class "navigation" that are nested in list items

jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate
selectors

$("p > a"); // selects anchors that are direct children of paragraphs
$("input[type=text]"); // selects inputs that have specified type
$("a:first"); // selects the first anchor on the page
$("p:odd"); // selects all odd numbered paragraphs
$("li:first-child"); // every list item that's first child in a list.

jQuery also allows the use of its own custom selectors. Here are some examples:

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)
$(":radio"); // selects radio buttons
$(":checkbox"); // selects checkboxes
$(":checked"); // selects selected checkboxes or radio buttons
$(":header"); // selects header elements (h1, h2, h3, etc.)

CSS-like pseudo classes

Contd

DOM Traversing

It takes a bit more code, but its faster.

Walking the DOM

Walking Up the DOM

If we started by selecting a child, can we figure out what element is
its direct parent?

Walking up the DOM

1.
2.

Walking DOWN the DOM

Q:- With a parent that has many children who in turn have their own
children, how could we find only the first generation of children?

Walking DOWN the DOM

children(), unlike find(), only selects direct children

Manipulating and Accessing CSS

Class Names
jQuery allows you to easily add, remove, and toggle CSS classes, which comes in handy
for a variety of practical uses. Here are the different syntaxes for accomplishing this:

$("div").addClass("content"); // adds class "content" to all <div> elements

$("div").removeClass("content"); // removes class "content" from all <div> elements
$("div").toggleClass("content");
// toggles the class "content" on all <div> elements (adds it if it doesn't exist,
// and removes it if it does)

You can also check to see if a selected element has a particular CSS class, and then
run some code if it does. You would check this using an if statement. Here is an
example:
if ($("#myElement").hasClass("content")) {
// do something here
}
N.B :- You could also check a set of elements (instead of just one), and the result would
return "true" if any one of the elements contained the class.

Manipulating CSS Styles with jQuery

$("p").css("width", "400px"); // adds a width to all paragraphs

$("#myElement").css("color", "blue") // makes text color blue on
element #myElement

$("ul").css("border", "solid 1px #ccc") // adds

border to all lists

Adding, Removing, and Appending

Elements and Content
There are a number of ways to manipulate groups of elements with jQuery, including manipulating the content of
those elements (whether text, inline elements, etc).
Get the HTML of any element (similar to innerHTML in JavaScript):
var myElementHTML = $("#myElement").html();
// variable contains all HTML (including text) inside #myElement

If you don't want to access the HTML, but only want the text of an element:
var myElementHTML = $("#myElement").text();
// variable contains all text (excluding HTML) inside #myElement
Using similar syntax to the above two examples, you can change the HTML or text content of a specified
element:
$("#myElement").html("<p>This is the new content.</p>");
// content inside #myElement will be replaced with that specified
$("#myElement").text("This is the new content.");
// text content will be replaced with that specified
To append content to an element:
$("#myElement").append("<p>This is the new content.</p>");
// keeps content intact, and adds the new content to the end
$("p").append("<p>This is the new content.</p>");
// add the same content to all paragraphs
jQuery also offers use of the commands appendTo(), prepend(), prependTo(), before(), insertBefore(), after(),
insertAfter(),

Working with DOM

Selectors for ASP.NET Controls

If you need to grab an TextBox by its ID, you would undoubtedly think that this will work
just fine:
$(#txtBox)
However, it might not always.
The Problem: In ASP.NET, the INamingContainer appends identifiers to the controls so
that it can uniquely reference a control.
To get around this, you can use the following:
$("*[id$=txtBox']")
This will look for all elements (*) with txtBox at the end of it.
John Sheehan also some other solutions here:
http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/
Keep in mind, that this is not a good solution for controls in a Repeater, but you should be
using a class to reference these controls anyways, since they are not unique.