jQuery, it is a lightweight Java Script library that accents interaction between JavaScript and HTML. It basically separates the behavior characteristics from HTML structure.
We will take a small example below to see how jQuery separates behavioral characteristics from HTML structure.
In conventional programming for assigning click event for button we use the following code.
|
<input id="Button1" type="button" value="button" onclick="Test1()" />
<script language="javascript" type="text/javascript">
function Test1()
{
alert("Hi, Button1 clicked me ");
}
</script>
|
In above code, on click of button1 Test1 function will be called.
But with the help of jQuery we can assign the click function for Button1 in runtime as shown below.
|
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#Button1").click(function() {
JQueryClick();
});
}
);
function JQueryClick()
{
alert("JQuery Clicked me")
}
</script>
|
Instead of directly specifying the on-click event handler in the specification of a button element, jQuery driven page has first identified button element, and then modified its on-click event handler. This concept is also called as Unobtrusive JavaScript.
Few keywords:
'$' is used as an 'alias' for the 'jQuery' namespace.
#id
This keyword matches a single element present in the document with the given id attribute. If the id contains characters like periods or colons, we need to escape those using backslashes.
jQuery exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included in any web page by as shown below.
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
The latest stable versions of jQuery can also be downloaded from http://docs.jquery.com/Downloading_jQuery
Jquery contains the main following features
- Events
- Effects and animations
- CSS manipulation
- Ajax
- DOM traversal and modification
- Extensibility
- Utilities - such as browser version and the each function
We will discuss these features one by one in details in next articles.
References:
http://jquery.com/
http://docs.jquery.com/Main_Page