jQuery Notes (getting started with jQuery, examples of selectors)

1. document ready event handler (get a feeling about jQuery)

$(document).ready(function(){ $("a").click(function(){ alert("hello world!"); }); });

Inside the document ready event handler, we define a function to pop up an alert whenever a link is clicked.

$("a") is a jQuery selector, which selects all "a" elements. $ is an alias for jQuery class, so $() constructs a new object.

JavaScript code <a href="" οnclick="alert('Hello world')">Link</a> can also do the same thing, but we can see js is more neat, we don't have to specify onclick handler for each hyperlink.

 

2. selector example and hover effect

$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); }); });

 

orderedlisg: id of an ordered list element inside webpage

li:last selects the last listed item

define two functions for hover handler, one is executed when item is hovered, the other executed when item unhovered

 

Note that in jQuery, we have equivalent things as we have onXXX in JavaScript.

 

Selector reference: http://docs.jquery.com/DOM/Traversing/Selectors

 

3. more things you can do

$(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).append( " BAM! " + i ); }); });

$("#orderedlist").find("li") is mostly the same as $("#orderedlist li")

$(this).append() is used to append text to the inner html of the selected element.

 

4. reset forms after submitted via ajax

$(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); }); }); });

Note that reset() function belongs to form element instead of jquery object, so we cannot simply call $("form").reset() to reset all forms. This represents the actually html element.

 

For all document elements you want to locate, you can find a way to writing your selector, so feel free to use your imagination.

 

The last example is really amazing, you can write a document ready hanlder as follows

$(function() { // code to execute when the DOM is ready });

 

Lasted modified on 17 Mar, 2011