jQuery Tutorials

Home » jQuery Tutorials

Tags:

The jQuery is the light weight "write less do more" javascript Library.
It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
People known to javascript can understand and learn it much easier and fast.
jQuery has methods that performs the task, compares to multiple lines in javascript.

Advantages :

Easy to Code
This is pretty much the main advantage of using JQuery, it is a lot more easy to use compared to standard javascript and other javascript libraries. Apart from simple syntax, it also requires much less lines of code to achieve the same feature in comparison. The above feature makes jQuery easy to use and code compare to javascript.
Large library Support
JQuery enables you to perform hordes of functions in comparison to other Javascript libraries. jQuery has large number of functions and library support which you can refer and use.
Strong opensource community. (Several jQuery plugins available)
JQuery, while relatively new, has a following that religiously devote their time to develop and enhance the functionality of JQuery. Thus there are hundreds of prewritten plugins available for download to instantly speed up your development process. Another advantage behind this is the efficiency and security of the script.
Great documentation and tutorials
The JQuery website has a comprehensive documentation and tutorials to get even an absolute beginner in programming to get the ball rolling with this library.
Ajax support
JQuery lets you develop Ajax templates with ease, Ajax enables a sleeker interface where actions can be performed on pages without requiring the entire page to be reloaded. jQuery has methods which support ajax functionality.

Animation
jQuery provides you the easy usable methods to achieve animation affects easily. jQuery's UI 1.8 plugin has many features.

Amazing Selectors
jQuery provides various selectors to select DOM elements and manipulate them easily.

Cross-Browser Support
jQuery provides the cross browser support. jQuery runs in almost all the latest browsers.

Latest Technology
jQuery supports latest CSS3 selectors and XPath syntax.

Disadvantages :

Functionality maybe limited
While JQuery has an impressive library in terms of quantity, depending on how much customization you require on your website, functionality maybe limited thus using raw javascript maybe inevitable in some cases.
JQuery javascript file required
The JQuery javascript file is required to run JQuery commands, while the size of this file is relatively small (25-100KB depending on server), it is still a strain on the client computer and maybe your web server as well if you intend to host the JQuery script on your own web server.

How To Use ?

In order to use jQuery in your application you need to download jquery js file and include in you project. You can download the latest file from jQuery official site. When the file is inlcuded in the project, then we need to add its reference in the file where we want to use it. Its better to add the reference in the Layout file. We have added the reference as shown below :

We have refenced the added jQuery script file inside head section.
Now we can use jQuery.
If the jQuery file is not referenced and jQuery is used in page. The it gives script error as shown below :

The above error says that, either the script file is not loaded or it is not referenced.

The document ready handler :

jQuery supports Unobtrusive javascript, i.e. structure or DOM is separated from script or behaviour. When using Unobtrusive javascript, behaviour is separated from structure.

So we are performing operations on the page elements outside of the document markup that created them.

In order to achieve this, we need to wait until the DOM elements of the page are fully realized before those operations execute. In short the HTML should load before jquery works.

Traditionaly, the onload handler for the window instance is used for this purpose.

eg :

window.onload = function()

{

//Write something here !1

};

This causes the defined code to execute after the document has fully loaded. Unfortunately, the browser not only delays executing the onload code until after the DOM tree is created, but also waits until after all external resources all fully loaded and the page is displayed.

This includes not only images, but Quicktime and flash videos embedded in web page and much more. As a result, visitors can experience a serious delay between the time that they first see the page and the time that the onload script is executed.

Better Approach :

A much better approach would be to wait only untill the document structure is fully parsed and the browser has converted the HTML into its resulting DOM tree before executing the script to apply the rich behaviour. To achieve this in a cross-browser manner is difficult, but jquery comes to rescue. jQuery provides a simple means to trigger the code or script once the DOM tree as loaded. Following is the syntax :

$(document).ready(function()

{

$("#largeDiv").hide();

});

We wrap the document instance with the jQuery function, and then we used ready method, passing a function to be executed when the document is ready for manipulation.

We can also use a shorthand form for above syntax :

jQuery(function()

{

$("#largeDiv").hide();

});

By passing a function to jquery() or $(), we instruct browser to wait untill the DOM has fully loaded before executing the code. We can use this technique multiple times within the same HTML document, and browser will execute all of the functions we specify in the order that they are declared in the page.

jQuery Selectors :

jQuery selectors are one of the important aspects of the jQuery library.
They allow you to select and manipulate HTML elements as a group or as a single element.
jQuery selectors support the Cascading style Sheet (CSS) syntax to select elements by element name, attribute name, or content.
jQuery provides wide range of selectors as compare to javascript selection.

Following are some examples :

ID Selector :

$(document).ready(function()

{

$("#myDiv").css("color","green");

});

We have used id selector to select a div element with id myDiv and applied to color attribute and set it to green.

Demo :

jQuery provides many more selectors to use. For more information on jQuery selectors visit the following link :

jQuery Selectors

Tips for Efficient jQuery Selection

Chaining in jQuery :

Chaining allows us to run multiple jQuery methods with single statement on same selected element or set of elements.
Chaining reduces the line of code and also affects the performance.

eg:

Without chaining :

$("#myDiv").css("width","400px");
$("#myDiv").delay("2000");
$("#myDiv").slideUp("slow");

With chaining :

$("#myDiv").css("width","400px").delay("2000").slideUp("slow");

In the above example, in case of without chaining browser has to select the div element 3 times. This multiple times selection would cost if we need to select multiple elements on the page.
When it comes to with chaining, the element is selected once and methods are used one after the another. Thus chaining reduces lines of code and helps in gaining performance.

Demo :
Go to HTML tab and come back to result to see the effect.

How Chaining Works :

Its a simple concept to understand. When the set of elements are selected, the selected elements are pushed to stack maintained internal by jQuery objects. Once one operation is performed say suppose we used find function, then resultant selected elements are returned and pushed to stack and next method can operate on this object.
So, after one operation, latest affected object is returned on which we can perform another operation using another method.

Callback Fuctions in jQuery :

Callback is a user-defined functions that is used to invoke custom code at the specified time.
For instance you can create callback functions to handle an event, iterate over a collection of nodes, or animate an element.

eg:

$(selector).hide(speed,callback);

In the above example, the callback parameter is the function that will be executed after the hide function is executed.

Demo :

A callback function can be passed with or without argument. The above example shows how to use callback function without argument. The following code snippet show how to use callback function with arguments.

eg:

$(selector).hide(speed,callback(param1,param2));

jQuery Methods :

jQuery provides methods using which we can traverse, manipulate and filter HTML elements. jQuery methods simplifies the way to achieve the functionality. For more information on jQuery methods visit the following link :

List of jQuery Methods

More interesting jQuery codes

Read XML file using jQuery
Prevent cut copy paste on textbox using jQuery
Disable right click using jQuery
Detecting browser using jQuery
Tips for optimizing jQuery
Document ready handler in jQuery
Apply Style to alternate TR element using jQuery
Append text to elements using jQuery
Apply CSS to controls using jQuery
Enable Disable textbox using jQuery