jQuery - Introduction

In this article will explains what is jQuery? and explains basic about jQuery.what is advantage of using JQuery? and why to use it in web application.

What is JQuery?

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

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 load

<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 lines within

<script language="javascript" type="text/javascript">
$(document).ready(function () {


JQUERY CODE GOES HERE


});
</script>