• Next →

Programming in JavaScript can be a difficult task due to various reasons. First, JavaScript incompatibility among various browser vendors is a big issue. Second, in spite of recent standardization efforts by World Wide Consortium (W3C: http://www.w3.org/), some of the web pages continue to use older versions of browsers that are not W3C-compatible. Third, it is never guaranteed that the implementation of current W3C standards is done equally by different browser-vendors.

The above reasons motivated creation of various JavaScript libraries. These libraries standardize JavaScript behavior by putting together a light-weight library on top of existing browser implementation. They do the hard-work of taking into account the existing incompatibilities among various browser-vendors so that applications sitting on top of these libraries do not have to worry about them. jQuery is one such popular cross-browser JavaScript library.

jQuery is a client-side JavaScript library that provides simple and consistent APIs for JavaScript programming (http://jquery.com/). If two browsers running the same jQuery API have different JavaScript implementations, then jQuery takes that into account and invokes the appropriate browser API for the task. With that, the developer need not have to bother about browser incompatibilities. Not having to bother about incompatibility distraction, ends up being less work for the jQuery developer! One can write an application in jQuery using much less lines of code than when writing it in JavaScript. This benefit is often described as the "write less, do more" approach for jQuery!

Equally important, jQuery methods are also simpler, fluent, and fun to write! It is due to these reasons that jQuery is a more widely used JavaScript library as compared to other libraries like Dojo, Prototype etc.

Prerequisites for jQuery

For programming in jQuery, it would do us a lot of good if we are also familiar with HTML, CSS, and JavaScript. However, jQuery APIs are fairly simple and so you can get away with even a minimal understanding of these three technologies.

For the large part, jQuery is a querying language and uses CSS selectors to identify and update elements. Hence, if we are familiar with CSS, then we would certainly find ourselves very much at home.

Even though jQuery APIs are simple, it is still a good idea to be familiar with its parent language: JavaScript. This is because you may end up writing various JavaScript callback functions for various jQuery event handlers.

Lastly, since jQuery is used with HTML, it would certainly be a good investment to become familiar with HTML. Various HTML elements are often represented using the Document Object Model (DOM) and knowing HTML DOM method would be a definite plus!

Overview of jQuery

jQuery is primarily a querying language, where we use the jQuery() method (aka the $() method) to both locate an element on the HTML page and, if needed, to modify it. With jQuery, we can access page elements using HTML tags, CSS identifiers, and DOM.

Once the initial page is loaded, jQuery helps us in making the page more interactive by attaching event handlers to page elements. Event handlers add an asynchronous behavior to the page. In other words, the web-page does certain things only when certain events are triggered. As an example, we can add event to an image such that when we hover the mouse on top of an image, then it displays additional information. However, if the user does not move the mouse, then no information is displayed.

Every language needs to have common programming constructs like loops (like for-loop, while-loops etc), conditional expression (like if-else statements), arrays, strings, etc. Since jQuery is a library written on top of JavaScript, it largely relies on JavaScript to provide most of these constructs.

Next, jQuery also provides a rich support for creating animations, adding AJAX, implementing JSON, and providing a better UI. Last but not the least, we can also extend jQuery using plug-ins; these plug-ins provide various functionalities.

"Hello World" Example

Before we go any further, let us give in to the temptation of writing a simple Hello World program. The example is simple and all it does is print "Hello World!" on the browser. Here is the example:

 <!doctype html>
 <html>
 <!-- Let us start by including the jQuery library -->
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
 </script>

 <body>
 <!-- Add a div element with CSS ID as "idDiv" -->
 <div id="idDiv"></div>

 <!-- The jQuery script goes here! -->
 <script type="text/javascript"> 
     // Grab the "idDiv" element and append it.
     $("#idDiv").append("Hello World!");
 </script>
 </body>

 </html>

In the above example, the first thing to note is that we start by adding the jQuery library. The example sources the library using Google CDN, which is a popular choice for many programmers. Alternatively, we can also download the jQuery library and source it directly from our webserver. Thus, if the jQuery library file were to be "jquery.js" and this file were in the current folder, then we can include our own copy of jQuery library within the script tags: '<script type="text/javascript" src="./jquery.js"></script>'. Please note that we need to source the jQuery library prior to having the script tag that holds the actual jQuery code.

Next, the example embeds the jQuery code in the HTML page using the same script tags "<script type="text/javascript">" and "</script>". This time using the "src" attribute is not a must. Any code that sits between these two tags executes in the JavaScript context. And, since jQuery runs on top of JavaScript, we can embed jQuery code as well. We can place jQuery code anywhere in an HTML page and we can place it any number of times.

Lastly, the example calls jQuery APIs using jQuery() method or its more popular, the $() method. The $() method is actually a convenient shortcut to the jQuery function -- writing "jQuery(foo)" is same as "$(foo)"!

Running the above example is fairly simple. We need to merely point the web browser to the location of the "jquery_hello.html" file and thus, load the file. One the page is loaded, we would see the "Hello World!" text shown below. The bonus is that since jQuery is run using a web browser's built-in JavaScript interpreter, there is no need to compile these programs!

Figure: jQuery "Hello World!" program

The above example is a good proof of jQuery's simplicity. For selecting the div element using CSS id, all we do is $("#idDiv"). On the other hand, with JavaScript, we would need to use APIs like getElementById("idDiv") to get a handle of the element. Worse, there are some (older) versions of certain browsers that do not support getElementById(). With jQuery, we can put such concerns at rest!

We should note that the above program is about the simplest jQuery program one can write. No surprise there! In a production environment, jQuery scripts are usually loaded when the document is ready to handle jQuery scripts. This is done using the ready event of the document object. In addition, jQuery scripts are usually written in a separate file and included using the "src" attribute of the script tag. Furthermore, since jQuery library runs on top of JavaScript, it is almost certain that your program would also contain some amount of base JavaScript code. We will discuss these in detail in next sections.

• Next →