Introducing jQuery
By
jQuery is an open source, cross browser JavaScript library that simplifies event handling, animations and developing Ajax - enabled web pages and promotes rapid application development. This article discusses jQuery - an open source JavaScript library, its features and how easily it can be integrated with Ajax and the ASP.NET MVC Framework to build applications that are rich, interactive and responsive.
So, what is jQuery anyway?
The jQuery official web site states, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." jQuery was released in 2006 by John Resig. Since then, it has been widely popular and acceptable worldwide amongst the web application development community world – wide. Most importantly, numerous plug-ins of jQuery are available. Extensibility of the jQuery library is simple - just attach a plug-in to it and you are done! Microsoft will be integrating jQuery with future releases of Visual Studio.
Why jQuery? Why is it so special?
JavaScript had varying DOM and CSS implementations across different browsers. In addition, the event management interfaces used to differ in JavaScript for different browsers. jQuery on the other hand provides a common browser API that provides cross browser support and provides more robust and readable JavaScript code with simplicity of use. Usage of jQuery also reduces the code drastically. Numerous plug-ins for jQuery are available now. jQuery intellisense, a great feature, is now available as a free download. Microsoft is all set to ship jQuery with future versions of Visual Studio.
Key Features of jQuery
- Support for Browser independence: jQuery is supported by most of the modern day browsers.
- Support for a simplified Event Handling model: jQuery provides support for an excellent, easy to use normalized event handling model with much reduced code. The jQuery Event Handling model is consistent across all browsers. The even object is a cross browser normalized one and one event object is always passed as a parameter to an event handler.
- Support for Seamless extensibility: jQuery provides support for extensibility through an easy to use plug-in API that enables extending the jQuery core library seamlessly.
Pre-requisites
To get started with jQuery you should have the following installed in your system:
- Visual Studio 2008
- Visual Studio 2008 SP1
- jQuery Library
- Visual Studio 2008 jQuery Plug-in
Downloading jQuery
You can download the jQuery library from this link: http://jquery.com/
As of this writing, the current version of jQuery is 1.3.2
Getting started with jQuery
In this section, we will explore how we can get started with jQuery in ASP.NET in a step-by-step manner.
Note: To get a feel of jQuery intellisense in Visual Studio 2008, you should install the HotFix: KB958502 that comes free from Microsoft. You should also download the jQuery Intellisense file and place it side by side along with the jQuery library in your Visual Studio solution, i.e., place it in the same path.
To get started with your first sample application in ASP.NET that uses jQuery, follow these steps:
1. Open Visual Studio and click on File-> New->Project.
2. Select .NET Framework 3.5 as the version and the ASP.NET Web Application template from the list of templates displayed.
3. Specify a name for the project and click OK to save.
4. Create a new folder in the solution explorer and name it as Scripts.
5. Right-click on this folder and select Add Existing Item.
6. Now, browse to the path where you have downloaded the jQuery library and the jQuery intellisense documentation.
7. Select the two files and click on Add to add the files in the Scripts folder.
8. Next, drag and drop the jquery-1.2.6.js file from the Solution Explorer on to the Head section of the Default.aspx file to create a reference as shown below:
9. Now add the following script to your web page:
The Complete Example
Here is the complete code for your reference:
You can also attach events to your controls using jQuery. The following code example illustrates how you can attach a click event to a hyperlink and displays a message as and when you click on the hyperlink in the browser.
References
- Learning jQuery (Packt Publishers)
- jQuery Documentation at http://docs.jquery.com/Main_Page
- jQuery in Action (Manning)
Summary
jQuery is a simple, light-weight and fast JavaScript library that has simplified the way you write your scripts these days. It is all set to become the framework of choice for building fast and responsive web applications in the years to come. For additional information on jQuery and how it can be used with ASP.NET, please refer to my upcoming book on jQuery and ASP.NET with Packt Publishing. You can get updates on the book at my blog here: http://aspadvice.com/blogs/joydip
