An Introduction to jQuery

An Introduction to jQuery

The main focus of the jQuery library has always been to simplify the way you access the elements in your web pages, provide help in working with client-side events, enable visual effects like animation, and make it easier to use Ajax in your applications. In January 2006, Jhon Resign announced the first version of jQuery, that was followed by an official release of jQuery 1.0 in August 2006. Many more versions would follow, with version 1.4.1 as a stable release.

Note: You can download the latest version of jQuery from the official web site at http://jquery.com

Choosing the Location for Your jQuery Reference

• Add a reference to the jQuery library in just the web pages or user controls that require it.
• Add a refernce to the jQuery library in the master page of your site so it's available in all pages.

Adding the reference to jQuery in the master page of your site is quite convenient, because all pages based on this master page automatically get access to the jQuery functionality. However this can affect the performance of your first page because the libraries mst be downloaded from the server.

Various Ways To Include The jQuery Library

Because the jQuery library is a single file with JavaScript code, you can embed a reference to the library in a page, user control, or master page using the standerd <script> syntax:

<script src="FileName" type="text/javascript"> </script>

It is good practice to store all script files in one folder in the root of your site as shown in the following figure.

In the above case your reference to jQuery will look like:

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

Another alternative is to refer to an online version of the library with Microsoft's Content Delivery Network (CDN). For more information about that, visit : www.asp.net/ajax/cdn

Selecting Items Using jQuery

In jQuery you use the dollar sign($) as a shortcut to find an element in your page. The elements that are found and returned are referred to as a matched set. The basic syntax for the $ method is:

$('Selector Here')

Basic Selectors

Universal Selector

Just like CSS, a universal selector matches all the elements in your page.

$('*').css ('font-family', 'Arial');

ID Selector

This selector finds and retrieves the elements by its ID. For example:

$ ('#Button1 ').addClass(' NewClassName'):

Element Selector

This selector gets a reference to zero or more elements that match the specific tag name.

$('h2').css ('color', 'blue');

Class Selector

This selector gets a reference to zero or more elements that match the specific class name. Consider the following HTML code:

<h1 class="Highlight">Demo of jQuery </h1>
<h2>Heading 2</h2>
<p class="Highlight"> first paragraph</p>
<p>Second Paragraph</p>

Notice how two of the four elements have a CSS class called Highlight. The following jQuery code changes the background color of the first heading and the first paragraph to red, leaving other elements unmodified:

$(' . Highlight'). css ('background-color', 'red');

Grouped and Combined Selectors

Just as with the CSS, you can group and combine selectors. The following grouped selector changes the text color of all h1 and h2 elements in your page.

$( 'h1 , h2 ').css ('color', 'orange');

IntelliSence for jQuery

Intelligence for jQuery work through the extra file --> jquery-1.4.1-vsdoc.js



After adding a reference to the file specified above in your web page you will get intelligence for jQuery code in VWD as in the following.



TRY IT OUT

1. Open Visual Studio then selct "File" --> "New Web site" then under the web section select "ASP.Net empty web site".
2. Right-click on the root directory then selct "Add" --> "New Item" --> "WebForm" then click "OK".
3. Write the following code inside the form tag:
    

   <form id="form1" runat="server">

       <div>

       <h1>JQuery Demo Part 1</h1>

       </div>

       <table id="DemoTable">

       <tr>

       <td>

       <b>Row 1 Cell 1</b>

       </td>

       <td>

       <b>Row 1 Cell 2</b>

       </td>

       </tr>

        <tr>

       <td>

      <b> Row 2 Cell 1</b>

       </td>

       <td>

       <b>Row 2 Cell 2</b>

       </td>

       </tr>

        <tr>

       <td>

      <b>Row3  Cell 1</b>

       </td>

       <td>

      <b>Row3  Cell 2</b>

       </td>

       </tr>

       </table>

       <input id="Button1" type="button" value="Red" />&nbsp;&nbsp;

       <input id="Button2" type="button" value="Blue" />

   </form>
    

4. Write the following jQuery code in the Head tag of HTML source view:
    

   <script type="text/javascript">

           $(function () {

               $('#DemoTable').css('background-color', 'green');

    

               $('#Button1').click(function () {

                   $('#DemoTable').css('background-color', 'red');

               });

    

               $('#Button2').click(function () {

                   $('#DemoTable').css('background-color', 'blue');

               });

              

           });

         

    

       </script>
    

5.  Save all your changes and press F5 to run the application. If everything goes well then you will see in the browser that the table background is green as shown in the following figure:
   
   
    

6. Click on the red button, you will see the background color change to red as shown in the following figure:
   
   
    

7. In the same way, click on the blue button, you will see the background color change to blue as shown in the following figure:
   
   
   

Summary

In this article you were introduced to jQuery, a very popular, open source, client-side JavaScript framework for interacting with the Document Object Modeling (DOM).