What is jQuery?

jQuery is a set of JavaScript libraries that have been designed specifically to simplify HTML document traversing, animation, event handling, and Ajax interactions. The main objective of jQuery is "write less, do more".

There are many other JavaScript code libraries such as MooTools, but jQuery has become the most popular because it is so easy to use.

Prerequisite

To start work on jQuery, you should be aware of the basics of:

• JavaScript
• HTML
• CSS

License

jQuery is free, open source software Dual-licensed under the MIT License and the GNU General Public License. Microsoft has integrated jQuery officially into its IDE Visual Studio 2010 and jQuery intellisense is available in Visual Studio 2010 and higher version now.

Why use jQuery?

Here are the core features supported by jQuery:

• Core Functionality - jQuery implements core Java Script functions as well as commonly used utilities.
• Cross Browser Support - jQuery helps to develop most browser compatible web page as it works across modern browsers. It abstracts away browser-specific features, allowing you to concentrate on design.
• Less Code - jQuery helps to implement UI related critical functionality without writing hundreds of lines of codes. It performs multiple operations on a set of elements with one line of code (known as statement chaining)
• Extensible - jQuery is extensible so you can use third-party-plug-ins to perform specialized tasks or write your own.
• Lightweight - jQuery is very lightweight library so it helps to improve the performance of the application.
• Events - jQuery simplifies working with the modern DOM events and provides common event helper functions
• Ajax Support - Provides utilities for working with Ajax, such as loading content from pages and dealing with JSON data.
• Animation & Effects - Provides functions for creating basic animations and effects, such as hiding and showing elements and moving objects around.
• User Interface - Provides an official plug-in with commonly used interface widgets, like slider controls, progress bars, accordions, etc.
• Manipulation & CSS - Provides functions for editing and changing documents content and working with CSS data such as positioning info.

Browser Compatibility

Currently compatible with modern version of all the main browsers in use today

Downloading jQuery

jQuery comes in two versions:

• Production - This version is used in live website because this version is compressed and minified.
• Development - This version is used for development and testing. This version is uncompressed and readable.

jQuery file can be downloaded from jQuery Official website.

Typically, you download both versions and then use each one for its intended purpose

Installing jQuery

Use as local file:

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>

Ideally, this markup is kept in under head tag of your web page; however you are free to keep anywhere you want.

Loading jQuery from CDN:
If you don't want to host jQuery within your website, you can include it from a CDN (Content Delivery Network).
CDN Stands for Content Distribution Network or also called Content Delivery Network is a group of computers placed at various points connected with network containing copies of data files to maximize bandwidth in accessing the data. In CDN, a client accesses a copy of data nearer to the client location rather than all clients accessing from the one particular server. This helps to achieve better performance of data retrieval by client.

There are two leading CDNs available that host jQuery files: Microsoft & Google

Microsoft CDN

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

Google CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.9/jquery.min.js" type="text/javascript"></script>

How to use jQuery?

$ Sign

The jQuery library provides the jQuery function, which allows you to select elements using selectors.

var paragrapths = jQuery('p');

But generally when you see jQuery code then you will see that $ sign is used mostly:

var paragrapths = $('p');

$ sign in the code above is just a shorter and more convenient name for the jQuery function. Actually, in the jQuery source code, you'll find this code:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

This code allows to use $ sign in place of jQuery keyword.

Document Ready Event

If you want to use any event of jQuery file then you need to call that event inside $(document).ready() function.

All code written inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This is to prevent any jQuery code running before the document is ready. This is also a advantage of jQuery over JavaScript.

As the name suggest, ready() method specifies what happens when document is ready. It is good practice to wait for the document to be fully loaded and ready before working with it.

Everything that you write inside this function is ready to go as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.

Also, you can call the document.ready function multiple times, and jQuery will chain together each one to be called in succession.

Syntax:

$(document).ready(function(){

// Call jQuery events here...

});

Shorter form of document ready event is also provided:

$(function(){

// Call jQuery events here...

});

For using ready() function you need to use script element of HTML. After using ready() function your HTML will look like this:

<html>
<head>
<title>jQuery Example</title>
   <script type="text/javascript" src="/jquery/jquery-1.6.1.min.js"></script>
   
   <script type="text/javascript" language="javascript">
       $(document).ready(function() {
           
           // Call jQuery events here...

       });
   </script>
</head>
<body>

</body>
</html>

There may be many cases which fail if methods are run before the document is fully loaded like:

• If you are trying to hide an element that is not created yet.

How to use external JavaScript file?

You can place your jQuery code in external jQuery file and use that file in you html. Let's see how to implement it.

First place your jQuery code in external JavaScript file. For example, Test.js:

Test.js

 $(document).ready(function() {
           
    // Call jQuery events here...

});

Now refer this file in your HTML:

Your HTML Page

<html>
<head>
<title>jQuery Example</title>
   <script type="text/javascript" src="/jquery/jquery-1.6.1.min.js"></script>
   
   <script type="text/javascript" src="/jquery/Test.js"></script>
</head>
<body>
</body>
</html>