Wednesday, March 17, 2010

Advantages of jQuery


Advantages of jQuery
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.

1.    It’s lightweight, easy and fast
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.

2.    Write less but do more
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”.

3.    Cross Browser Compatibility
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.

4.    Separate javascript code from HTML mark-up
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!');
    });
});

5.    Easy and Light-weight Ajax Application
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,

6.    Availability of various plug-in’s
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.

7.    You can extend it
It is also possible to extend existing functionality provided by jQuery library.
Refer the below post which talks about jQuery Custom Selectors.

8.    We can use CDN (Content Distribution Network) for internet site
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.

9.    Microsoft and Intellisense support in Visual Studio 2008
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?

10.                       Easy Integration with ASP.Net Ajax projects
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>


8 comments:

  1. Heya! I realize this is kind of off-topic but I had to ask.

    Does operating a well-established blog like yours take a massive amount work?

    I'm brand new to writing a blog but I do write in my journal every day. I'd like to start
    a blog so I can share my experience and thoughts online.
    Please let me know if you have any suggestions or tips for brand
    new aspiring blog owners. Appreciate it!

    Take a look at my web blog; Buy Garcinia Cambogia

    ReplyDelete
  2. Thanks for a marvelous posting! I actually enjoyed reading it, you will be a great author.
    I will be sure to bookmark your blog and will eventually come back later in life.
    I want to encourage one to continue your great writing, have
    a nice afternoon!

    my blog post - Ultra Celeb Diet

    ReplyDelete
  3. Do you have a spam problem on this site; I also am
    a blogger, and I was curious about your situation;
    many of us have developed some nice procedures and we
    are looking to trade solutions with other folks, please shoot me an e-mail if interested.


    Also visit my website Order Pure Garcinia Cambogia

    ReplyDelete
  4. I do believe all of the ideas you've introduced in your post. They are very convincing and can certainly work. Nonetheless, the posts are too quick for starters. Could you please extend them a little from subsequent time? Thanks for the post.

    Also visit my site ... Buy Le Parfait

    ReplyDelete
  5. I just like the valuable information you provide in your articles.
    I'll bookmark your weblog and check again right here regularly. I'm relatively sure I will be informed a lot of new stuff right here!
    Best of luck for the following!

    Review my web blog; Xtrasize Review

    ReplyDelete
  6. I don't even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you're going to a famous blogger if you aren't already ;) Cheers!

    My webpage Pure Garcinia Cambogia

    ReplyDelete
  7. I do not know if it's just me or if perhaps everyone else encountering issues with your blog. It appears like some of the text in your posts are running off the screen. Can someone else please comment and let me know if this is happening to them too? This might be a problem with my internet browser because I've had this happen
    previously. Thanks

    Here is my page ... Apple stem cell serum review

    ReplyDelete