This article gives an introduction to JQuery and how to get started in using it in your web applications.

What is JQuery?

JQuery is an amazing JavaScript library that makes it very easy to perform tasks such as modifying the DOM, event handling and animation. Other than JQuery, there are several other JavaScript libraries. Some of the popular ones are Prototype and Dojo. Due to the ease of use, JQuery has become one of the most popular libraries.

Setting up and using JQuery

Setting up JQuery is really straightforward and quick. The first step is to install the JQuery library. You can download the library from www.jquery.com It comes in two flavors - the uncompressed developer version or the zipped Production version. Once you download the js file, add it to your solution and you are good to go!

To use the library in your webpage, include a reference to the jquery JS file in your aspx page

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

Using JQuery for DOM manipulation

This article will be focusing on the strength of JQuery in DOM selection and manipulation. We will need to ensure that the DOM is ready before we start manipulating it. This is done by checking the document.ready() function as shown in the snippet below.

 $(document).ready(function() {
 //DOM is ready. We can write any JQuery statement here
 });

First off, you will notice that the syntax is a little different from what you are used to if you have been writing client side scripting using JavaScript. JQuery uses the '$' keyword extensively. Think of it as a way of getting a collection of objects and performing operations. JQuery lets you "chain" operations together. This makes writing JQuery very concise and clear.

Let's jump into writing some code. I will be using the simple HTML code below for demonstrating DOM manipulation.

<div id="divSection">
  <table id='tblSection' border="1">
    <tbody>
      <tr headerrow="true" id="firstRow">
        <td>
          JQuery rocks!!
        </td>
      </tr>
      <tr class="whiterow">
        <td>
          JQuery can be used for animation
        </td>
      </tr>
      <tr class="whiterow">
        <td>
          JQuery can be used for AJAX
        </td>
      </tr>
      <tr class="whiterow">
        <td>
          JQuery can be used for Event handling
        </td>
      </tr>
    </tbody>
  </table>
</div>

The HTML would render as a simple table

Let's now look at an example of changing the style of the first table row:

$('#tblSection').children('tbody').eq(0).children('tr').eq(0).attr('style', 'color:Red');

The single line of code is doing the following:

1. Gets the element with the ID - 'tblSection'
2. Gets all the children 'tbody' element
3. Gets the first 'tbody' element
4. Gets all the 'tr's in 'tbody'
5. Gets the first 'tr'
6. Applies the style attribute to the first table row

Once you have filtered the elements and have a reference to an element you are interested in manipulating, you can chain the operations you want to perform.

In our previous example, we selected the table element using the '#' sign. This sign is used to select an element by Id. There are other JQuery selectors as well. Let's take a look at different ways of changing the style of the first table row. The table would now look like this

Now, let’s try to perform the same operation using different selection techniques.

Selection by the value of an attribute.

The first table row has a custom attribute called "headerrow" that has a value of "true" We can select an element based on the attribute value.

$('#tblSection').children('tbody').eq(0).children('[headerrow = \'true\']').attr('style', 'color:Red');

Selection by Index

You can select the first table row by using the following piece of JQuery code:

$('#tblSection').children('tbody').eq(0).children(':first-child').attr('style', 'color:Red');

Selection by Attribute

You can also select an element based on whether an attribute starts with a particular value. In the example above, we could use the following code to select the first table row

$('#tblSection').children('tbody').eq(0).children('[id ^= \'firstRow\']').attr('style', 'color:Red');

The expression id ^= 'firstRow' lets us select an id starting with 'firstRow' We can use the expression id *= 'firstRow' to select elements that contain the id 'firstRow' We can use the expression id $= 'firstRow' to select elements that end with the id 'firstRow’

For more JQuery selectors, refer to the JQuery API

Iterating through the table rows

Sometimes, we might need to iterate through the elements and perform operations. In our example, let's say we want to iterate through the table rows and set the style attribute for every row. Though this doesn't require us to iterate through the table row elements and we can achieve the same result by selecting using other JQuery selectors, let us assume we would want to change the style of every table row in the example

$('#tblSection').children('tbody').eq(0).children('tr').each(
  function()
  {
    //Process each of the table row here
    $(this).attr('style', 'color:Red');
  }
);

One thing to note in the code snippet is the usage of $(this) that refers to the <tr> element we are processing

Getting a DOM element from JQuery

All the functions that we used in earlier examples are JQuery functions. If we want to apply native JavaScript methods on an element selected using JQuery, we will need to leave the JQuery world. We do this by using the get() function. Consider the example below:

alert($('#tblSection').children('tbody').eq(0).children('[id ^= \'firstRow\']').get(0).id);    //Would alert 'firstRow'

Once we use the get(0) function, we are free to use any of the JavaScript properties

Conclusion

JQuery is a very fast, helpful JavaScript library that is very powerful. This article touches the tip of the iceberg with respect to JQuery capabilities. Other than DOM manipulation, JQuery’s strength is also in Animation, AJAX and event handling.