What is jQuery and explain basics about JQuery

This article will explains JQuery and also familiarize about JQuery like what is advantage of using JQuery and why to use it in web application.

What is JQuery?

It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

What you can do with JQuery?

In summary JQuery is smart javascript library which allows you to do complex javascript code in a minute.  It has also capability of performing AJAX Operations.  Here are Few examples of Jquery usage in real life application

Example 1: You can use JQuery to show tooltip on textbox focus.

Example 2: You can perform Photo Corp using JQuery

Example 3: You can fill cascading dropdown using Ajax JQuery
In Below example, When you select country, it will fill state/region drop-down and when you select state/region, it will cities based on values in database using JQuery Ajax web service call.

Example 4: JQuery Homepage slider, which is very common now a days on many websites homepage.

Example 5: Autocomplete JQuery Textbox.

And the example list goes on and on.

• You can do various effects with JQuery
• You can have all controls like Asp.net Ajax Control toolkit with JQuery UI
• You can use various third party plugins to do various stuff and much more...

What is use of JQuery?

As shown above with use of JQuery in web application you can improve user experience. 

Advantages of using JQuery in web application?

1. It Improve the performance of the web application

2. It is light weight

3. Its language independent - It can be use with many different language, eg: Asp.Net, PHP, HTML, JSP,etc

4. It is browser compatible - Runs in most browser.

5. It is easy to learn - it uses javascript syntax.

6. You can do complex UI functionality with few lines of code.

7. You can implement ajax within your web application.  It can be used to avoid round trip (avoid page post back) yet able to perform database operation.

8. It is open source library, which is also officially integrated in visual studio 2010.

9. You will find lot of JQuery functionality shared other developers, which helps you to avoid in reinventing the wheel.

And much more...

Where to download JQuery?

http://docs.jquery.com/Downloading_jQuery

If you want you can avoid downloading JQuery file and simply use from CDN (Content distribution network)  link for google CDN

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Tips:  While adding JQuery try using min version (Example: jquery-1.6.2.min.js), which is less file size, since space and line break are removed from that.  This will help in faster loading of file and also improves performance of web application.

How to use JQuery in Asp.net Web Application? 

Creating your first Hello World application in JQuery

Step 1: Open Visual Studio

Step 2: Create a new web application project (Web site...)

Step 3: Open master page of your web application.

Put this line of code, above </head>

<script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Above line adds JQuery library reference to your web application, in simple terms with above line you web application understands JQuery syntax and work accordingly.

Step 4: Put following line of code in you content page inside <asp:Content>.  Below line will display "Hello World" alert when page loads.

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

        $(document).ready(function () {

            alert("Hello World");             

        });

    </script>

Understanding  $(document).ready(function ()

If you want an JQuery event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

$(document) - means page on which JQuery code lies.

.ready() - means page is loaded and your JQuery code is ready to be executed.

And for that reason you may find that most of JQuery code lies within

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

        $(document).ready(function () {

         JQUERY CODE GOES HERE

});

</script>

So finally you will be able to display alert on page load in your asp.net web application with JQuery.

May be this question might comes to your mind, I can show "Hello World" alert without using JQuery then what is fun of using JQuery?

Well its too early to judge, since this article is for beginners i have explained with simple example there is lot more coming.  Please refer to my other upcoming JQuery tutorials.

Watch Live demo of JQuery Hello World Application

Back to JQuery Tutorial Index