- Easy to Code
- Large library Support
- 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.
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 TechnologyjQuery supports latest CSS3 selectors and XPath syntax.
- Functionality maybe limited
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 :
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.
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 :
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 :
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.
Following are some examples :
ID Selector :
We have used id selector to select a div element with id myDiv and applied to color attribute and set it to green.
jQuery provides many more selectors to use. For more information on jQuery selectors visit the following link :
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.
Without chaining :
With chaining :
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.
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.
In the above example, the callback parameter is the function that will be executed after the hide function is executed.
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.
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