• What is jQuery?
• How jQuery Works?
• Get jQuery
• Include jQuery in ASP.NET project
• Include jQuery in a Web Page
• Code Walkthrough
• Example
• Conclusion

With reference to jQuery website jQuery is
The features of jQuery include:

• Lightweight Footprint (About 19kb in size – Production version)
• CSS3 Compliant (Supports CSS 1-3 Selectors)
• Cross-browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)

The Problem: Sometimes we want some kind of client side logic to be executed on load of the page, so we try to make use of window.onload() event to kick start the client side script but unfortunately we have to wait till everything on the page gets loaded which includes larger image files also.

The Solution: jQuery has a little handy function $(document).ready(fn) which has a capability to launch your JavaScript logic as soon as the Document Object Model (DOM) is ready and DOM loading happens before the page has finished loading, which gives us flexibility to execute a client side logic even before a page is loaded.

You can download jQuery from jQuery site from the home page. You can get 2 versions of jQuery: Production Version which is just 19kb in size, good in case if you want to just deploy it on production and Development Version which is useful in case if we plan to see the internals or plan to debug the library. The current version is 1.3.2. To see latest version and more updates on jQuery you can visit jQuery site.

Step 1: Go to http://jquery.com

Step 2: On home page look for the below section:



Step 3: Download the version which is most suitable for your requirement. That’s all. Now let’s see how we can use it.

Now since we have downloaded the jQuery library it’s time to add it to our ASP.NET project. So let’s start:

Step 1: Open Visual Studio 2005/2008 (I will demonstrate using VS 2008)

Step 2: Create a new Web Site.



Step 3: Give some name to the website.



Step 4: Below is the folder structure.



Step 5: To add the jQuery script file either you can directly add to the root or create a folder called as ‘Scripts’ and save it to separate our script files. We will do using later approach. Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.3.2.min.js) > Select the file and click Add. The structure will look similar to the following:



You can either change the name of the file to jquery.js or leave it the way it is.

That’s all. Now it's time to include jQuery in ASP.NET page.

Step 1: Create a New Page, I created ‘Demo.aspx’.

Step 2: Now drag and drop the jquery-1.3.2.min.js file from the Solution Explorer on to your page to create a reference as shown below:



Alright cool! We are ready to write jQuery code now. So let’s write some simple script.

We will create a small <div> control and <a> tag. On click of anchor tag we will call a .slideDown(s, c) function to demonstrate the slide down effect.

Step 1: Create <a> and <div>



Step 2: We will write jQuery code on click of <a>.

• ‘$’ sign is a shorthand notation to call jQuery .ready function. Instead of $(document).ready(fn) we directly call $(fn).
• When we click on <a> tag the click function gets called which in turn calls the slideDown function to slide down div of id showMe. ‘slow’ is the parameter passed to tell slide it down slowly. Initially the div control is hidden and on click of anchor tag we display the div.

Step 3: Run the demo here and see.

Download

Well that’s all we need to start using jQuery. This article is just a brief introduction to jQuery and how we can use it in our ASP.NET projects and no way demonstrates the capabilities of jQuery. Let’s learn more about jQuery in future articles.