Introduction to jQuery

jQuery is a javascript framework, first released by John Resig in 2006. Today it is the most popular JavaScript framework in the world. jQuery appeals to a wide variety of JavaScript developers, from those just starting out, to seasoned experts. This is in no small part due to the elegance and simplicity of jQuery, with just a few lines of clear and concise code you can create anything from complex animations to advanced ajax functionality.

In this tutorial I will start from the beginning and give you a brief introduction to some of jQuery’s core concepts such as element selection, manipulation and events.

The first thing you’ll need to do is download the jQuery core library from jquery.com and add a reference to it in your html page.

Now we can start writing some code. As the majority of stuff you’re most likely to do with jQuery will involve the DOM in some way, we’ll need to start with the jQuery ready event. This is an event that gets triggered when the page has loaded and the DOM is ready to be accessed.

$(document).ready(function() {

});

From within this function we can select and manipulate DOM elements. If, for example, you wanted to select an element by it’s ID, or select a group of elements by their class name, you can do this by using CSS selectors. This is done like this:

$("#nav")
//this would select an element with the ID of nav
$(".title")
//this would select all elements with the class name title
$("p")
//this would select all paragraphs

Once you have selected an element, or a group of elements, you have a vast array of options when it comes to dealing with that selection. You could:

$("#nav").css({'width':'500px','height':'200px'});
//alter it's css properties
var cont = $("#nav").html();
//assign its contents to a variable
$("#nav").html("insert this text");
//assign content to it
$("#nav").hide();
//perform an animation on it

And much more, you can also apply events to the elements you have selected. Here are some examples:

$(".title").click(function() {
//this triggers on a mouse click
});

$("input").focus(function() {
//this triggers when an input field gets focus
});

$("input").blur(function() {
//this triggers when an input field loses focus
});

$("#nav").mouseenter(function() {
//this triggers when the mouse moves over the element
});

$("#nav").mouseleave(function() {
//this triggers when the mouse moves over the element
});

Now we can put this all togther and create a basic function that gets triggered when an element with the ID of ‘nav’ gets clicked on, which then causes the text colour of all the paragraphs on the page to be set to red and their content to be set to the text ‘This is a paragraph’:

$(document).ready(function() {
	$("#nav").click(function() {
	$("p").css({'color':'#ff0000'});
	$("p").html("This is a paragraph");
});
});

This has been a basic introduction to jQuery, showing you some of the core concepts and functionality. The amount you can do with jQuery is vast and to get a better idea of this, I suggest you have a read through the documentation on the jQuery site. It’s very thorough and informative with lots of great examples and demonstrations. Other useful jQuery sites include jQuery for Designers and jQuery Howto.