For instance, it is very easy to add or remove a CSS class from an individual or group of elements. This is done using the addClass() and removeClass() methods. To add a CSS class of Instructions to an element with the ID of text, you would use the addClass() method as follows – $("#text").addClass("Instructions");
jQuery methods can be chained, so you could also remove a CSS class and add a different one with a single line of code. To do the same as above, but also removing a class of Unread , the syntax would be –
There are many other useful built in methods available, for example the html() method can dynamically alter the HTML contents of matching elements.
The above would set the HTML string "<em>Example text</em>" as the contents of all DIV elements with the class of Instructions. To add to existing content of matching elements, the .append() method can be used.
There is a related framework called jQuery Mobile which facilitates the construction of mobile websites, with a strong emphasis on compatibility with all modern mobile devices. jQuery can also be extended by a large number of third party plugins which provide all kinds of additional client side functionality to a website (including some quite impressive visual effects).
Below are some examples to try to give a small flavour of the sheer variety of plugins available.
Roundabout (http://fredhq.com/projects/roundabout/) is a plugin that makes it easy to create an ‘interactive turntable’ effect from HTML elements such as ordered and unordered lists.
jRumble ( http://jackrugile.com/jrumble/ ) allows you to wobble HTML elements as required.
Visualize ( http://www.jqueryplugins.com/plugin/236/ ) provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
Tablesorter ( http://tablesorter.com/docs/ ) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
BlogSlideShow (http://www.jqueryplugins.com/plugin/315/) is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.