Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 1b85b71382
Fetching contributors…

Cannot retrieve contributors at this time

12386 lines (12056 sloc) 429.78 kB
<?xml version="1.0"?>
<!-- This file is generated from api-1.3.xml using XSLT and dictionary.xsl -->
<d:dictionary xmlns="http://www.w3.org/1999/xhtml" xmlns:d="http://www.apple.com/DTDs/DictionaryService-1.0.rng">
<d:entry id="id4607705" d:title="Traversing/add(expr)">
<d:index d:value="add" d:title="Traversing/add(expr)"/>
<p class="title">Traversing/add(expr)</p>
<p>
Adds more elements, matched by the given expression, to the set of matched elements.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>expr (<span class="arg-type" title="">String, DOMElement, Array&lt;DOMElement&gt;</span>)</span>
-
An expression whose matched elements are added for String, a string of HTML to create on the fly for DOMElement or one or more Elements to add if an Array. A jQuery object is also accepted.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.
</p>
<pre>
<code class="javascript">$("div").css("border", "2px solid red")
.add("p")
.css("background", "yellow");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;p&gt;Added this... (notice no border)&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Adds more elements, matched by the given expression, to the set of matched elements.
</p>
<pre>
<code class="javascript">$("p").add("span").css("background", "yellow");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello&lt;/p&gt;&lt;span&gt;Hello Again&lt;/span&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Adds more elements, created on the fly, to the set of matched elements.
</p>
<pre>
<code class="javascript">$("p").clone().add("&amp;lt;span&gt;Again&amp;lt;/span&gt;").appendTo(document.body);
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Adds one or more Elements to the set of matched elements.
</p>
<pre>
<code class="javascript">$("p").add(document.getElementById("a")).css("background", "yellow");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello&lt;/p&gt;&lt;span id="a"&gt;Hello Again&lt;/span&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Demonstrates how to add (or push) elements to an existing collection
</p>
<pre>
<code class="javascript">var collection = $("p");
// capture the new collection
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello&lt;/p&gt;&lt;span id="a"&gt;Hello Again&lt;/span&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4606200" d:title="Attributes/addClass(class)">
<d:index d:value="addClass" d:title="Attributes/addClass(class)"/>
<p class="title">Attributes/addClass(class)</p>
<p>
Adds the specified class(es) to each of the set of matched elements.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>class (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
One or more classes to add to the elements, these are separated by spaces.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Adds the class 'selected' to the matched elements.
</p>
<pre>
<code class="javascript">$("p:last").addClass("selected");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello&lt;/p&gt;
&lt;p&gt;and&lt;/p&gt;
&lt;p&gt;Goodbye&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Adds the classes 'selected' and 'highlight' to the matched elements.
</p>
<pre>
<code class="javascript">$("p:last").addClass("selected highlight");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello&lt;/p&gt;
&lt;p&gt;and&lt;/p&gt;
&lt;p&gt;Goodbye&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4609537" d:title="Manipulation/after(content)">
<d:index d:value="after" d:title="Manipulation/after(content)"/>
<p class="title">Manipulation/after(content)</p>
<p>
Insert content after each of the matched elements.
</p>
<p>
&lt;p&gt;The elements must already be inserted into the document (you can't insert an element after another if it's not in the page).&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>content (<span class="arg-type" title="">String, Element, jQuery</span>)</span>
-
Content to insert after each target.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Inserts some HTML after all paragraphs.
</p>
<pre>
<code class="javascript">$("p").after("&lt;b&gt;Hello&lt;/b&gt;");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;I would like to say: &lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Inserts a DOM element after all paragraphs.
</p>
<pre>
<code class="javascript">$("p").after( document.createTextNode("Hello") );
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;I would like to say: &lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
</p>
<pre>
<code class="javascript">$("p").after( $("b") );
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;b&gt;Hello&lt;/b&gt;
&lt;p&gt;I would like to say: &lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4670772" d:title="Ajax/ajaxComplete(callback)">
<d:index d:value="ajaxComplete" d:title="Ajax/ajaxComplete(callback)"/>
<p class="title">Ajax/ajaxComplete(callback)</p>
<p>
Attach a function to be executed whenever an AJAX request completes. This is an
&lt;a href='Ajax_Events'&gt;Ajax Event&lt;/a&gt; .
</p>
<p>
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to execute.
&lt;pre&gt;function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Show a message when an AJAX request completes.
</p>
<pre>
<code class="javascript">$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("&lt;li&gt;Request Complete.&lt;/li&gt;");
});
</code>
</pre>
</d:entry>
<d:entry id="id4670838" d:title="Ajax/ajaxError(callback)">
<d:index d:value="ajaxError" d:title="Ajax/ajaxError(callback)"/>
<p class="title">Ajax/ajaxError(callback)</p>
<p>
Attach a function to be executed whenever an AJAX request fails. This is an
&lt;a href='Ajax_Events'&gt;Ajax Event&lt;/a&gt; .
</p>
<p>
The XMLHttpRequest and settings used for that request are passed as arguments to the callback. A third argument, an exception object, is passed if an exception occured while processing the request.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to execute.
&lt;pre&gt;function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError only passed if an error was caught
this; // dom element listening
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Show a message when an AJAX request fails.
</p>
<pre>
<code class="javascript">$("#msg").ajaxError(function(event, request, settings){
$(this).append("&lt;li&gt;Error requesting page " + settings.url + "&lt;/li&gt;");
});
</code>
</pre>
</d:entry>
<d:entry id="id4670907" d:title="Ajax/ajaxSend(callback)">
<d:index d:value="ajaxSend" d:title="Ajax/ajaxSend(callback)"/>
<p class="title">Ajax/ajaxSend(callback)</p>
<p>
Attach a function to be executed before an AJAX request is sent. This is an
&lt;a href='Ajax_Events'&gt;Ajax Event&lt;/a&gt; .
</p>
<p>
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to execute.
&lt;pre&gt;function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Show a message before an AJAX request is sent.
</p>
<pre>
<code class="javascript">$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("&lt;li&gt;Starting request at " + settings.url + "&lt;/li&gt;");
});
</code>
</pre>
</d:entry>
<d:entry id="id4670972" d:title="Ajax/ajaxStart(callback)">
<d:index d:value="ajaxStart" d:title="Ajax/ajaxStart(callback)"/>
<p class="title">Ajax/ajaxStart(callback)</p>
<p>
Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an
&lt;a href='Ajax_Events'&gt;Ajax Event&lt;/a&gt; .
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to execute.
&lt;pre&gt;function () {
this; // dom element listening
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Show a loading message whenever an AJAX request starts (and none is already active).
</p>
<pre>
<code class="javascript">$("#loading").ajaxStart(function(){
$(this).show();
});
</code>
</pre>
</d:entry>
<d:entry id="id4671032" d:title="Ajax/ajaxStop(callback)">
<d:index d:value="ajaxStop" d:title="Ajax/ajaxStop(callback)"/>
<p class="title">Ajax/ajaxStop(callback)</p>
<p>
Attach a function to be executed whenever all AJAX requests have ended. This is an
&lt;a href='Ajax_Events'&gt;Ajax Event&lt;/a&gt; .
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to execute.
&lt;pre&gt;function () {
this; // dom element listening
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Hide a loading message after all the AJAX requests have stopped.
</p>
<pre>
<code class="javascript">$("#loading").ajaxStop(function(){
$(this).hide();
});
</code>
</pre>
</d:entry>
<d:entry id="id4671093" d:title="Ajax/ajaxSuccess(callback)">
<d:index d:value="ajaxSuccess" d:title="Ajax/ajaxSuccess(callback)"/>
<p class="title">Ajax/ajaxSuccess(callback)</p>
<p>
Attach a function to be executed whenever an AJAX request completes successfully. This is an
&lt;a href='Ajax_Events'&gt;Ajax Event&lt;/a&gt; .
</p>
<p>
The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to execute.
&lt;pre&gt;function (event, XMLHttpRequest, ajaxOptions) {
this; // dom element listening
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Show a message when an AJAX request completes successfully.
</p>
<pre>
<code class="javascript">$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("&lt;li&gt;Successful Request!&lt;/li&gt;");
});
</code>
</pre>
</d:entry>
<d:entry id="id4602982" d:title="Selectors/all()">
<d:index d:value="all" d:title="Selectors/all()"/>
<p class="title">Selectors/all()</p>
<p>
Matches all elements.
</p>
<p>
Most useful when combined with a context to search in.
</p>
<h2>Example:</h2>
<p>
Finds every element (including head, body, etc).
</p>
<pre>
<code class="javascript">$("*").css("border","3px solid red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;DIV&lt;/div&gt;
&lt;span&gt;SPAN&lt;/span&gt;
&lt;p&gt;P &lt;button&gt;Button&lt;/button&gt;&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
A common way to find all elements is to set the 'context' to document.body so elements like head, script, etc are left out.
</p>
<pre>
<code class="javascript">$("*", document.body).css("border","3px solid red");
</code>
</pre>
</d:entry>
<d:entry id="id4608787" d:title="Traversing/andSelf()">
<d:index d:value="andSelf" d:title="Traversing/andSelf()"/>
<p class="title">Traversing/andSelf()</p>
<p>
Add the previous selection to the current selection.
</p>
<p>
Useful for traversing elements, and then adding something that was matched before the last traversal.
</p>
<h2>Example:</h2>
<p>
Find all divs, and all the paragraphs inside of them, and give them both classnames. Notice the div doesn't have the yellow background color since it didn't use andSelf().
</p>
<pre>
<code class="javascript">$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;
&lt;p&gt;First Paragraph&lt;/p&gt;
&lt;p&gt;Second Paragraph&lt;/p&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4669045" d:title="Effects/animate(params, options)">
<d:index d:value="animate" d:title="Effects/animate(params, options)"/>
<p class="title">Effects/animate(params, options)</p>
<p>
A function for making custom animations.
</p>
<p>
The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (e.g. "height", "top", or "opacity").<br xmlns=""/><br xmlns=""/>Note that properties should be specified using camel case, e.g. "marginLeft" instead of "margin-left."<br xmlns=""/><br xmlns=""/>The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>params (<span class="arg-type" title="">Options</span>)</span>
-
A set of style attributes that you wish to animate, and to what end.
</li>
<li><span>options (<span class="arg-type" title="">Options </span>)</span>
-
A set of options with which to configure the animation.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
The first button shows how an unqueued animation works. It expands the div out to 90% width '''while''' the font-size is increasing. Once the font-size change is complete, the border animation will begin.
The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
</p>
<pre>
<code class="javascript">$("#go1").click(function(){
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 )
.animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
$("#go1").add("#go2").click();
});
$("#go4").click(function(){
$("div").css({width:"", fontSize:"", borderWidth:""});
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button id="go1"&gt;&amp;raquo; Animate Block1&lt;/button&gt;
&lt;button id="go2"&gt;&amp;raquo; Animate Block2&lt;/button&gt;
&lt;button id="go3"&gt;&amp;raquo; Animate Both&lt;/button&gt;
&lt;button id="go4"&gt;&amp;raquo; Reset&lt;/button&gt;
&lt;div id="block1"&gt;Block1&lt;/div&gt;
&lt;div id="block2"&gt;Block2&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
</p>
<pre>
<code class="javascript">$("p").animate({
"height": "toggle", "opacity": "toggle"
}, { duration: "slow" });
</code>
</pre>
<h2>Example:</h2>
<p>
Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it ''outside'' the queue, meaning it will automatically start without waiting for its turn.
</p>
<pre>
<code class="javascript">$("p").animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
</code>
</pre>
<h2>Example:</h2>
<p>
An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.
</p>
<pre>
<code class="javascript">$("p").animate({
"opacity": "show"
}, { "duration": "slow", "easing": "easein" });
</code>
</pre>
<h2>Example:</h2>
<p>
An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.
</p>
<pre>
<code class="javascript">$("p").animate({
height:200, width:400, opacity: .5
}, 1000, "linear", function(){alert("all done");} );
</code>
</pre>
</d:entry>
<d:entry id="id4668873" d:title="Effects/animate(params, duration, easing, callback)">
<d:index d:value="animate" d:title="Effects/animate(params, duration, easing, callback)"/>
<p class="title">Effects/animate(params, duration, easing, callback)</p>
<p>
A function for making custom animations.
</p>
<p>
The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: "height", "top", or "opacity").<br xmlns=""/><br xmlns=""/>Note that properties should be specified using camel case, e.g. "marginLeft" instead of "margin-left."<br xmlns=""/><br xmlns=""/>The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property. Only properties that take numeric values are supported (e.g. backgroundColor is not supported).<br xmlns=""/><br xmlns=""/>&lt;p&gt;As of jQuery 1.2 you can now animate properties by em and % (where applicable). Additionally, in jQuery 1.2, you can now do relative animations - specifying a "''+=''" or "''-=''" in front of the property value moves the element positively or negatively, relative to its current position.&lt;/p&gt;<br xmlns=""/><br xmlns=""/>&lt;p&gt;As of jQuery 1.3 if you specify an animation duration of 0 then the animation will synchronously set the elements to their end state (this is different from old versions where there would be a brief, asynchronous, delay before the end state would be set).&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>params (<span class="arg-type" title="">Options</span>)</span>
-
A set of style attributes that you wish to animate, and to what end.
</li>
<li><span>duration (<span class="arg-type" title="">String, Number </span>)</span>
-
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
</li>
<li><span>easing (<span class="arg-type" title="">String </span>)</span>
-
The name of the easing effect that you want to use (plugin required). There are two built-in values, "linear" and "swing".
</li>
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to be executed whenever the animation completes, executes once for each element animated against.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Click the button to animate the div with a number of different properties.
</p>
<pre>
<code class="javascript">// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button id="go"&gt;&amp;raquo; Run&lt;/button&gt;
&lt;div id="block"&gt;Hello!&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.
</p>
<pre>
<code class="javascript">$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button id="left"&gt;&amp;laquo;&lt;/button&gt; &lt;button id="right"&gt;&amp;raquo;&lt;/button&gt;
&lt;div class="block"&gt;&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
</p>
<pre>
<code class="javascript">$("p").animate({
"height": "toggle", "opacity": "toggle"
}, "slow");
</code>
</pre>
<h2>Example:</h2>
<p>
Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.
</p>
<pre>
<code class="javascript">$("p").animate({
"left": "50", "opacity": 1
}, 500);
</code>
</pre>
<h2>Example:</h2>
<p>
An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.
</p>
<pre>
<code class="javascript">$("p").animate({
"opacity": "show"
}, "slow", "easein");
</code>
</pre>
</d:entry>
<d:entry id="id4603963" d:title="Selectors/animated()">
<d:index d:value="animated" d:title="Selectors/animated()"/>
<p class="title">Selectors/animated()</p>
<p>
Matches all elements that are currently being animated.
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Change the color of any div that is animated.
</p>
<pre>
<code class="javascript">$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button id="run"&gt;Run&lt;/button&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div id="mover"&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4609218" d:title="Manipulation/append(content)">
<d:index d:value="append" d:title="Manipulation/append(content)"/>
<p class="title">Manipulation/append(content)</p>
<p>
Append content to the inside of every matched element.
</p>
<p>
This operation is the best way to insert elements inside, at the end, of all matched elements. It is similar to doing an appendChild to all the specified elements, adding them into the document.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>content (<span class="arg-type" title="">String, Element, jQuery</span>)</span>
-
Content to append to the target.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Appends some HTML to all paragraphs.
</p>
<pre>
<code class="javascript">$("p").append("&lt;strong&gt;Hello&lt;/strong&gt;");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;I would like to say: &lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Appends an Element to all paragraphs.
</p>
<pre>
<code class="javascript">$("p").append(document.createTextNode("Hello"));
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;I would like to say: &lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
</p>
<pre>
<code class="javascript">$("p").append( $("strong") );
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;strong&gt;Hello world!!!&lt;/strong&gt;&lt;p&gt;I would like to say: &lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4609318" d:title="Manipulation/appendTo(selector)">
<d:index d:value="appendTo" d:title="Manipulation/appendTo(selector)"/>
<p class="title">Manipulation/appendTo(selector)</p>
<p>
Append all of the matched elements to another, specified, set of elements. As of jQuery 1.3.2, returns all of the inserted elements.
</p>
<p>
This operation is, essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to A, you're appending A to B.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>selector (<span class="arg-type" title="">Selector</span>)</span>
-
target to which the content will be appended.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Appends all spans to the element with the ID "foo"
</p>
<pre>
<code class="javascript">$("span").appendTo("#foo"); // check append() examples
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;span&gt;I have nothing more to say... &lt;/span&gt;
&lt;div id="foo"&gt;FOO! &lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4605874" d:title="Attributes/attr(name)">
<d:index d:value="attr" d:title="Attributes/attr(name)"/>
<p class="title">Attributes/attr(name)</p>
<p>
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned. Attributes include title, alt, src, href, width, style, etc.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>name (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The name of the property to access.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds the title attribute of the first &lt;em&gt; in the page.
</p>
<pre>
<code class="javascript">var title = $("em").attr("title");
$("div").text(title);
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Once there was a &lt;em title="huge, gigantic"&gt;large&lt;/em&gt; dinosaur...
&lt;/p&gt;
The title of the emphasis is:&lt;div&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4605932" d:title="Attributes/attr(properties)">
<d:index d:value="attr" d:title="Attributes/attr(properties)"/>
<p class="title">Attributes/attr(properties)</p>
<p>
Set a key/value object as properties to all matched elements.
</p>
<p>
This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ). Keep in mind this recursively calls attr( key, value ) or attr ( key, fn ), so if one of the properties you are passing is a function, the function will be evaluated and not stored as the attribute itself.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>properties (<span class="arg-type" title="A Javascript object that contains key/value pairs in the form of properties and values.">Map</span>)</span>
-
Key/value pairs to set as object properties.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Set some attributes for all &lt;img&gt;s in the page.
</p>
<pre>
<code class="javascript">$("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;img /&gt;
&lt;img /&gt;
&lt;img /&gt;
&lt;div&gt;&lt;B&gt;Attribute of Ajax&lt;/B&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4605994" d:title="Attributes/attr(key, value)">
<d:index d:value="attr" d:title="Attributes/attr(key, value)"/>
<p class="title">Attributes/attr(key, value)</p>
<p>
Set a single property to a value, on all matched elements.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>key (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The name of the property to set.
</li>
<li><span>value (<span class="arg-type" title="A simple Javascript object..">Object</span>)</span>
-
The value to set the property to.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Disables buttons greater than the 1st button.
</p>
<pre>
<code class="javascript">$("button:gt(1)").attr("disabled","disabled");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button&gt;0th Button&lt;/button&gt;
&lt;button&gt;1st Button&lt;/button&gt;
&lt;button&gt;2nd Button&lt;/button&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4606054" d:title="Attributes/attr(key, fn)">
<d:index d:value="attr" d:title="Attributes/attr(key, fn)"/>
<p class="title">Attributes/attr(key, fn)</p>
<p>
Set a single property to a computed value, on all matched elements.
</p>
<p>
Instead of supplying a string value as described
&lt;a href='#keyvalue'&gt;above&lt;/a&gt; , a function is provided that computes the value.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>key (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The name of the property to set.
</li>
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function returning the value to set. Scope: Current element, argument: Index of current element
&lt;pre&gt;function callback(indexArray) {
// indexArray == position in the jQuery object
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Sets id for divs based on the position in the page.
</p>
<pre>
<code class="javascript">$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '&lt;b&gt;" + this.id + "&lt;/b&gt;')");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;Zero-th &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;First &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;Second &lt;span&gt;&lt;/span&gt;&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Sets src attribute from title attribute on the image.
</p>
<pre>
<code class="javascript">$("img").attr("src", function() {
return "/images/" + this.title;
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;img title="hat.gif"/&gt;
&lt;img title="hat-old.gif"/&gt;
&lt;img title="hat2-old.gif"/&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604724" d:title="Selectors/attributeContains(attribute, value)">
<d:index d:value="attributeContains" d:title="Selectors/attributeContains(attribute, value)"/>
<p class="title">Selectors/attributeContains(attribute, value)</p>
<p>
Matches elements that have the specified attribute and it contains a certain value.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attribute (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute name.
</li>
<li><span>value (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]". Variables can be used using the following syntax: [name*='" +MyVar+ "']
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all inputs with a name attribute that contains 'man' and sets the value with some text.
</p>
<pre>
<code class="javascript">$("input[name*='man']").val("has man in it!");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;input name="man-news" /&gt;
&lt;input name="milkman" /&gt;
&lt;input name="letterman2" /&gt;
&lt;input name="newmilk" /&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604653" d:title="Selectors/attributeEndsWith(attribute, value)">
<d:index d:value="attributeEndsWith" d:title="Selectors/attributeEndsWith(attribute, value)"/>
<p class="title">Selectors/attributeEndsWith(attribute, value)</p>
<p>
Matches elements that have the specified attribute and it ends with a certain value.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attribute (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute name.
</li>
<li><span>value (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]". Varibles can be used using the following syntax: [name$='" +MyVar+ "']
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all inputs with an attribute name that ends with 'letter' and puts text in them.
</p>
<pre>
<code class="javascript">$("input[name$='letter']").val("a letter");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;input name="newsletter" /&gt;
&lt;input name="milkman" /&gt;
&lt;input name="jobletter" /&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604429" d:title="Selectors/attributeEquals(attribute, value)">
<d:index d:value="attributeEquals" d:title="Selectors/attributeEquals(attribute, value)"/>
<p class="title">Selectors/attributeEquals(attribute, value)</p>
<p>
Matches elements that have the specified attribute with a certain value.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attribute (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute name.
</li>
<li><span>value (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]". Variables can be used using the following syntax: [name='" +MyVar+ "']
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all inputs with name 'newsletter' and changes the text of the span next to it.
</p>
<pre>
<code class="javascript">$("input[name='newsletter']").next().text(" is newsletter");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;
&lt;input type="radio" name="newsletter" value="Hot Fuzz" /&gt;
&lt;span&gt;name?&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input type="radio" name="newsletters" value="Cold Fusion" /&gt;
&lt;span&gt;name?&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input type="radio" name="accept" value="Evil Plans" /&gt;
&lt;span&gt;name?&lt;/span&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604369" d:title="Selectors/attributeHas(attribute)">
<d:index d:value="attributeHas" d:title="Selectors/attributeHas(attribute)"/>
<p class="title">Selectors/attributeHas(attribute)</p>
<p>
Matches elements that have the specified attribute. Note the "@" before the attribute name was deprecated as of version 1.2.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attribute (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute name.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Bind a single click that adds the div id to its text.
</p>
<pre>
<code class="javascript">$("div[id]").one("click", function(){
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;no id&lt;/div&gt;
&lt;div id="hey"&gt;with id&lt;/div&gt;
&lt;div id="there"&gt;has an id&lt;/div&gt;
&lt;div&gt;nope&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604795" d:title="Selectors/attributeMultiple(attributeFilter1, attributeFilter2, attributeFilterN)">
<d:index d:value="attributeMultiple" d:title="Selectors/attributeMultiple(attributeFilter1, attributeFilter2, attributeFilterN)"/>
<p class="title">Selectors/attributeMultiple(attributeFilter1, attributeFilter2, attributeFilterN)</p>
<p>
Matches elements that match all of the specified attribute filters.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attributeFilter1 (<span class="arg-type" title="">Selector</span>)</span>
-
An attribute filter.
</li>
<li><span>attributeFilter2 (<span class="arg-type" title="">Selector</span>)</span>
-
Another attribute filter, reducing the selection even more
</li>
<li><span>attributeFilterN (<span class="arg-type" title="">Selector</span>)</span>
-
As many more attribute filters as necessary
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.
</p>
<pre>
<code class="javascript">$("input[id][name$='man']").val("only this one");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;input id="man-news" name="man-news" /&gt;
&lt;input name="milkman" /&gt;
&lt;input id="letterman" name="new-letterman" /&gt;
&lt;input name="newmilk" /&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604505" d:title="Selectors/attributeNotEqual(attribute, value)">
<d:index d:value="attributeNotEqual" d:title="Selectors/attributeNotEqual(attribute, value)"/>
<p class="title">Selectors/attributeNotEqual(attribute, value)</p>
<p>
Matches elements that either don't have the specified attribute or do have the specified attribute but not with a certain value.
</p>
<p>
This functionality is equivalent to &lt;code&gt;:not([attr=value])&lt;/code&gt;.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attribute (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute name.
</li>
<li><span>value (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]". Varibles can be used using the following syntax: [name!='" +MyVar+ "']
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all inputs that don't have the name 'newsletter' and appends text to the span next to it.
</p>
<pre>
<code class="javascript">$("input[name!=newsletter]").next().append("&lt;b&gt;; not newsletter&lt;/b&gt;");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;
&lt;input type="radio" name="newsletter" value="Hot Fuzz" /&gt;
&lt;span&gt;name is newsletter&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input type="radio" value="Cold Fusion" /&gt;
&lt;span&gt;no name&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input type="radio" name="accept" value="Evil Plans" /&gt;
&lt;span&gt;name is accept&lt;/span&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604582" d:title="Selectors/attributeStartsWith(attribute, value)">
<d:index d:value="attributeStartsWith" d:title="Selectors/attributeStartsWith(attribute, value)"/>
<p class="title">Selectors/attributeStartsWith(attribute, value)</p>
<p>
Matches elements that have the specified attribute and it starts with a certain value.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>attribute (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute name.
</li>
<li><span>value (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]". Variables can be used using the following syntax: [name^='" +MyVar+ "']
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all inputs with an attribute name that starts with 'news' and puts text in them.
</p>
<pre>
<code class="javascript">$("input[name^='news']").val("news here!");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;input name="newsletter" /&gt;
&lt;input name="milkman" /&gt;
&lt;input name="newsboy" /&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4609638" d:title="Manipulation/before(content)">
<d:index d:value="before" d:title="Manipulation/before(content)"/>
<p class="title">Manipulation/before(content)</p>
<p>
Insert content before each of the matched elements.
</p>
<p>
&lt;p&gt;The elements must already be inserted into the document (you can't insert an element before another if it's not in the page).&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>content (<span class="arg-type" title="">String, Element, jQuery</span>)</span>
-
Content to insert before each target.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Inserts some HTML before all paragraphs.
</p>
<pre>
<code class="javascript">$("p").before("&lt;b&gt;Hello&lt;/b&gt;");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt; is what I said...&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Inserts a DOM element before all paragraphs.
</p>
<pre>
<code class="javascript">$("p").before( document.createTextNode("Hello") );
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt; is what I said...&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
</p>
<pre>
<code class="javascript">$("p").before( $("b") );
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt; is what I said...&lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4611974" d:title="Events/bind(type, data, fn)">
<d:index d:value="bind" d:title="Events/bind(type, data, fn)"/>
<p class="title">Events/bind(type, data, fn)</p>
<p>
Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
</p>
<p>
'''Possible event values:''' &lt;code&gt;blur&lt;/code&gt;, &lt;code&gt;focus&lt;/code&gt;, &lt;code&gt;load&lt;/code&gt;, &lt;code&gt;resize&lt;/code&gt;, &lt;code&gt;scroll&lt;/code&gt;, &lt;code&gt;unload&lt;/code&gt;, &lt;code&gt;beforeunload&lt;/code&gt;, &lt;code&gt;click&lt;/code&gt;, &lt;code&gt;dblclick&lt;/code&gt;, &lt;code&gt; mousedown&lt;/code&gt;, &lt;code&gt;mouseup&lt;/code&gt;, &lt;code&gt;mousemove&lt;/code&gt;, &lt;code&gt;mouseover&lt;/code&gt;, &lt;code&gt;mouseout&lt;/code&gt;, &lt;code&gt;mouseenter&lt;/code&gt;, &lt;code&gt;mouseleave&lt;/code&gt;, &lt;code&gt;change&lt;/code&gt;, &lt;code&gt;select&lt;/code&gt;, &lt;code&gt; submit&lt;/code&gt;, &lt;code&gt;keydown&lt;/code&gt;, &lt;code&gt;keypress&lt;/code&gt;, &lt;code&gt;keyup&lt;/code&gt;, &lt;code&gt;error&lt;/code&gt;, &lt;code&gt;ready&lt;/code&gt;<br xmlns=""/><br xmlns=""/>The event handler is passed an
&lt;a href='Events/jQuery.Event'&gt;event object&lt;/a&gt; that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element. The full list of properties that are available on the event object can be found in the
&lt;a href='Events/jQuery.Event'&gt;jQuery.Event&lt;/a&gt; documentation.<br xmlns=""/><br xmlns=""/>&lt;p&gt;In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.&lt;/p&gt;<br xmlns=""/><br xmlns=""/>&lt;p&gt;jQuery also supports
&lt;a href='Namespaced_Events'&gt;namespaced events&lt;/a&gt; . These allow you to trigger or unbind specific groups of bound handlers without having to reference them directly.&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>type (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
One or more event types separated by a space
</li>
<li><span>data (<span class="arg-type" title="A simple Javascript object..">Object</span>)</span>
-
Additional data passed to the event handler as &lt;code&gt;
&lt;a href='Events/jQuery.Event#event.data'&gt;event.data&lt;/a&gt; &lt;/code&gt;
</li>
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to bind to the event on each of the set of matched elements, passed an
&lt;a href='Events/jQuery.Event'&gt;event object&lt;/a&gt; .
&lt;pre&gt;function callback(eventObject) {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.
</p>
<pre>
<code class="javascript">$("p").bind("click", function(
&lt;a href='Events/jQuery.Event'&gt;e&lt;/a&gt; ){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.tagName);
});
$("p").bind("mouseenter mouseleave", function(e){
$(this).toggleClass("over");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Click or double click here.&lt;/p&gt;
&lt;span&gt;&lt;/span&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
To display each paragraph's text in an alert box whenever it is clicked:
</p>
<pre>
<code class="javascript">$("p").bind("click", function(){
alert( $(this).text() );
});
</code>
</pre>
<h2>Example:</h2>
<p>
You can pass some extra data before the event handler:
</p>
<pre>
<code class="javascript">function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
</code>
</pre>
<h2>Example:</h2>
<p>
To cancel a default action and prevent it from bubbling up, return false:
</p>
<pre>
<code class="javascript">$("form").bind("submit", function() { return false; })
</code>
</pre>
<h2>Example:</h2>
<p>
To cancel only the default action by using the preventDefault method.
</p>
<pre>
<code class="javascript">$("form").bind("submit", function(event){
event.preventDefault();
});
</code>
</pre>
<h2>Example:</h2>
<p>
Stop only an event from bubbling by using the stopPropagation method.
</p>
<pre>
<code class="javascript">$("form").bind("submit", function(event){
if( event.stopPropagation ) { event.stopPropagation(); } //For 'Good' browsers
else { event.cancelBubble = true; } //For IE
});
</code>
</pre>
<h2>Example:</h2>
<p>
Can bind custom events too.
</p>
<pre>
<code class="javascript">$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Has an attached custom event.&lt;/p&gt;
&lt;button&gt;Trigger custom event&lt;/button&gt;
&lt;span style="display:none;"&gt;&lt;/span&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4613148" d:title="Events/blur()">
<d:index d:value="blur" d:title="Events/blur()"/>
<p class="title">Events/blur()</p>
<p>
Triggers the blur event of each matched element.
</p>
<p>
This causes all of the functions that have been bound to that blur event to be executed, and calls the browser's default blur action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the blur event. The blur event usually fires when an element loses focus either via the pointing device or by tabbing navigation
</p>
<h2>Example:</h2>
<p>
To triggers the blur event on all paragraphs:
</p>
<pre>
<code class="javascript">$("p").blur();
</code>
</pre>
</d:entry>
<d:entry id="id4613188" d:title="Events/blur(fn)">
<d:index d:value="blur" d:title="Events/blur(fn)"/>
<p class="title">Events/blur(fn)</p>
<p>
Bind a function to the blur event of each matched element.
</p>
<p>
The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to bind to the blur event on each of the matched elements.
&lt;pre&gt;function callback(eventObject) {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Fire blur.
</p>
<pre>
<code class="javascript">$("input").blur(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;&lt;input type="text" /&gt; &lt;span&gt;blur fire&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type="password" /&gt; &lt;span&gt;blur fire&lt;/span&gt;&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4605565" d:title="Selectors/button()">
<d:index d:value="button" d:title="Selectors/button()"/>
<p class="title">Selectors/button()</p>
<p>
Matches all button elements and input elements of type button.
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Finds all button inputs.
</p>
<pre>
<code class="javascript">var input = $(":button").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;form&gt;
&lt;input type="button" value="Input Button"/&gt;
&lt;input type="checkbox" /&gt;
&lt;input type="file" /&gt;
&lt;input type="hidden" /&gt;
&lt;input type="image" /&gt;
&lt;input type="password" /&gt;
&lt;input type="radio" /&gt;
&lt;input type="reset" /&gt;
&lt;input type="submit" /&gt;
&lt;input type="text" /&gt;
&lt;select&gt;&lt;option&gt;Option&lt;option/&gt;&lt;/select&gt;
&lt;textarea&gt;&lt;/textarea&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;/form&gt;
&lt;div&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4613248" d:title="Events/change()">
<d:index d:value="change" d:title="Events/change()"/>
<p class="title">Events/change()</p>
<p>
Triggers the change event of each matched element.
</p>
<p>
This causes all of the functions that have been bound to that change event to be executed, and calls the browser's default change action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the change event. The change event usually fires when a control loses the input focus and its value has been modified since gaining focus.
</p>
</d:entry>
<d:entry id="id4613276" d:title="Events/change(fn)">
<d:index d:value="change" d:title="Events/change(fn)"/>
<p class="title">Events/change(fn)</p>
<p>
Binds a function to the change event of each matched element.
</p>
<p>
The change event fires when a control loses the input focus and its value has been modified since gaining focus.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to bind to the change event on each of the matched elements.
&lt;pre&gt;function callback(eventObject) {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.
</p>
<pre>
<code class="javascript">$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;select name="sweets" multiple="multiple"&gt;
&lt;option&gt;Chocolate&lt;/option&gt;
&lt;option selected="selected"&gt;Candy&lt;/option&gt;
&lt;option&gt;Taffy&lt;/option&gt;
&lt;option selected="selected"&gt;Caramel&lt;/option&gt;
&lt;option&gt;Fudge&lt;/option&gt;
&lt;option&gt;Cookie&lt;/option&gt;
&lt;/select&gt;
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
To add a validity test to all text input elements:
</p>
<pre>
<code class="javascript">$("input[type='text']").change( function() {
// check input ($(this).val()) for validity here
});
</code>
</pre>
</d:entry>
<d:entry id="id4605373" d:title="Selectors/checkbox()">
<d:index d:value="checkbox" d:title="Selectors/checkbox()"/>
<p class="title">Selectors/checkbox()</p>
<p>
Matches all input elements of type checkbox.
</p>
<p>
Using this psuedo-selector like &lt;code&gt;$(':checkbox')&lt;/code&gt; is equivalent to &lt;code&gt;$('*:checkbox')&lt;/code&gt; which is a slow selector. It's recommended to do &lt;code&gt;$('input:checkbox')&lt;/code&gt;.
</p>
<h2>Example:</h2>
<p>
Finds all checkbox inputs.
</p>
<pre>
<code class="javascript">var input = $("form :checkbox").wrap('&lt;span&gt;&lt;/span&gt;').parent().css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;form&gt;
&lt;input type="button" value="Input Button"/&gt;
&lt;input type="checkbox" /&gt;
&lt;input type="checkbox" /&gt;
&lt;input type="file" /&gt;
&lt;input type="hidden" /&gt;
&lt;input type="image" /&gt;
&lt;input type="password" /&gt;
&lt;input type="radio" /&gt;
&lt;input type="reset" /&gt;
&lt;input type="submit" /&gt;
&lt;input type="text" /&gt;
&lt;select&gt;&lt;option&gt;Option&lt;option/&gt;&lt;/select&gt;
&lt;textarea&gt;&lt;/textarea&gt;
&lt;button&gt;Button&lt;/button&gt;
&lt;/form&gt;
&lt;div&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4605754" d:title="Selectors/checked()">
<d:index d:value="checked" d:title="Selectors/checked()"/>
<p class="title">Selectors/checked()</p>
<p>
Matches all elements that are checked.
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Finds all input elements that are checked.
</p>
<pre>
<code class="javascript">function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n &lt;= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;form&gt;
&lt;input type="checkbox" name="newsletter" checked="checked" value="Hourly" /&gt;
&lt;input type="checkbox" name="newsletter" value="Daily" /&gt;
&lt;input type="checkbox" name="newsletter" value="Weekly" /&gt;
&lt;input type="checkbox" name="newsletter" checked="checked" value="Monthly" /&gt;
&lt;input type="checkbox" name="newsletter" value="Yearly" /&gt;
&lt;/form&gt;
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
<h3>Result:</h3>
<pre>
<code class="html">[ &lt;input type="checkbox" name="newsletter" checked="checked" value="Daily" /&gt;,
&lt;input type="checkbox" name="newsletter" checked="checked" value="Monthly" /&gt; ]
</code>
</pre>
</d:entry>
<d:entry id="id4603245" d:title="Selectors/child(parent, child)">
<d:index d:value="child" d:title="Selectors/child(parent, child)"/>
<p class="title">Selectors/child(parent, child)</p>
<p>
Matches all child elements specified by "child" of elements specified by "parent".
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>parent (<span class="arg-type" title="">Selector</span>)</span>
-
Any valid selector.
</li>
<li><span>child (<span class="arg-type" title="">Selector</span>)</span>
-
A selector to match elements that are children of the first selector.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all children of the element with id "main" which is yellow.
</p>
<pre>
<code class="javascript">$("#main &gt; *").css("border", "3px double red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;span id="main"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;button&gt;Child&lt;/button&gt;
&lt;div class="mini"&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div class="mini"&gt;&lt;/div&gt;
&lt;div class="mini"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;&lt;button&gt;Grand&lt;/button&gt;&lt;/div&gt;
&lt;div&gt;&lt;span&gt;A Span &lt;em&gt;in&lt;/em&gt; child&lt;/span&gt;&lt;/div&gt;
&lt;span&gt;A Span in main&lt;/span&gt;
&lt;/span&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4607842" d:title="Traversing/children(expr)">
<d:index d:value="children" d:title="Traversing/children(expr)"/>
<p class="title">Traversing/children(expr)</p>
<p>
Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
</p>
<p>
This set can be filtered with an optional expression that will cause only elements matching the selector to be collected. Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>expr (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An expression to filter the child Elements with.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Find all children of the clicked element.
</p>
<pre>
<code class="javascript">$("#container").click(function (e) {
$("*").removeClass("hilite");
var $kids = $(e.target).children();
var len = $kids.addClass("hilite").length;
$("#results span:first").text(len);
$("#results span:last").text(e.target.tagName);
e.preventDefault();
return false;
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div id="container"&gt;
&lt;div&gt;
&lt;p&gt;This &lt;span&gt;is the &lt;em&gt;way&lt;/em&gt; we&lt;/span&gt;
write &lt;em&gt;the&lt;/em&gt; demo,&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a href="#"&gt;&lt;b&gt;w&lt;/b&gt;rit&lt;b&gt;e&lt;/b&gt;&lt;/a&gt; the &lt;span&gt;demo,&lt;/span&gt; &lt;button&gt;write
the&lt;/button&gt; demo,
&lt;/div&gt;
&lt;div&gt;
This &lt;span&gt;the way we &lt;em&gt;write&lt;/em&gt; the &lt;em&gt;demo&lt;/em&gt; so&lt;/span&gt;
&lt;input type="text" value="early" /&gt; in
&lt;/div&gt;
&lt;p&gt;
&lt;span&gt;t&lt;/span&gt;he &lt;span&gt;m&lt;/span&gt;orning.
&lt;span id="results"&gt;Found &lt;span&gt;0&lt;/span&gt; children in &lt;span&gt;TAG&lt;/span&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Find all children of each div.
</p>
<pre>
<code class="javascript">$("div").children().css("border-bottom", "3px double red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello (this is a paragraph)&lt;/p&gt;
&lt;div&gt;&lt;span&gt;Hello Again (this span is a child of the a div)&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;And &lt;span&gt;Again&lt;/span&gt; (in another paragraph)&lt;/p&gt;
&lt;div&gt;And One Last &lt;span&gt;Time&lt;/span&gt; (most text directly in a div)&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Find all children with a class "selected" of each div.
</p>
<pre>
<code class="javascript">$("div").children(".selected").css("color", "blue");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;
&lt;span&gt;Hello&lt;/span&gt;
&lt;p class="selected"&gt;Hello Again&lt;/p&gt;
&lt;div class="selected"&gt;And Again&lt;/div&gt;
&lt;p&gt;And One Last Time&lt;/p&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4602844" d:title="Selectors/class(class)">
<d:index d:value="class" d:title="Selectors/class(class)"/>
<p class="title">Selectors/class(class)</p>
<p>
Matches all elements with the given class.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>class (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
A class to search for. An element can have multiple classes, one of them must match.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds the element with the class "myClass".
</p>
<pre>
<code class="javascript">$(".myClass").css("border","3px solid red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div class="notMe"&gt;div class="notMe"&lt;/div&gt;
&lt;div class="myClass"&gt;div class="myClass"&lt;/div&gt;
&lt;span class="myClass"&gt;span class="myClass"&lt;/span&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4602906" d:title="Selectors/class(class, class)">
<d:index d:value="class" d:title="Selectors/class(class, class)"/>
<p class="title">Selectors/class(class, class)</p>
<p>
Matches all elements with the given classes.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>class (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
One of the classes to search for. An element can have multiple classes, one of them must match this one.
</li>
<li><span>class (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The other class to search for. An element can have multiple classes, one of them must match this one too.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds the element with both classes "myClass" and "myOtherClass".
</p>
<pre>
<code class="javascript">$(".myClass.myOtherClass").css("border","3px solid red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div class="myClass"&gt;div class="myClass"&lt;/div&gt;
&lt;div class="myOtherClass"&gt;div class="myOtherClass"&lt;/div&gt;
&lt;div class="myClass myOtherClass"&gt;div class="myClass myOtherClass"&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4613358" d:title="Events/click()">
<d:index d:value="click" d:title="Events/click()"/>
<p class="title">Events/click()</p>
<p>
Triggers the click event of each matched element.
</p>
<p>
Causes all of the functions that have been bound to that click event to be executed.
</p>
<h2>Example:</h2>
<p>
To trigger the click event on all of the paragraphs on the page:
</p>
<pre>
<code class="javascript">$("p").click();
</code>
</pre>
</d:entry>
<d:entry id="id4613393" d:title="Events/click(fn)">
<d:index d:value="click" d:title="Events/click(fn)"/>
<p class="title">Events/click(fn)</p>
<p>
Binds a function to the click event of each matched element.
</p>
<p>
The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:&lt;ul&gt;&lt;li&gt;mousedown&lt;/li&gt;&lt;li&gt;mouseup&lt;/li&gt;&lt;li&gt;click&lt;/li&gt;&lt;/ul&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to bind to the click event on each of the matched elements.
Return 'false' or invoke
&lt;a href='Events/jQuery.Event#event.preventDefault.28.29'&gt;eventObject.preventDefault()&lt;/a&gt; to cancel event propagation. This prevents the browser's default action (such as navigation on a link).
&lt;pre&gt;function callback(eventObject) {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
To hide paragraphs on a page when they are clicked:
</p>
<pre>
<code class="javascript">$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;First Paragraph&lt;/p&gt;
&lt;p&gt;Second Paragraph&lt;/p&gt;
&lt;p&gt;Yet one more Paragraph&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4610700" d:title="Manipulation/clone()">
<d:index d:value="clone" d:title="Manipulation/clone()"/>
<p class="title">Manipulation/clone()</p>
<p>
Clone matched DOM Elements and select the clones.
</p>
<p>
This is useful for moving copies of the elements to another location in the DOM.
</p>
<h2>Example:</h2>
<p>
Clones all b elements (and selects the clones) and prepends them to all paragraphs.
</p>
<pre>
<code class="javascript">$("b").clone().prependTo("p");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;, how are you?&lt;/p&gt;
</code>
</pre>
<h3>Result:</h3>
<pre>
<code class="html">&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;, how are you?&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4610745" d:title="Manipulation/clone(bool)">
<d:index d:value="clone" d:title="Manipulation/clone(bool)"/>
<p class="title">Manipulation/clone(bool)</p>
<p>
Clone matched DOM Elements, and all their event handlers, and select the clones.
</p>
<p>
This is useful for moving copies of the elements, and their events, to another location in the DOM.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>bool (<span class="arg-type" title="true or false.">Boolean</span>)</span>
-
Set to true to enable cloning of event handlers.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Create a button that's able to clone itself - and have the clones themselves be clonable.
</p>
<pre>
<code class="javascript">$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button&gt;Clone Me!&lt;/button&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4607955" d:title="Traversing/closest(expr)">
<d:index d:value="closest" d:title="Traversing/closest(expr)"/>
<p class="title">Traversing/closest(expr)</p>
<p>
'''New in jQuery 1.3''' Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
</p>
<p>
&lt;p&gt;Closest works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.&lt;/p&gt;
&lt;p&gt;Closest is especially useful for dealing with event delegation.&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>expr (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An expression to filter the elements with.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Show how event delegation can be done with closest.
</p>
<pre>
<code class="javascript">$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("hilight");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;ul&gt;
&lt;li&gt;&lt;b&gt;Click me!&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;You can also &lt;b&gt;Click me!&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604022" d:title="Selectors/contains(text)">
<d:index d:value="contains" d:title="Selectors/contains(text)"/>
<p class="title">Selectors/contains(text)</p>
<p>
Matches elements which contain the given text.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>text (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
A string of text to look for. It's case sensitive.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all divs containing "John" and underlines them.
</p>
<pre>
<code class="javascript">$("div:contains('John')").css("text-decoration", "underline");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;John Resig&lt;/div&gt;
&lt;div&gt;George Martin&lt;/div&gt;
&lt;div&gt;Malcom John Sinclair&lt;/div&gt;
&lt;div&gt;J. Ohn
</code>
</pre>
</d:entry>
<d:entry id="id4608014" d:title="Traversing/contents()">
<d:index d:value="contents" d:title="Traversing/contents()"/>
<p class="title">Traversing/contents()</p>
<p>
Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Find all the text nodes inside a paragraph and wrap them with a bold tag.
</p>
<pre>
<code class="javascript">$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("&lt;b/&gt;");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;Hello &lt;a href="http://ejohn.org/"&gt;John&lt;/a&gt;, how are you doing?&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Append some new content into an empty iframe.
</p>
<pre>
<code class="javascript">$("iframe").contents().find("body").append("I'm in an iframe!");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;iframe src="/index-blank.html" width="300" height="100"&gt;&lt;/iframe&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4601583" d:title="Core/context">
<d:index d:value="context" d:title="Core/context"/>
<p class="title">Core/context</p>
<p>
&lt;p&gt;'''New in jQuery 1.3''' The DOM node context originally passed to jQuery() (if none was passed then context will be equal to the document).&lt;/p&gt;
</p>
<p>
&lt;p&gt;Should be used in conjunction with selector to determine the exact query used. These two properties are mostly useful to plugin developers.&lt;/p&gt;
</p>
<h2>Example:</h2>
<p>
Determine the exact context used.
</p>
<pre>
<code class="javascript">$("ul")
.append("&lt;li&gt;" + $("ul").context + "&lt;/li&gt;")
.append("&lt;li&gt;" + $("ul", document.body).context.nodeName + "&lt;/li&gt;");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> Context:&lt;ul&gt;&lt;/ul&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4610807" d:title="CSS/css(name)">
<d:index d:value="css" d:title="CSS/css(name)"/>
<p class="title">CSS/css(name)</p>
<p>
Return a style property on the first matched element.
</p>
<p>
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: &lt;code&gt;$(elem).css('marginTop')&lt;/code&gt; and &lt;code&gt;$(elem).css('marginRight')&lt;/code&gt;, and so on.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>name (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The name of the property to access.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
To access the background color of a clicked div.
</p>
<pre>
<code class="javascript">$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is &lt;span style='color:" +
color + ";'&gt;" + color + "&lt;/span&gt;.");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;span id="result"&gt;&amp;nbsp;&lt;/span&gt;
&lt;div style="background-color:blue;"&gt;&lt;/div&gt;
&lt;div style="background-color:rgb(15,99,30);"&gt;&lt;/div&gt;
&lt;div style="background-color:#123456;"&gt;&lt;/div&gt;
&lt;div style="background-color:#f11;"&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4610880" d:title="CSS/css(properties)">
<d:index d:value="css" d:title="CSS/css(properties)"/>
<p class="title">CSS/css(properties)</p>
<p>
Set a key/value object as style properties to all matched elements.
</p>
<p>
This is the best way to set several style properties on all matched elements. <br xmlns=""/><br xmlns=""/>Be aware, however, that when the key contains a hyphen, such as "background-color," it must either be placed within quotation marks or be written in camel case like so: backgroundColor. As "float" and "class" are reserved words in JavaScript, it's recommended to always surround those terms with quotes. jQuery normalizes the "opacity" property in Internet Explorer.<br xmlns=""/><br xmlns=""/> </p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>properties (<span class="arg-type" title="A Javascript object that contains key/value pairs in the form of properties and values.">Map</span>)</span>
-
Key/value pairs to set as style properties.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
To set the color of all paragraphs to red and background to blue:
</p>
<pre>
<code class="javascript">$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Move the mouse over a paragraph.
&lt;/p&gt;
&lt;p&gt;
Like this one or the one above.
&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
If the property name includes a "-", put it between quotation marks:
</p>
<pre>
<code class="javascript">$("p").hover(function () {
$(this).css({ "background-color":"yellow", "font-weight":"bolder" });
}, function () {
var cssObj = {
"background-color": "#ddd",
"font-weight": "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Move the mouse over a paragraph.
&lt;/p&gt;
&lt;p&gt;
Like this one or the one above.
&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4610969" d:title="CSS/css(name, value)">
<d:index d:value="css" d:title="CSS/css(name, value)"/>
<p class="title">CSS/css(name, value)</p>
<p>
Set a single style property to a value on all matched elements.
</p>
<p>
If a number is provided, it is automatically converted into a pixel value, with the following exceptions: z-index, font-weight, opacity, zoom and line-height). To remove a style property from elements use an empty string value.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>name (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The name of the property to set.
</li>
<li><span>value (<span class="arg-type" title="">String, Number, Callback</span>)</span>
-
The value to set the property to. In case of a Callback, the context is the to the DOM element to change.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
To change the color of any paragraph to red on mouseover event.
</p>
<pre>
<code class="javascript">$("p").mouseover(function () {
$(this).css("color","red");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Just roll the mouse over me.
&lt;/p&gt;
&lt;p&gt;
Or me to see a color change.
&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
To highlight a clicked word in the paragraph.
</p>
<pre>
<code class="javascript">var words = $("p:first").text().split(" ");
var text = words.join("&lt;/span&gt; &lt;span&gt;");
$("p:first").html("&lt;span&gt;" + text + "&lt;/span&gt;");
$("span").click(function () {
$(this).css("background-color","yellow");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Once upon a time there was a man
who lived in a pizza parlor. This
man just loved pizza and ate it all
the time. He went on to be the
happiest man in the world. The end.
&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4601941" d:title="Core/data(name)">
<d:index d:value="data" d:title="Core/data(name)"/>
<p class="title">Core/data(name)</p>
<p>
Returns value at named data store for the element, as set by data(name, value).
</p>
<p>
&lt;p&gt;If the jQuery collection references multiple elements, the value returned refers to the first element.&lt;/p&gt;&lt;p&gt;This function is used to get stored data on an element without the risk of a circular reference. It uses jQuery.data and is new to version 1.2.3. It can be used for many reasons and jQuery UI uses it heavily. &lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>name (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
Name of the data stored.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Get the data named "blah" stored at for an element.
</p>
<pre>
<code class="javascript">$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;A div&lt;/div&gt;
&lt;button&gt;Get "blah" from the div&lt;/button&gt;
&lt;button&gt;Set "blah" to "hello"&lt;/button&gt;
&lt;button&gt;Set "blah" to 86&lt;/button&gt;
&lt;button&gt;Remove "blah" from the div&lt;/button&gt;
&lt;p&gt;The "blah" value of this div is &lt;span&gt;?&lt;/span&gt;&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4602002" d:title="Core/data(name, value)">
<d:index d:value="data" d:title="Core/data(name, value)"/>
<p class="title">Core/data(name, value)</p>
<p>
Stores the value in the named spot.
</p>
<p>
&lt;p&gt;If the jQuery collection references multiple elements, the data element is set on all of them. A data value that is a Javascript object is not copied and will be shared across all elements in the collection.&lt;/p&gt;&lt;p&gt;This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.&lt;/p&gt;&lt;p&gt;It may also be used for getting events attached to elements, however this is unsupported. First paramater being the element, second being the string "events"&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>name (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
Name of the data to store.
</li>
<li><span>value (<span class="arg-type" title="">Any</span>)</span>
-
Value to be stored.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Store then retrieve a value from the div element.
</p>
<pre>
<code class="javascript">$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;
The values stored were
&lt;span&gt;&lt;/span&gt;
and
&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4666171" d:title="Events/dblclick()">
<d:index d:value="dblclick" d:title="Events/dblclick()"/>
<p class="title">Events/dblclick()</p>
<p>
Triggers the dblclick event of each matched element.
</p>
<p>
This causes all of the functions that have been bound to that dblclick event to be executed, and calls the browser's default dblclick action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the dblclick event. The dblclick event usually fires when the pointing device button is double clicked over an element.
</p>
</d:entry>
<d:entry id="id4666197" d:title="Events/dblclick(fn)">
<d:index d:value="dblclick" d:title="Events/dblclick(fn)"/>
<p class="title">Events/dblclick(fn)</p>
<p>
Binds a function to the dblclick event of each matched element.
</p>
<p>
The dblclick event fires when the pointing device button is double clicked over an element
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The function to bind to the dblclick event on each of the matched elements.
&lt;pre&gt;function callback(eventObject) {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:
</p>
<pre>
<code class="javascript">$("p").dblclick( function () { alert("Hello World!"); });
</code>
</pre>
<h2>Example:</h2>
<p>
Double click to toggle background color.
</p>
<pre>
<code class="javascript">var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;&lt;/div&gt;&lt;span&gt;Double click the block&lt;/span&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4602341" d:title="Core/dequeue(name)">
<d:index d:value="dequeue" d:title="Core/dequeue(name)"/>
<p class="title">Core/dequeue(name)</p>
<p>
Removes a queued function from the front of the queue and executes it.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>name (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
The queue name (fx by default)
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Use dequeue to end a custom queue function which allows the queue to keep going.
</p>
<pre>
<code class="javascript">$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
$(this).toggleClass("red");
$(this).dequeue();
});
$("div").animate({left:'10px', top:'30px'}, 700);
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button&gt;Start&lt;/button&gt;
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4603167" d:title="Selectors/descendant(ancestor, descendant)">
<d:index d:value="descendant" d:title="Selectors/descendant(ancestor, descendant)"/>
<p class="title">Selectors/descendant(ancestor, descendant)</p>
<p>
Matches a descendant element specified by "descendant" of elements specified by "ancestor".
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>ancestor (<span class="arg-type" title="">Selector</span>)</span>
-
Any valid selector.
</li>
<li><span>descendant (<span class="arg-type" title="">Selector</span>)</span>
-
A selector to match elements that are descendants of the first selector.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds all input descendants of forms.
</p>
<pre>
<code class="javascript">$("form input").css("border", "2px dotted blue");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;form&gt;
&lt;div&gt;Form is surrounded by the green outline&lt;/div&gt;
&lt;label&gt;Child:&lt;/label&gt;
&lt;input name="name" /&gt;
&lt;fieldset&gt;
&lt;label&gt;Grandchild:&lt;/label&gt;
&lt;input name="newsletter" /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
Sibling to form: &lt;input name="none" /&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4612799" d:title="Events/die(type , fn )">
<d:index d:value="die" d:title="Events/die(type , fn )"/>
<p class="title">Events/die(type , fn )</p>
<p>
'''Added in jQuery 1.3:''' This does the opposite of live, it removes a bound live event.
</p>
<p>
&lt;p&gt;Without any arguments, all bound live events are removed.&lt;/p&gt;&lt;p&gt;You can also unbind custom events registered with live.&lt;/p&gt;&lt;p&gt;If the type is provided, all bound live events of that type are removed.&lt;/p&gt;&lt;p&gt;If the function that was passed to live is provided as the second argument, only that specific event handler is removed.&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>type (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
A live event type to unbind.
</li>
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to unbind from the event on each of the set of matched elements.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Can bind and unbind events to the colored button.
</p>
<pre>
<code class="javascript">function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("#theone").live("click", aClick)
.text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").die("click", aClick)
.text("Does nothing...");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button id="theone"&gt;Does nothing...&lt;/button&gt;
&lt;button id="bind"&gt;Bind Click&lt;/button&gt;
&lt;button id="unbind"&gt;Unbind Click&lt;/button&gt;
&lt;div style="display:none;"&gt;Click!&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
To unbind all live events from all paragraphs, write:
</p>
<pre>
<code class="javascript">$("p").die()
</code>
</pre>
<h2>Example:</h2>
<p>
To unbind all live click events from all paragraphs, write:
</p>
<pre>
<code class="javascript">$("p").die( "click" )
</code>
</pre>
<h2>Example:</h2>
<p>
To unbind just one previously bound handler, pass the function in as the second argument:
</p>
<pre>
<code class="javascript">var foo = function () {
// code to handle some kind of event
};
$("p").live("click", foo); // ... now foo will be called when paragraphs are clicked ...
$("p").die("click", foo); // ... foo will no longer be called.
</code>
</pre>
</d:entry>
<d:entry id="id4605710" d:title="Selectors/disabled()">
<d:index d:value="disabled" d:title="Selectors/disabled()"/>
<p class="title">Selectors/disabled()</p>
<p>
Matches all elements that are disabled.
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Finds all input elements that are disabled.
</p>
<pre>
<code class="javascript">$("input:disabled").val("this is it");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;form&gt;
&lt;input name="email" disabled="disabled" /&gt;
&lt;input name="id" /&gt;
&lt;/form&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4601182" d:title="Core/each(callback)">
<d:index d:value="each" d:title="Core/each(callback)"/>
<p class="title">Core/each(callback)</p>
<p>
Execute a function within the context of every matched element.
</p>
<p>
This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. Note that 'this' does ''not'' point to a jQuery object.<br xmlns=""/><br xmlns=""/>Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).<br xmlns=""/><br xmlns=""/>Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop). <br xmlns=""/><br xmlns=""/>This function is not the same as
&lt;a href='Utilities/jQuery.each'&gt;$.each()&lt;/a&gt; - which is used to iterate over anything, such as an array or generic object.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
The callback to execute for each matched element.
&lt;pre&gt;function callback(index, domElement) {
this; // this == domElement
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Iterates over three divs and sets their color property.
</p>
<pre>
<code class="javascript">$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;Click here&lt;/div&gt;
&lt;div&gt;to iterate through&lt;/div&gt;
&lt;div&gt;these divs.&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:
</p>
<pre>
<code class="javascript">$("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> To do list: &lt;span&gt;(click here to change)&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;Eat&lt;/li&gt;
&lt;li&gt;Sleep&lt;/li&gt;
&lt;li&gt;Be merry&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
You can use 'return' to break out of each() loops early.
</p>
<pre>
<code class="javascript">$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;button&gt;Change colors&lt;/button&gt;
&lt;span&gt;&lt;/span&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div id="stop"&gt;Stop here&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4602786" d:title="Selectors/element(element)">
<d:index d:value="element" d:title="Selectors/element(element)"/>
<p class="title">Selectors/element(element)</p>
<p>
Matches all elements with the given tag name.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>element (<span class="arg-type" title="A string of characters.">String</span>)</span>
-
An element to search for. Refers to the tagName of DOM nodes.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds every DIV element.
</p>
<pre>
<code class="javascript">$("div").css("border","9px solid red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;DIV1&lt;/div&gt;
&lt;div&gt;DIV2&lt;/div&gt;
&lt;span&gt;SPAN&lt;/span&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4604076" d:title="Selectors/empty()">
<d:index d:value="empty" d:title="Selectors/empty()"/>
<p class="title">Selectors/empty()</p>
<p>
Matches all elements that have no children (including text nodes).
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Finds all elements that are empty - they don't have child elements or text.
</p>
<pre>
<code class="javascript">$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;table border="1"&gt;
&lt;tr&gt;&lt;td&gt;TD #0&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;TD #2&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;TD#5&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4610558" d:title="Manipulation/empty()">
<d:index d:value="empty" d:title="Manipulation/empty()"/>
<p class="title">Manipulation/empty()</p>
<p>
Remove all child nodes from the set of matched elements.
</p>
<p>
Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.
</p>
<h2>Example:</h2>
<p>
Removes all child nodes (including text nodes) from all paragraphs
</p>
<pre>
<code class="javascript">$("button").click(function () {
$("p").empty();
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Hello, &lt;span&gt;Person&lt;/span&gt; &lt;a href="javascript:;"&gt;and person&lt;/a&gt;
&lt;/p&gt;
&lt;button&gt;Call empty() on above paragraph&lt;/button&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4605668" d:title="Selectors/enabled()">
<d:index d:value="enabled" d:title="Selectors/enabled()"/>
<p class="title">Selectors/enabled()</p>
<p>
Matches all elements that are enabled.
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Finds all input elements that are enabled.
</p>
<pre>
<code class="javascript">$("input:enabled").val("this is it");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;form&gt;
&lt;input name="email" disabled="disabled" /&gt;
&lt;input name="id" /&gt;
&lt;/form&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4608839" d:title="Traversing/end()">
<d:index d:value="end" d:title="Traversing/end()"/>
<p class="title">Traversing/end()</p>
<p>
Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).
</p>
<p>
If there was no destructive operation before, an empty set is returned.<br xmlns=""/><br xmlns=""/>A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including
&lt;a href='Traversing/add'&gt;add&lt;/a&gt; ,
&lt;a href='Traversing/andSelf'&gt;andSelf&lt;/a&gt; ,
&lt;a href='Traversing/children'&gt;children&lt;/a&gt; ,
&lt;a href='Traversing/filter'&gt;filter&lt;/a&gt; ,
&lt;a href='Traversing/find'&gt;find&lt;/a&gt; ,
&lt;a href='Traversing/map'&gt;map&lt;/a&gt; ,
&lt;a href='Traversing/next'&gt;next&lt;/a&gt; ,
&lt;a href='Traversing/nextAll'&gt;nextAll&lt;/a&gt; ,
&lt;a href='Traversing/not'&gt;not&lt;/a&gt; ,
&lt;a href='Traversing/parent'&gt;parent&lt;/a&gt; ,
&lt;a href='Traversing/parents'&gt;parents&lt;/a&gt; ,
&lt;a href='Traversing/prev'&gt;prev&lt;/a&gt; ,
&lt;a href='Traversing/prevAll'&gt;prevAll&lt;/a&gt; ,
&lt;a href='Traversing/siblings'&gt;siblings&lt;/a&gt; , and
&lt;a href='Traversing/slice'&gt;slice&lt;/a&gt; - plus the
&lt;a href='Manipulation/clone'&gt;clone&lt;/a&gt; , appendTo, prependTo, insertBefore, insertAfter, and replaceAll functions (from Manipulation).
</p>
<h2>Example:</h2>
<p>
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
</p>
<pre>
<code class="javascript">jQuery.fn.showTags = function (n) {
var tags = this.map(function () {
return this.tagName;
})
.get().join(", ");
$("b:eq(" + n + ")").text(tags);
return this;
};
$("p").showTags(0)
.find("span")
.showTags(1)
.css("background", "yellow")
.end()
.showTags(2)
.css("font-style", "italic");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Hi there &lt;span&gt;how&lt;/span&gt; are you &lt;span&gt;doing&lt;/span&gt;?
&lt;/p&gt;
&lt;p&gt;
This &lt;span&gt;span&lt;/span&gt; is one of
several &lt;span&gt;spans&lt;/span&gt; in this
&lt;span&gt;sentence&lt;/span&gt;.
&lt;/p&gt;
&lt;div&gt;
Tags in jQuery object initially: &lt;b&gt;&lt;/b&gt;
&lt;/div&gt;
&lt;div&gt;
Tags in jQuery object after find: &lt;b&gt;&lt;/b&gt;
&lt;/div&gt;
&lt;div&gt;
Tags in jQuery object after end: &lt;b&gt;&lt;/b&gt;
&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
</p>
<pre>
<code class="javascript">$("p").find("span").end().css("border", "2px red solid");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;&lt;span&gt;Hello&lt;/span&gt;, how are you?&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4601640" d:title="Core/eq(position)">
<d:index d:value="eq" d:title="Core/eq(position)"/>
<p class="title">Core/eq(position)</p>
<p>
Reduce the set of matched elements to a single element.
</p>
<p>
The position of the element in the set of matched elements starts at 0 and goes to length - 1; passing an out-of-range index returns an empty jQuery object.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>position (<span class="arg-type" title="A valid numeric.">Number</span>)</span>
-
The index of the element to select.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Reduces the selection to the second selected element.
</p>
<pre>
<code class="javascript">$("p").eq(1).css("color", "red")
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;This is just a test.&lt;/p&gt;&lt;p&gt;So is this&lt;/p&gt;
</code>
</pre>
<h3>Result:</h3>
<pre>
<code class="html">[ &lt;p&gt;So is this&lt;/p&gt; ]
</code>
</pre>
</d:entry>
<d:entry id="id4603746" d:title="Selectors/eq(index)">
<d:index d:value="eq" d:title="Selectors/eq(index)"/>
<p class="title">Selectors/eq(index)</p>
<p>
Matches a single element by its index.
</p>
<p>
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>index (<span class="arg-type" title="A valid numeric.">Number</span>)</span>
-
Zero-based index of the element to match.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Finds the third td.
</p>
<pre>
<code class="javascript">$("td:eq(2)").css("color", "red");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;table border="1"&gt;
&lt;tr&gt;&lt;td&gt;TD #0&lt;/td&gt;&lt;td&gt;TD #1&lt;/td&gt;&lt;td&gt;TD #2&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;TD #3&lt;/td&gt;&lt;td&gt;TD #4&lt;/td&gt;&lt;td&gt;TD #5&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;TD #6&lt;/td&gt;&lt;td&gt;TD #7&lt;/td&gt;&lt;td&gt;TD #8&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4607019" d:title="Traversing/eq(index)">
<d:index d:value="eq" d:title="Traversing/eq(index)"/>
<p class="title">Traversing/eq(index)</p>
<p>
Reduce the set of matched elements to a single element.
</p>
<p>
Argument is the position of the element in the set of matched elements, starting at 0 and going to length - 1. Since the query filters out all elements that do not match the given index, providing an invalid index returns an empty set of elements rather than null.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>index (<span class="arg-type" title="">Integer</span>)</span>
-
The index of the element in the jQuery object.
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Turn the div with index 2 blue by adding an appropriate class.
</p>
<pre>
<code class="javascript">$("div").eq(2).addClass("blue");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4666272" d:title="Events/error()">
<d:index d:value="error" d:title="Events/error()"/>
<p class="title">Events/error()</p>
<p>
Triggers the error event of each matched element.
</p>
<p>
This causes all of the functions that have been bound to that error event to be executed, and calls the browser's default error action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the error event.
</p>
</d:entry>
<d:entry id="id4666293" d:title="Events/error(fn)">
<d:index d:value="error" d:title="Events/error(fn)"/>
<p class="title">Events/error(fn)</p>
<p>
Binds a function to the error event of each matched element.
</p>
<p>
&lt;p&gt;(NOTE: Please use the browser's native handling for window.onerror rather than this method; it does not currently work properly.) There is no public standard for the error event. In most browsers, the window object's error event is triggered when a JavaScript error occurs on the page. An image object's error event is triggered when it is set an invalid src attribute - either a non-existent file, or one with corrupt image data.&lt;/p&gt;&lt;p&gt;If the event is thrown by the window object, the event handler will be passed three parameters: &lt;ol&gt;&lt;li&gt;A message describing the event ("varName is not defined", "missing operator in expression", etc.),&lt;/li&gt;&lt;li&gt;the full URL of the document containing the error, and&lt;/li&gt;&lt;li&gt;the line number on which the error occured.&lt;/li&gt;&lt;/ol&gt;&lt;/p&gt;
&lt;p&gt;If the event handler returns true, it signifies that the event was handled, and the browser raises no errors.&lt;/p&gt;&lt;p&gt;For more information, see: &lt;ul&gt;&lt;li&gt;[http://msdn2.microsoft.com/en-us/library/ms536930.aspx msdn - onerror Event]&lt;/li&gt;&lt;li&gt;[http://developer.mozilla.org/en/docs/DOM:window.onerror Gecko DOM Reference - onerror Event]&lt;/li&gt;&lt;li&gt;[http://developer.mozilla.org/en/docs/DOM:event Gecko DOM Reference - Event object]&lt;/li&gt;&lt;li&gt;[http://en.wikipedia.org/wiki/DOM_Events Wikipedia: DOM Events]&lt;/ul&gt;&lt;/p&gt;
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>fn (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
An event handler function to bind to the error event.
&lt;pre&gt;function callback(eventObject) {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
To keep a server-side log of JavaScript errors, you might want to:
</p>
<pre>
<code class="javascript">$(window).error(function(msg, url, line){
jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
</code>
</pre>
<h2>Example:</h2>
<p>
To hide JavaScript errors from the user, you can try:
</p>
<pre>
<code class="javascript">$(window).error(function(){
return true;
});
</code>
</pre>
<h2>Example:</h2>
<p>
To hide the "broken image" icons for your IE users, you can try:
</p>
<pre>
<code class="javascript">$("img").error(function(){
$(this).hide();
});
</code>
</pre>
</d:entry>
<d:entry id="id4603643" d:title="Selectors/even()">
<d:index d:value="even" d:title="Selectors/even()"/>
<p class="title">Selectors/even()</p>
<p>
Matches even elements, zero-indexed. See also odd
</p>
<p>
</p>
<h2>Example:</h2>
<p>
Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).
</p>
<pre>
<code class="javascript">$("tr:even").css("background-color", "#bbbbff");
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;table border="1"&gt;
&lt;tr&gt;&lt;td&gt;Row with Index #0&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Row with Index #1&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Row with Index #2&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Row with Index #3&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4668505" d:title="Effects/fadeIn(speed, callback)">
<d:index d:value="fadeIn" d:title="Effects/fadeIn(speed, callback)"/>
<p class="title">Effects/fadeIn(speed, callback)</p>
<p>
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
</p>
<p>
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>speed (<span class="arg-type" title="">String, Number </span>)</span>
-
A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000). As of jQuery 1.2.6, "normal" or any other string works the same as "def" (400ms).
</li>
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to be executed whenever the animation completes, executes once for each element animated against.
&lt;pre&gt;function callback() {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
</p>
<pre>
<code class="javascript">$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;span&gt;Click here...&lt;/span&gt;
&lt;div id="one"&gt;&lt;/div&gt;
&lt;div id="two"&gt;&lt;/div&gt;
&lt;div id="three"&gt;&lt;/div&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.
</p>
<pre>
<code class="javascript">$("a").click(function () {
$("div").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (&lt;a href="#"&gt;click!&lt;/a&gt;)
&lt;div&gt;&lt;span&gt;CENSORED!&lt;/span&gt;&lt;/div&gt;
&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4668618" d:title="Effects/fadeOut(speed, callback)">
<d:index d:value="fadeOut" d:title="Effects/fadeOut(speed, callback)"/>
<p class="title">Effects/fadeOut(speed, callback)</p>
<p>
Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
</p>
<p>
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.
</p>
<h2>Params</h2>
<p>
<ul class="params">
<li><span>speed (<span class="arg-type" title="">String, Number </span>)</span>
-
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
</li>
<li><span>callback (<span class="arg-type" title="A reference to a Javascript function.">Function</span>)</span>
-
A function to be executed whenever the animation completes, executes once for each element animated against.
&lt;pre&gt;function callback() {
this; // dom element
}
&lt;/pre&gt;
</li>
</ul>
</p>
<h2>Example:</h2>
<p>
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
</p>
<pre>
<code class="javascript">$("p").click(function () {
$("p").fadeOut("slow");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;p&gt;
If you click on this paragraph
you'll see it just fade away.
&lt;/p&gt;
</code>
</pre>
<h2>Example:</h2>
<p>
Fades out spans in one section that you click on.
</p>
<pre>
<code class="javascript">$("span").click(function () {
$(this).fadeOut(1000, function () {
$("div").text("'" + $(this).text() + "' has faded!");
$(this).remove();
});
});
$("span").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
</code>
</pre>
<h3>HTML:</h3>
<pre>
<code class="html"> &lt;h3&gt;Find the modifiers - &lt;div&gt;&lt;/div&gt;&lt;/h3&gt;
&lt;p&gt;
If you &lt;span&gt;really&lt;/span&gt; want to go outside
&lt;span&gt;in the cold&lt;/span&gt; then make sure to wear
your &lt;span&gt;warm&lt;/span&gt; jacket given to you by
your &lt;span&gt;favorite&lt;/span&gt; teacher.
&lt;/p&gt;
</code>
</pre>
</d:entry>
<d:entry id="id4668731" d:title="Effects/fadeTo(speed, opacity, callback)">
<d:index d:value="fadeTo" d:title="Effects/fadeTo(speed, opacity, callback)"/>
<p class="title">Effects/fadeTo(speed, opacity, callback)</p>
<p>
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
</p>
<p>
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.