jQuery is a lightweight, “write less, do more”, JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery is a fast, small, and feature-rich 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.
The jQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
- A $ sign to define/access jQuery
- A (selector) to “query (or find)” HTML elements
- A jQuery action() to be performed on the element(s)
Example:-
|
1 2 3 4 |
var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click", function( event ) { hiddenBox.show(); }); |
You can obtain the latest version of jQuery from the jQuery site at http:// jquery.com/. Installing jQuery is as easy as placing it within your web application and using the HTML <script> tag to include it in your pages, like this:
|
1 2 3 |
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script> or <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
Traditionally, the onload handler for the window instance is used for this purpose, executing statements after the entire page is fully loaded. The syntax is typically something like
|
1 2 3 |
window.onload = function() { // do stuff here }; |
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 are fully loaded and the page is displayed in the browser window. This includes not only resources like images, but QuickTime and Flash videos embedded in web pages, and there are more and more of them these days. 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.
A much better approach would be to wait only until 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 behaviors. Accomplishing this in a cross-browser manner is somewhat difficult, but jQuery provides a simple means to trigger the execution of code once the DOM tree has loaded (without waiting for external resources). The formal syntax to define such code (using our hiding example) is as follows:
|
1 2 3 |
jQuery(document).ready(function() { $("div.notLongForThisWorld").hide(); }); |
First, we wrap the document instance with the jQuery() function, and then we apply the ready() method, passing a function to be executed when the document is ready to be manipulated.
We called that the formal syntax for a reason; a shorthand form, used much more frequently, is as follows:
|
1 2 3 |
jQuery(function() { $("div.notLongForThisWorld").hide(); }); |