-
add( String, DOMElement, Array<DOMElement> expr ) returns jQuery
Adds more elements, matched by the given expression, to the set of matched elements.
Example:
Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.
$("div").css("border", "2px solid red") .add("p") .css("background", "yellow");HTML:
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p>Added this... (notice no border)</p>Example:
Adds more elements, matched by the given expression, to the set of matched elements.
$("p").add("span").css("background", "yellow");HTML:
<p>Hello</p><span>Hello Again</span>Example:
Adds more elements, created on the fly, to the set of matched elements.
$("p").clone().add("<span>Again</span>").appendTo(document.body);HTML:
<p>Hello</p>Example:
Adds one or more Elements to the set of matched elements.
$("p").add(document.getElementById("a")).css("background", "yellow");HTML:
<p>Hello</p><span id="a">Hello Again</span> -
addClass( String class ) returns jQuery
Adds the specified class(es) to each of the set of matched elements.
Example:
Adds the class 'selected' to the matched elements.
$("p:last").addClass("selected");HTML:
<p>Hello</p> <p>and</p> <p>Goodbye</p>Example:
Adds the classes 'selected' and 'highlight' to the matched elements.
$("p:last").addClass("selected highlight");HTML:
<p>Hello</p> <p>and</p> <p>Goodbye</p> -
after( String, Element, jQuery content ) returns jQuery
Insert content after each of the matched elements.
Example:
Inserts some HTML after all paragraphs.
$("p").after("<b>Hello</b>");HTML:
<p>I would like to say: </p>Example:
Inserts a DOM element after all paragraphs.
$("p").after( document.createTextNode("Hello") );HTML:
<p>I would like to say: </p>Example:
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
$("p").after( $("b") );HTML:
<b>Hello</b> <p>I would like to say: </p> -
ajaxComplete( Function callback ) returns jQuery
Attach a function to be executed whenever an AJAX request completes. This is an <a href='Ajax_Events'>Ajax Event</a>.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.Example:
Show a message when an AJAX request completes.
$("#msg").ajaxComplete(function(request, settings){ $(this).append("<li>Request Complete.</li>"); }); -
ajaxError( Function callback ) returns jQuery
Attach a function to be executed whenever an AJAX request fails. This is an <a href='Ajax_Events'>Ajax Event</a>.
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.Example:
Show a message when an AJAX request fails.
$("#msg").ajaxError(function(request, settings){ $(this).append("<li>Error requesting page " + settings.url + "</li>"); }); -
ajaxSend( Function callback ) returns jQuery
Attach a function to be executed before an AJAX request is sent. This is an <a href='Ajax_Events'>Ajax Event</a>.
The XMLHttpRequest and settings used for that request are passed as arguments to the callback.Example:
Show a message before an AJAX request is sent.
$("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>Starting request at " + settings.url + "</li>"); }); -
ajaxStart( Function callback ) returns jQuery
Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an <a href='Ajax_Events'>Ajax Event</a>.
Example:
Show a loading message whenever an AJAX request starts (and none is already active).
$("#loading").ajaxStart(function(){ $(this).show(); }); -
ajaxStop( Function callback ) returns jQuery
Attach a function to be executed whenever all AJAX requests have ended. This is an <a href='Ajax_Events'>Ajax Event</a>.
Example:
Hide a loading message after all the AJAX requests have stopped.
$("#loading").ajaxStop(function(){ $(this).hide(); }); -
ajaxSuccess( Function callback ) returns jQuery
Attach a function to be executed whenever an AJAX request completes successfully. This is an <a href='Ajax_Events'>Ajax Event</a>.
The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.Example:
Show a message when an AJAX request completes successfully.
$("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>Successful Request!</li>"); }); -
all( ) returns Array<Element>
Matches all elements.
Most useful when combined with a context to search in.Example:
Finds every element (including head, body, etc).
$("*").css("border","3px solid red");HTML:
<div>DIV</div> <span>SPAN</span> <p>P <button>Button</button></p>Example:
A common way to find all elements is to set the 'context' to document.body so elements like head, script, etc are left out.
$("*", document.body).css("border","3px solid red"); -
andSelf( ) returns jQuery
Add the previous selection to the current selection.
Useful for traversing elements, and then adding something that was matched before the last traversion.Example:
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().
$("div").find("p").andSelf().addClass("border"); $("div").find("p").addClass("background");HTML:
<div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> -
animate( Options params, Options options ) returns jQuery
A function for making your own, custom animations.
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").
Note that properties should be specified using camel case eg. marginLeft instead of margin-left.
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.Options
Example:
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.
$("#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:""}); });HTML:
<button id="go1">» Animate Block1</button> <button id="go2">» Animate Block2</button> <button id="go3">» Animate Both</button> <button id="go4">» Reset</button> <div id="block1">Block1</div> <div id="block2">Block2</div>Example:
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
$("p").animate({ "height": "toggle", "opacity": "toggle" }, { duration: "slow" });Example:
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").animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false });Example:
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").animate({ "opacity": "show" }, { "duration": "slow", "easing": "easein" }); -
animate( Options params, String, Number duration, String easing, Function callback ) returns jQuery
A function for making your own, custom animations.
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").
Note that properties should be specified using camel case eg. marginLeft instead of margin-left.
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 by animate()).
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 to move the element positively, or negatively, relative to the current position.Example:
Click the button to animate the div with a number of different properties.
// 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 ); });HTML:
<button id="go">» Run</button> <div id="block">Hello!</div>Example:
Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.
$("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){ $(".block").animate({"left": "-=50px"}, "slow"); });HTML:
<button id="left">«</button> <button id="right">»</button> <div class="block"></div>Example:
Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.
$("p").animate({ "height": "toggle", "opacity": "toggle" }, "slow");Example:
Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.
$("p").animate({ "left": "50", "opacity": 1 }, 500);Example:
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").animate({ "opacity": "show" }, "slow", "easein"); -
animated( ) returns Array<Element>
Matches all elements that are currently being animated.
Example:
Change the color of any div that is animated.
$("#run").click(function(){ $("div:animated").toggleClass("colored"); }); function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt();HTML:
<button id="run">Run</button> <div></div> <div id="mover"></div> <div></div> -
append( String, Element, jQuery content ) returns jQuery
Append content to the inside of every matched element.
This operation is similar to doing an appendChild to all the specified elements, adding them into the document.Example:
Appends some HTML to all paragraphs.
$("p").append("<b>Hello</b>");HTML:
<p>I would like to say: </p>Example:
Appends an Element to all paragraphs.
$("p").append(document.createTextNode("Hello"));HTML:
<p>I would like to say: </p>Example:
Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
$("p").append( $("b") );HTML:
<b>Hello</b><p>I would like to say: </p> -
appendTo( String content ) returns jQuery
Append all of the matched elements to another, specified, set of elements.
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.Example:
Appends all spans to the element with the ID "foo"
$("span").appendTo("#foo"); // check append() examplesHTML:
<span>I have nothing more to say... </span> <div id="foo">FOO! </div> -
attr( String name ) returns Object
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.
Example:
Finds the title attribute of the first <em> in the page.
var title = $("em").attr("title"); $("div").text(title);HTML:
<p> Once there was a <em title="huge, gigantic">large</em> dinosaur... </p> The title of the emphasis is:<div></div> -
attr( Map properties ) returns jQuery
Set a key/value object as properties to all matched elements.
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 ).Example:
Set some attributes for all <img>s in the page.
$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $("div").text($("img").attr("alt"));HTML:
<img /> <img /> <img /> <div></div> -
attr( String key, Object value ) returns jQuery
Set a single property to a value, on all matched elements.
Example:
Disables buttons greater than the 0th button.
$("button:gt(0)").attr("disabled","disabled");HTML:
<button>0th Button</button> <button>1st Button</button> <button>2nd Button</button> -
attr( String key, Function fn ) returns jQuery
Set a single property to a computed value, on all matched elements.
Instead of supplying a string value as described <a href='#keyvalue'>above</a>, a function is provided that computes the value.Example:
Sets id for divs based on the position in the page.
$("div").attr("id", function (arr) { return "div-id" + arr[0]; }) .each(function () { $("span", this).html("(ID = '<b>" + this.id + "</b>')"); });HTML:
<div>Zero-th <span></span></div> <div>First <span></span></div> <div>Second <span></span></div>Example:
Sets src attribute from title attribute on the image.
$("img").attr("src", function() { return "/images/" + this.title; });HTML:
<img title="hat.gif"/> <img title="hat-old.gif"/> <img title="hat2-old.gif"/> -
attributeContains( String attribute, String value ) returns Array<Element>
Matches elements that have the specified attribute and it contains a certain value.
Example:
Finds all inputs that with a name attribute that contains 'man' and sets the value with some text.
$("input[name*='man']").val("has man in it!");HTML:
<input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> -
attributeEndsWith( String attribute, String value ) returns Array<Element>
Matches elements that have the specified attribute and it ends with a certain value.
Example:
Finds all inputs with an attribute name that ends with 'letter' and puts text in them.
$("input[name$='letter']").val("a letter");HTML:
<input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> -
attributeEquals( String attribute, String value ) returns Array<Element>
Matches elements that have the specified attribute with a certain value.
Example:
Finds all inputs with name 'newsletter' and changes the text of the span next to it.
$("input[name='newsletter']").next().text(" is newsletter");HTML:
<div> <input type="radio" name="newsletter" value="Hot Fuzz" /> <span>name?</span> </div> <div> <input type="radio" name="newsletter" value="Cold Fusion" /> <span>name?</span> </div> <div> <input type="radio" name="accept" value="Evil Plans" /> <span>name?</span> </div> -
attributeHas( String attribute ) returns Array<Element>
Matches elements that have the specified attribute.
Example:
Bind a single click that adds the div id to its text.
$("div[id]").one("click", function(){ var idString = $(this).text() + " = " + $(this).attr("id"); $(this).text(idString); });HTML:
<div>no id</div> <div id="hey">with id</div> <div id="there">has an id</div> <div>nope</div> -
attributeMultiple( Selector selector1, Selector selector2, Selector selectorN ) returns Array<Element>
Matches elements that have the specified attribute and it contains a certain value.
Example:
Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.
$("input[id][name$='man']").val("only this one");HTML:
<input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /> -
attributeNotEqual( String attribute, String value ) returns Array<Element>
Matches elements that don't have the specified attribute with a certain value.
Example:
Finds all inputs that don't have the name 'newsletter' and changes the text of the span next to it.
$("input[name!='newsletter']").next().text(" is not newsletter");HTML:
<div> <input type="radio" name="newsletter" value="Hot Fuzz" /> <span>name?</span> </div> <div> <input type="radio" name="newsletter" value="Cold Fusion" /> <span>name?</span> </div> <div> <input type="radio" name="accept" value="Evil Plans" /> <span>name?</span> </div> -
attributeStartsWith( String attribute, String value ) returns Array<Element>
Matches elements that have the specified attribute and it starts with a certain value.
Example:
Finds all inputs with an attribute name that starts with 'news' and puts text in them.
$("input[name^='news']").val("news here!");HTML:
<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />