This page uses JQuery to change the class name of an element.
Mouse over and out of the paragraph below to change its CSS class
This is a paragraph of text. By default, in the XHTML, the <p> tag has the class attribute set to "class1".
There is a jquery mouseover event handler that changes that class name to "class2" when you mouseover the paragraph.
There is also a jquery mouseout event handler that changes the class name back to "class1" when you mouse out of the paragraph.
Go on, give it a try.
If you recall, in a previous example, we used the "onsubmit" attribute of <form> tag to detect the onsubmit events without JQuery.
This technique using JQuery is better because it does not require any changes to the XHTML code - all the behaviors are coded in Javascript, which means the code responsible for behaviors is clearly separated from the markup code. Plus, the syntax is more standardized than the default Javascript way of doing things in Javascript, which is usually totally inconsistent.