Post
Ask Question

An Introduction to jQuery

Introduction

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, which 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 website 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 reference to the jQuery library on the master page of your site so it's available on all pages.

Adding the reference to jQuery on 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 must 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 standard <script> syntax.

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

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

Script file

In the above case, your reference to jQuery will look like this.

<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 on 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');

IntelliSense for jQuery

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

JQuery

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.

VWD

TRY IT OUT

  1. Open Visual Studio then select "File" --> "New Web site" Then under the web section select "ASP.Net empty website".
  2. Right-click on the root directory then select "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>

<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>
  4. 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:
    Run the application
  5. Click on the red button, you will see the background color change to red as shown in the following figure:
    Color change
  6. In the same way, click on the blue button, and you will see the background color change to blue as shown in the following figure:
    Demo

Summary

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


Similar Articles