Introduction to JQuery Learn JQuery from scratch in ASP.NET 4.0

Looking to learn Jquery from scratch? Then you are in luck, in todays tutorial we will introduce the Jquery Library and its simplicity.

jQuery is a cross-browser JavaScript library which simplifies the javascript interaction with HTML, provides animations and plenty of other effects with minimal amount of code and is very efficient in building AJAX applications. You will need a basic knowledge of javascript to learn jquery.

Open Visual Studio 2010, create a new ASP.NET Web Site project by going to File -> New -> Web Site and selecting ASP.NET Web Site from the templates available. Let’s name it to JquerywithASP.NET. To use jquery first of all we have to download the latest jquery plugin from http://jquery.com/ and put it in our website root folder. If the page should perform some action using jQuery as soon as the document is ready or loaded, use the below snippet of code. Document.Ready() function makes sure that code is executed only when a page is fully loaded

To refer an element in jQuery, we use the dollar sign, $, and we put any element name inside parentheses.
Sample Selectors
$(“#container”) returns an array containing element which has id = container
$(“div#container”) returns all div elements which has id = container
$(“span”) returns an array containing all span elements.
$(“p.more”) returns all p elements whose class name is more;
$(“.banner”) returns an array containing elements which has class name = banner
$(“input[name='address']“) returns an array containing input elements which has name = ‘address’

Let us start with a simple example to show an alert message on button click.
Open the Default.aspx and drag the jquery file jquery-1.4.2.js to the page to add a reference to the jquery file.

And drag an ASP.NET button inside the

tag. Change the Button ID to btnalert.
When you load the page in browser and click the Button you will see the message box.
See how easy that was? Jquery does not have to be scary or intimidating,

We will be providing a set of Tutorials on Jquery.

If at any point you were stuck please refer to the source code that is available for download. We suggest you download it to follow along.

Our Next Tutorial will focus on JSON and how it interacts with AJAX, and we will be building a Blind Drop down List using JQuery.

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.