Demo for Word Highlighting with jQuery

See this blog post for details: Word highlighting with jQuery

This page contains formatted text from the Wikipedia entry on jQuery, wrapped in a div with id="body". Click the link below to add highlighting, which is done using:
$("#body *").highlight("jquery", "highlightWord");
Click again to remove highlighting, which is done using:
$(".highlightWord").replaceWith(function() { return $(this).contents(); });

Highlight all occurrences of "jQuery" below

[edit] Features

jQuery contains the following features:

[edit] Including the library

The jQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers (such as Google [10] or Microsoft CDN).

<script type="text/javascript" src="jquery.js"></script>

The most popular and basic way to introduce a jQuery function is to use the .ready() function.

$(document).ready(function() {
// jquery goes here
});

or the shortcut

$(function() {
// jquery goes here
});

[edit] Usage styles

jQuery has two usage styles:

Typically, access to and manipulation of multiple DOM nodes begins with the $ function being called with a CSS selector string, which results in a jQuery object referencing matching elements in the HTML page. This node set can be manipulated by calling instance methods on the jQuery object, or on the nodes themselves. For example:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

This line finds the union of all div tags with class attribute test and all p tags with CSS class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.

The methods prefixed with $. are convenience methods or affect global properties and behaviour. For example, the following is an example of the map function called each in jQuery:

$.each([1,2,3], function(){
  document.write(this + 1);
});

This writes the number 234 to the document.

It is possible to perform browser-independent Ajax queries using $.ajax and associated methods to load and manipulate remote data.

$.ajax({
  type: "POST",
  url: "example.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

This example posts the data name=John and location=Boston to example.php on the server. When this request finishes successfully, the success function is called to alert the user.

[edit] jQuery plug-ins

Because of jQuery's architecture, other developers can use its constructs to create plug-in code to extend its functionality. Currently there are thousands of jQuery plug-ins available on the web[11] that cover a wide range of functionality such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, even a jQuery-based Commodore 64 emulator.[12]

An important source of jQuery plug-ins is the Plugins sub-domain of the jQuery Project website.[11] There are alternative plug-in search engines[13] that take more specialist approaches, such as only listing plug-ins that meet certain criteria (e.g. those that have a public code repository). The tutorials page on the jQuery site has a list of links to jQuery plug-in tutorials under the "Plugin development" section.[14]