JQuery Training – Part 1:

 

              This article series assumes that you’ve some/little knowledge about web programming model and JavaScript. This series targets on (or I can even say is intended for) ASP.net users, however I’ll try to give general JQuery article such that other technology web developers may also get benefit out of it. Bare with me if I give any thing most specific to ASP.net.

 

JQuery Introduction:

                 JQuery is a free, open source JavaScript library which reduces your coding effort on creating spectacular, contemporary, highly responsive websites that work across all the modern browsers.

JQuery focuses on common Scripting tasks like,

a. Retrieving and manipulating the page content.

b. Page effects.

c. Working with browser event model.

Why JQuery?

1. Statement chaining or method chaining that reduces coding effort.
2. Avoids browser oddities
3. Is extensible.
4. The selectors are like CSS selectors and much more,

JQuery versions,

1) Production ( Minified/Compressed version) ( ex, jquery-1.6.4.min.js)

Which is a compressed and minified down version. This is used at the time of deployment.

2) Development ( ex jquery-1.6.4.js)

Which is useful for debugging.

3) VS Documentation (ex jquery-1.6.4-vsdoc.js)

For Visual Studio users, to support intellisense

Typically you download all of the above and use them appropriately. Note that this is different from version numbering. At the time of writing this article 1.6.4 is the latest version.

To download JQuery : www.jquery.com

$ - JQuery object

The Symbol “$” is used to indicate the JQuery object itself. All the JQuery functions can be called through this object.

Let’s begin..

Here is the simple example, that shows how to show an alert message when the page loads, from JavaScript and from JQuery.

JavaScript:

function initialize() {

alert("Hi There!");

}

window.onload = initialize;

JQuery :

$("document").ready(function() {

alert("Hi There!");

});

Now lets begin to bring out the above simple program, for better understanding I’ve broken down the same program as below,

$("document").ready(

function() {

alert("Hi There!");

}

);

document.ready event in JQuery is similar but more powerful than window.onload DOM event. The document object (page – it must be familiar to the JavaScript users. If it’s unfamiliar to you, then you can search on the internet about DOM – Document Object Model) is accessed through JQuery object $ as $("document"). An anonymous function is called on the ready event of the document, which fires when the page is ready as the name implies. Finally, the anonymous function contains our alert message.

Will continue with few more examples in our next article…

Hope this helps you in getting started with JQuery…