Download the latest jQuery library from jQuery.com and include the reference to the jQuery library file in our ASPX page. The latest library is 1.3.2.

<script src="_script/jquery-1[1].3.2.js" type="text/javascript"></script>

        <script language="javascript">

            $(document).ready(function() {

            alert('Welcome to jQuery World!!');

            });

 </script>

Note

I have copied the jQuery library into a folder called _script in the solution.

This ($(document).ready()) is the first thing we will learn in jQuery. The code inside this event will load as soon as the DOM is loaded and before the page contents are loaded. So, this is event where we need to hook the events to the page control and other initializations.

1.      It’s lightweight, easy and fast.

2.      Write less but do more.

3.      Cross Browser Compatibility.

4.      Separate javascript code from HTML mark-up.

5.      Easy and Light-weight Ajax Application.

6.      Availability of various plug-in’s.

7.      You can extend it.

8.      We can use CDN (Content Distribution Network) for internet site.

9.      Microsoft and Intellisense support in Visual Studio 2008.

10.  Easy Integration with ASP.Net Ajax projects.

Moving forward, we will look deeply into the above advantages with examples.

jQuery library as such is not a bulky library in terms of size(just 20KB in compressed form), execution time, etc. Once you start using jQuery, you can understand its simplicity and it will take very less development time when compared to classical javascript code. As I said earlier, just including the jQuery library using <script> tag is all you need to work on jQuery. It has no security risk associated with it. You can include it in your project just like any other javascript file.

The main advantage of jQuery library is, we can do various complex client side operations with very less code. This is because of various selector expressions support, chaining mechanism and other similar features of jQuery which makes the complex DOM manipulation lot easier.

To select a HTML element in javascript,

document.getElementById('txtName');

The above equivalent in jQuery will be,

$('#txtName');

To select all the rows in a table and setting a background color,

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script language="javascript">

        $(document).ready(function() {

            $('#table1 > tbody > tr').css("background-color", "Red");         

        });

  </script>

Refer jQuery selector documentation to know more on jQuery selectors.

Refer the below 2 articles which will check the CheckBoxes in all the rows when we select the header CheckBox in a GridView control to understand the above point. First uses javascript and former uses jQuery library.

GridView with CheckBox – Select All and Highlight Selected Row – JavaScript Version and more code.

Check All Checkboxes in GridView using jQuery – jQuery version and less code.

The other advantage of jQuery is using the chaining mechanism which will help us to reduce the code.

Refer the below code to understand better,

<script language="javascript">

        $(document).ready(function() {         

            $('#txtName').css("background-color", "Red").val("Test");

        });  

    </script>

The above code selects a TextBox control with ID txtName, then applies css style and then set its text as “Test”.

The jQuery code we write is compatible with all the browsers and hence it prevents the need to write separate client side code for different browsers. Remember to set the css properties that are cross-browser compatible when using jQuery for cross browser compatibility.

jQuery library enables us to separate the client side scripts from the HTML mark-ups. This is possible because of $(document).ready() function of jQuery.

For example,

<input id="btnSubmit" onclick="javscript:Save()" type="button" value="button" />

The above code can written as,

    <script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script language="javascript">

        $(document).ready(function() {        

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

                alert('Submit Clicked!');

            });

        });

    </script>

Thus, when we use jQuery library we can make our HTML code neat without any javascript code combined with it.

It is also possible to separate jQuery code into a separate javascript file and link to the aspx page. For example, the above code can be separated in a separate javascript file and it can be linked to the aspx page. Refer the below code,

ASPX

<head runat="server">

    <title></title>

    <script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

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

    </script>

</head>

Default.js

$(document).ready(function() { 

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

        alert('Submit Clicked!');

    });

});

One of biggest advantages of using jQuery library is developing light weight Ajax application in ASP.Net with JSON support. With jQuery library we can prevent the bulky ASP.Net AJAX’s UpdatePanel control for Ajax communications.

Refer my articles on codedigest.com to know more,

1.      Building Cascading DropDownList in ASP.Net Using jQuery and JSON

2.      Creating a Simple AJAX Master-Details View Using jQuery, JSON and jTemplates in ASP.Net

3.      Building Collapsible Panel Control using jQuery in ASP.Net Page

4.      Populating RadioButtonList Using jQuery, JSON in ASP.Net

5.      GridView Style Edit Update in Repeater Control Using jQuery and Ajax

6.      Using JQuery in ASP.Net AJAX Applications – Part 1

7.      Using JQuery in ASP.Net AJAX Applications–Part 2

There are various free plug-in’s available on the internet which we can use in our projects. For example, jQuery tabs, jTemplate, etc.

Refer the plug-in’s directory here. Since, the jQuery usage is becoming high day by day there are already lots of plug-in’s available online which we can re-use.

It is also possible to extend existing functionality provided by jQuery library.

Refer the below post which talks about jQuery Custom Selectors.

If our site is hosted on internet, then we can start using the jQuery library hosted by Google CDN, Content Distribution Network.

Google's Content Distribution Network (also, AJAX Libraries API) hosts most widely used open source JavaScript libraries which can be used globally across the websites. The main advantage of using google's CDN is they manage all the bug fixes, recent updates and provide a high speed access due to better caching, etc.

Read Using the JQuery Library hosted by Google CDN (Content Distribution Network) in ASP.Net Applications to know more.

Refer the below 2 FAQ’s to know more,

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?

jQuery library can be easily integrated with ASP.Net Ajax applications. Remember the ready event will not fire for an asynchronous postback caused from UpdatePanel control. The ASP.Net AJAX equivalent of ready() function is endRequest event.

<script type="text/JavaScript" language="JavaScript">

    function pageLoad()

    {     

       var manager = Sys.WebForms.PageRequestManager.getInstance();

       manager.add_endRequest(endRequest);

    }

    function endRequest(sender, args)

    {

      //Do all what you want to do in jQuery ready function

    }  

</script>

Thus, we have seen the advantages and usages of jQuery in these articles. The advantages of jQuery library does not stop with the above points, there are lot more which you can understand when you actually start using it. Using jQuery library never pose a security risk or other things. It’s just like another javascript library added to your solution.

Happy Coding!!