Demo for Word Highlighting with jQuery

[edit] Features

jQuery contains the following features:

• DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of the jQuery project^[9]
• DOM traversal and modification (including support for CSS 1-3)
• Events
• CSS manipulation
• Effects and animations
• Ajax
• Extensibility through plug-ins
• Utilities - such as browser version and the each function.
• Cross-browser support

[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:

• via the $ function, which is a factory method for the jQuery object. These functions, often called commands, are chainable; they each return a jQuery object
• via $.-prefixed functions. These are utility functions which do not work on the jQuery object per se.

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]