Introducing jQuery
page 2 of 4
by Debjani Mallick
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 21625/ 68

Getting Started

Let us start first with the design of the HTML page where we are going to use jQuery functionality.

Listing 1

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // jQuery code goes here
      <--- HTML content should go here --->  

As you can see, we have included the jquery.js file in the first line. Here it has been assumed that the JavaScript file is present in the same folder where the HTML file resides. If it is not in the same folder, we need to pass the path to the JavaScript file in the "src" attribute of the script tag.

Now let us add some content to it – a link using the <a> tag.

Listing 2

<a href="">ASPAlliance Site</a>

It should be remembered that almost everything that we do while using jQuery, reads or manipulates the Document Object Model (DOM). So we need to make sure that we start adding events as soon as the document gets ready. To do that, we need to register an event – the ready event.

Listing 3

$(document).ready(function() {
  // action to be performed when DOM gets ready

The ready event forms the basic of jQuery. The logic used by jQuery is very simple: find things and act on it. $() is a jQuery function that is used to select elements from the document through DOM. It is equivalent to document.getElementById() function in JavaScript with the exception that along with supporting IDs, it also supports CSS and some XPath selectors. For example:

Listing 4

$("#id of an element")

The above statement will wrap the element having the above provided ID for manipulation. Similarly, the statement below will wrap all elements, regardless of type, that possess the class provided below, for manipulation.

Listing 5

$(".class name")

Another difference is that jQuery can return an array of elements, instead of one element. After making the selection or in other words, after finding the required element, we can use functions to perform actions on our selections.

Now, let us add something in between the lines to happen on the click event of the above link.

Listing 6

$(document).ready(function() {
   $("a").click(function() {
     alert("You have clicked on the link!");

On clicking the link to the ASPAlliance site, we would get an alert message and then on clicking ok, we would be redirected to the ASPAlliance site. Now, what we are doing above is the - $("a") selector selects all anchor elements in this case. $() constructs a new jQuery object and the click() function called next is a method of the jQuery object. It binds a click event to all selected elements, which in this case is a single anchor element, and executes the written function when the event occurs.

The same action can be performed by the JavaScript code.

Listing 7

<a href="" 
  onclick="alert('You have clicked on the link!')">ASPAlliance Site</a>

The difference is that it is not required to write an onclick for every single element. Another advantage is that we have a clean separation between the structure (the HTML) and the behavior (JS), just as we separate structure and presentation by using CSS. 

Normally, while developing web pages, we use some initialization code to execute so that we have our page ready before the user starts interacting with the page. For this we rely on window.onload functionality which guarantees the page to be loaded prior to executing the onload code, so that DOM elements exist and are ready for manipulation. But the problem is that it not only waits for the document body to be loaded, but also for all the images to be loaded. But since the images are fetched from the server, if the browser does not cache them, this can extend to a point at which the initialization code runs far beyond the point at which the document has been loaded and the code is safe to execute. jQuery solves the problem by introducing the concept of document ready handler which we have used above. This mechanism makes a function to execute when a document has loaded, but prior to waiting for any images and the onload event handler.

What we have done above is very simple. Let us try doing something that is not obvious – like preventing the link from going to the URL pointed by the href attribute of anchor tag. This can be done by simply modifying the above code a little bit.

Listing 8

  alert("Prevented to go to the link”);

Isn't it cool!

View Entire Article

User Comments

Title: Nice article   
Name: vinay khanna
Date: 2009-09-17 6:31:10 AM
nice article to start working on jquery
Title: useful resources   
Name: sudhir
Date: 2009-02-09 8:07:33 AM
For peoples searching information related to using JQuery with ASP.NET here is link to useful resources.
Title: Mr   
Name: Razvan Puscasu
Date: 2008-10-27 4:44:25 AM
Simple and effective article. Thx for the introduction in the JQuery world.
Title: Nice Article   
Name: Joydip Kanjilal
Date: 2008-10-19 10:51:45 AM
Nice and simple.



Microsoft Most Valuable Professional (ASP.NET) in 2007 and 2008


Entity Framework Tutorial(Packt Publishing)
Pro Sync Framework (APRESS)
ASP.NET Data Presentation Controls Essentials (Packt Publishing)
SAMS Teach Yourself ASP.NET Ajax in 24 Hours (Sams Publishing)

Title: Nice simple article   
Name: Daniel
Date: 2008-09-26 1:46:14 PM
I was looking for some articles on jQuery and I found this article which really proved helpful for me. Thanks for the article.

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2023  |  Page Processed at 2023-09-25 6:36:49 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search