1. document ready event handler (get a feeling about jQuery)
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 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
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
$("#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
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
Lasted modified on 17 Mar, 2011