Good reasons to use jQuery

jQuery is most widely used javascript library around the globe. Many of the biggest sites on the planet use jQuery. Everyone is talking about jQuery.

Here are plenty of good reasons to use jQuery instead plain old javascript or any other library.

1. jQuery is cross browser: if you write a piece of code then you are not sure that whether it will run in all browsers are not because every browser has different implementation of javascript. But jQuery makes your life easier by handling all this cumbersome task and provides you a consistent API for all browsers.
2. jQuery supports AJAX: Ajax is a technique to fetch or post data to the server without refreshing the page. jQuery does it in a very simple and clean way.
3. jQuery supports CSS selectors: Before jQuery it was very difficult to search the elements on the page. But jQuery makes this task easier. Now you can select elements on the page using id, class and even using css selectors and then you can perform various actions on the selected elements.
4. jQuery handles Page Load very well: Some time we need to perform a javascript task when page is loaded. We can write this code window’s onload event but it occurs when page is fully loaded. If we use jQuery’s handling of page load then it will run our code as soon as possible without waiting for all the images downloaded fully.
5. jQuery lets you create HTML: Using jQuery you can add HTML code to an element ( simple html content or html elements) easily.
6. jQuery supports animation and effects: You can bring life to your pages very easily by using jQuery. You can provide visual effects ( fade in and fade out etc.) to your HTML elements.

Reset Form using jQuery

While developing web pages we often need to clear the whole form (in case of registration) or part of the form ( in case of search). Thanks to jQuery it makes the job very easy.

I was making search form where search criteria is given in various groups to help the user. All the filters for search using basic info like search by customer last name, date of birth etc in one group and other search criteria are given two other groups.

Client asked to provide the reset button in each group so that if he wants to discard this whole group from search filters then he can do it easily and do this for other two groups as well.

I thought and thought again, if I use simple javascript then I have to access each text box and dropdown separately ( using client ids as I am using asp.net) but then I put this function and it does the job.

 function OnResetCustomerBasicInfo() {
    $(".patientInfo").val("");
    }
Call this function from your html button's onclick and that's it.

window.onload vs JQuery’s $(document).ready()

JQuery is a very rich javascript libaray. Web developers often use jquery to perform various task on the web pages. Some time we need to perform task(s) when the html document is fully loaded in the browser, so we use window.onload function for this purpose but JQuery has an alternative method $(document).ready which is more useful that window.onload.

Here is the difference between these two:

1. If we use window.onload then it executes code once the browser has parsed all the HTML, build the DOM tree and after that browser has downloaded all other resources  like images etc. But what if an image takes a long time to download then the end user have to wait for the effects of our code which is written in window.onload until all the resources have been downloaded.
2. Second drawback is that window.onload is not cross browser compatible, means doesn’t behave equally in all browsers.
3. Third drawback that if some third party library has already intercept the window.onload then we can’t execute our code in window.onload.

While on the other hand JQuery’s document.read() provides the following benefits

1. Code inside the JQuery’s document.ready() is executed as soon as browser has parsed the HTML and constructed the DOM tree with out waiting for the images to download.
2. JQuery’s document.ready is cross browser compatible.
3. We can write code as many times as we need using JQuery’s document.ready function, all the code will be executed in the sequence in which it appears on the page. This feature is especially useful in the scenarios for ASP.NET developers where we have used document.ready in Master Page, in Content Page and in many User Controls all the code will be executed.