jQuery is a great toolkit to manipulate DOM and provide special effects. Use of jQuery in a site can greatly reduce development time. It takes only a few minutes to get started with jQuery.
In a previous article, I had covered downloading and installing jQuery. In this article, we will cover the API.
Importing the JavaScript Library
You need to import only one JavaScript file. Depending on the version of jQuery and installation location, it can be something like this.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
You can also get the script from Google.
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
When to Manipulate DOM?
You can start DOM manipulation as soon as the DOM has been constructed. This happens at an earlier stage than the onload event of the window. However, handling the DOM readiness event in a browser neutral way can be tricky. FF fires the “DOMContentLoaded” event and IE the “onreadystatechange” event for the document object. jQuery makes it easy to attach an event handler for the DOM readiness event.
$(function(){
$(“#p1”).text(“Hello World”);
});
</script>
<body>
<p id=”p1″></p>
</body>
The $() function is used in two separate contexts in the snippet above. What does that do? Well, the $() function is the core of jQuery. We will discuss it in more details later.
A slightly more verbose way to attach a DOM ready handler is as follows.
$(“#p1”).text(“Hello World”);
});
jQuery Core Function
At the very heart of the jQuery toolkit, there is the core function. It can be called using either jQuery() or $(). It is a highly overloaded function. Meaning, the function does completely different things depending on the arguments supplied.
For example, the following two code snippets will return the jQuery object for a DOM element with ID #p1.
$(“#p1”); //Shortcut name
You will use the shortcut name for the core function in most cases.
We have seen another use of the core function. When the argument parameter is a function, the function is registered as a DOM ready event handler.
$(“#p1”).text(“Hello World”);
});
There are many more uses of the core function as we will see shortly.
jQuery Selectors
One of the main uses of the core function is to return one or more jQuery objects corresponding to DOM elements that match certain selection criteria. You can then invoke methods of these jQuery objects to achieve some effect. The concept of selector was borrowed from CSS. jQuery then extended it quite a bit in most clever ways.
We have already seen the ID selector. This returns only one jQuery object. The ID is specified after #.
$("#p1")
You can select all elements with a given tag name. For example:
<body>
<p id=”p1″></p>
<p id=”p2″></p>
</body>
This will set the inner text of all <p> tags to “Hello World”.
You can further qualify an element by matching an attribute value. For example:
<p important=”true”></p>
<p id=”p2″></p>
This will set the inner text of only the first paragraph to “This is an important paragraph.”.
The class selector returns the jQuery objects that have a certain CSS class. The class name is supplied after a “.”. Example:
$(“.c1”).text(“You have class c1″);
});
<p class=”c1″>Hello World</p>
<p class=”c2”>Hello Moon</p>
This will change the text of the first paragraph only.
The odd and even selectors are great for styling different rows in a table differently. For example:
$(“tr:even”).css(“background-color”, “grey”);
$(“tr:odd”).css(“background-color”, “yellow”);
});
<table border=”1″>
<tr>
<td>John Doe</td>
<td>19</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>21</td>
</tr>
<tr>
<td>Mary Doe</td>
<td>22</td>
</tr>
</table>
This will produce a look as follows.
You can get the jQuery object for a DOM element using the DOM element object itself. For example $(document) will return the jQuery object for the document DOM object. Similarly, both expressions below will return the jQuery object for the element with ID p1.
$(document.getElementById(“p1”))
For a complete list of selectors, see the documentation page.
Event Handler Registration
jQuery makes it easy to register an event handler in a browser neutral way. Events are registered by calling the appropriate method of the jQuery object. For example:
function() {
alert($(this).text());
}
);
<p>
Hello world!
</p>
<p>
Hello moon!
</p>
This will attach a onclick event handler for all paragraph elements in the page. In this example, the handler function displays the text of the clicked paragraph. Note the use of the $(this) expression. The this keyword returns the DOM object for which the event handler is called (the clicked paragraph). Hence, $(this) returns the jQuery object for that DOM element.
The hover() function takes two parameters. The first function is registered with the mouse enter event and the second with the mouse leave event. Example:
function() {
$(this).css(“background-color”, “yellow”);
},
function() {
$(this).css(“background-color”, “white”);
}
);
<table border=”1″>
<tr>
<td>John Doe</td>
<td>19</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>21</td>
</tr>
<tr>
<td>Mary Doe</td>
<td>22</td>
</tr>
</table>
For a complete list of event registration methods, see the documentation.
Summary
This article covers the very basics and the underlying principles of jQuery. This should give you a good foundation as you move on to more advanced features of jQuery.
