An Introduction to JQuery

Advantages of using  JQuery

 

Jquery is one of the most popular JavaScript libraries in use today. You may ask why to use Jquery. The answer is that using Jquery we can accomplish some complex JavaScript tasks very easily and by writing comparatively less lines of code.

First let us understand what unobtrusive JavaScript is. Unobtrusive JavaScript means that we keep the JavaScript and HTML separate usually by including JavaScript code in a separate file. In unobtrusive JavaScript we attach event-handlers with JavaScript code in the JavaScript code itself instead of using attributes in the HTML elements.

The benefits are:

1. HTML and JavaScript each can modified independently.
2. JavaScript can be shared across multiple HTML pages .
3. HTML is easier to understand by web designers.

With unobtrusive JavaScript the only <script> tag is used  to include external files.

<script src='FileName.ext'  type='text/javascript'></script>

In Unobtrusive JavaScript we need to write significantly more lines of code. Following is an example

window.onload = function() {

           document.getElementById('button1').onclick = buttonClicked;

           };

           Function buttonClicked()

           {

           }

}

As we can see in attaching element with behavior using JavaScript we need to write considerably more lines of code than attaching behaviors with elements directly.

Using Jquery we can very easily attach element's behavior with the element and we can write the above JavaScript code using a single line of Jquery code.

Starting with JQuery  

Many versions of JQuery have been released with the latest being 1.4.2. JQuery library includes a single JavaScript file that we need to include in the page in which we want to use JQuery. We can include it like we include a normal JavaScript file.

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

This tag downloads the jquery library on the client so the browser has access to all the Jquery functionality. To add Jquery code to the page we need to add it like a normal JavaScript code between the <script> tags.

Jquery's base is retrieving elements from the HTML page and performing actions on the retrieved elements. We retrieve HTML elements from page using selectors .Following is the syntax of using selector

$(selector) 

The above $(selector) function returns an object that contains group of elements that match the search criteria as specified by the selector. This object has large large number of useful methods that act on the retrieved group of elements. An important feature of these methods is that they return the same group of elements .

An example is:

$("#div2").html("Text added using Jquery selectors and methods");

In the above code someElement is the element name, it is called id selector.html is the Jquery function we want to call.

Jquery defines different kinds of selectors.

$("body > div").html("Text added using Jquery selectors and methods");

This would select all the div elements that are inside body element.

We can again call another method on the above method call like:

$("body > div").html("Text added using Jquery selectors and  methods").css("background","blue");

This is called Jquery chains. This reduces the code we need to write.

We write the Jquery code inside the  $(document).ready() function as it executes after the page is loaded in the browser.

We will continue looking at many more important features of JQuery in the next article.