Learn how to use jQuery?

In this post, you will go through What is jQuery, why to use jQuery and learn how to use jQuery. jQuery is without any doubt is the most popular client side library. The popularity of jQuery is so much that it has become must for every developer. Before, you go further let me clear the very first doubt that "jQuery is not a language".

What is jQuery?

jQuery is a library written on top of the JavaScript. So it is a JavaScript library. It is a library for the JavaScript programmers, which makes web development like a piece of cake. jQuery helps the programmers to keep code simple and concise. The biggest advantage of jQuery is that jQuery library is designed to keep the things very simple and reusable. Motto is jQuery library is "Writing JavaScript code should be fun."

jQuery library simplifies the process of traversing and finding elements in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Lengthy JavaScript code can easily replaced by few lines of code in jQuery.

Why to use jQuery?

A question came that when all the things can be achieved using JavaScript then why to go for jQuery? Well the answer is that The jQuery library is has many easy to use functions and methods to make rich applications. And believe me these functions are fairly easy to learn and even it is not difficult for designers or freshers to learn. Due to it's simplicity, jQuery is pretty easy to learn and easy to write. jQuery is a client side language so it can be easily used with ASP.NET,PHP,JSP and Servlets.

Features of jQuery

It works on all browsers
It is fast and extensible
Make look UI stunning
Allows to access elements in the document
Easily apply CSS
Perform animation in better way
Ajax Interaction made easy
Change document’s content easily
Event handling made easy
Big pool of reusable plugins for various functionalities

Where to download jQuery?

jQuery file can be downloaded from jQuery Official website http://www.jquery.com/

jQuery Versions

jQuery library comes in 2 forms:

The uncompressed .js file is easy to read and modify, but it's around 190kb in size (at the time of writing).
The minified .js file has all comments, whitespace, and other unnecessary characters removed from the file, squeezing the whole library into a mere 23kb. Although you can't easily read the code, this is the version you'll want to place on your site, as it's much quicker for visitors to download.

How to use jQuery

To start with jQuery, first download the jQuery from it's official website (http://JQuery.com). Make sure you download the latest copy of the jQuery. You will find that it's a single JavaScript file. Yes, single JavaScript file with lots of magic. No installation is required, you just need to add reference of the jquery.js.

<script src="Script/jquery.js" type="text/javascript"></script>

I have copied the jquery.js and placed it in script directory. For demo, we will see how easily we can change the CSS.

Let's first take a look at HTML.

<h2>History of jQuery</h2>
<div id="content">
Initially it's was released in January 2006 but the very first stable version of jQuery 1.0 was released in August 2006. This version had support for CSS, events and Ajax. After that many version of jQuery were released and latest version is jQuery 1.9. 
</div>

In the above HTML, there is div element with ID "content". Now, we will see how to find the div and apply CSS to it using jQuery. Let's see CSS class.

<style type="text/css">
.ApplyColor
{
   font-family: calibri;
   font-size: 12pt;
   color: blue;
}
</style>

The first thing to learn about jQuery is $(document).ready() function. It is an entry point and gets called as soon as DOM is loaded. You need to place all your jQuery code within this function. JavaScript developers can think of window.onload() being similar to $(document).ready(). But it is different. Will explain later in the post.

<script type="text/javascript" language="javascript">
 $(document).ready(function() {
    $('#content').addClass('ApplyColor');
 });
</script>

A .ready() handler can be placed anywhere on the page and you can even have multiple ready handlers in the page. Now, if you view this page in browser, the you will see the div with content id is having gray background and white color foreground.

See Complete Code

window.onload() vs $(document).ready()

window.onload() and $(document).ready() are different. document.ready() gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload() then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.

What are jQuery CDN?

CDN Stands for Content Distribution Network or also called Content Delivery Network is a large distributed system of servers deployed in multiple data centers in the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. There are several advantage of using CDN.

Reduce Load: It reduces the load on your web server as it downloads from Google server's.
Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from any CDN then the cached version will be used. It will not be downloaded again.
Serves fast: You will be also benefited from speed point of view. As CDN has dozen's of different servers around the web and it will download the jQuery from whichever server is closer to the user.
Parallel Downloading: As the jQuery js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.

There are 3 different CDN that provide jQuery.

Google
Microsoft
jQuery

Code to load jQuery Framework from Google CDN

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

Code to load jQuery Framework from Microsoft CDN

<script  type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js">
</script>

Code to load jQuery Framework from jQuery Site(EdgeCast CDN)

<script  type="text/javascript"
    src="http://code.jquery.com/jquery-1.9.0.min.js">
</script>

It is a good practice to use CDN but what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting. Read "How to load jQuery locally when CDN fails".

Note:When this post is written, the latest version of jQuery is 1.9

Summary

This post gives you clear idea about what is jQuery and how to start with it. It is not possible to cover everything but this post is good enough to kick start. So start learning jQuery and start using it. Some of my previous series of articles will help you to learn jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Scripts Used on This Site

Learning jQuery