Jquery

his guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins.

This guide contains no "click me" examples. The intention of providing only "copyme" code is to invite you to try it for yourself. Copy an example, see what it does, and modify it.
Contents

1 Setup
2 Hello jQuery
3 Find me: Using selectors and events
4 Rate me: Using Ajax
5 Animate me: Using Effects
6 Sort me: Using the tablesorter plugin
7 Plug me: Writing your own plugins
8 Next steps

Setup

To start, we need a copy of thejQuery library, which we can get from the main download page. The jQuery Starterkit provides some markup and CSS to work with. After downloading and extracting its content we put jquery.js into the same directory and open starterkit.html and custom.js with your favorite editor and starterkit.html with a browser.

Now we have everything to start with the notorious "Hello world" example.Interesting links for this section:

jQuery Starterkit
Downloading jQuery

Hello jQuery

We start with an empty html page:





// we will add our javascript code hereThis page just loads the jquery.js library (make sure the URL points towhere you stored your copy of jquery! This example assumes that you store it in the same directory as this example file). Two comments indicate where we will expand this template with code.

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, weregister a ready event for the document.

$(document).ready(function() {
// do stuff when DOM is ready
});

Putting an alert into that function does not make much sense, as an alert does not require the DOM to be loaded. So lets try something a little more sophisticated: Show an alert when clicking a link.

Add the following to the :

Link

Now update the $(document).ready handler:$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

This should show the alert as soon as you click on the link. You are ready now to copy and paste this script into your custom.js file. Then, open starterkit.html in the browser and click any link. You should see a pop-up window with "Hello world!" message regardless of what link was clicked.Let's have a look at what we are doing: $("a") is a jQuery selector, in this case, it selects all a elements. $ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object. The click() function we call next is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function whenthe event occurs.

This is similar to the following code:

Link

The difference is quite obvious: We don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JS), just as we separate structure and presentation by using CSS.

With this in mind, we explore selectors and events a little further.

Interesting links for this...