searchcode logo

List Of Jquery Functions

: . A C D D E E H I J M N

:animated Selector

Select all elements that are in the progress of an animation at the time the selector is run.

<script> $("#run").click(function(){ $("div:animated").toggleClass("colored"); }); function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt();
</script>

http://api.jquery.com/animated-selector/

:button Selector

Selects all button elements and elements of type button.

<script> 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
</script>

http://api.jquery.com/button-selector/

:checkbox Selector

Selects all elements of type checkbox. $(':checkbox') is equivalent to $('[type=checkbox]'). As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':checkbox') is equivalent to $('*:checkbox'), so $('input:checkbox') should be used instead.

<script> var input = $("form input:checkbox").wrap('<span></span>').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
</script>

http://api.jquery.com/checkbox-selector/

:checked Selector

Matches all elements that are checked. The :checked selector works for checkboxes and radio buttons. For select elements, use the :selected selector.

<script> function countChecked() { var n = $("input:checked").length; $("div").text(n + (n <= 1 ? " is" : " are") + " checked!"); } countChecked(); $(":checkbox").click(countChecked);
</script>

http://api.jquery.com/checked-selector/

:contains() Selector

Select all elements that contain the specified text. The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.

<script>
$("div:contains('John')").css("text-decoration", "underline"); </script>

http://api.jquery.com/contains-selector/

:disabled Selector

Selects all elements that are disabled. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':disabled') is equivalent to $('*:disabled'), so $('input:disabled') should be used instead.

<script>$("input:disabled").val("this is it");</script>

http://api.jquery.com/disabled-selector/

:empty Selector

Select all elements that have no children (including text nodes). This is the inverse of :parent.

<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

http://api.jquery.com/empty-selector/

:enabled Selector

Selects all elements that are enabled. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':enabled') is equivalent to $('*:enabled'), so $('input:enabled') should be used instead.

<script>$("input:enabled").val("this is it");</script>

http://api.jquery.com/enabled-selector/

:eq() Selector

Select the element at index n within the matched set. The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.

<script>$("td:eq(2)").css("color", "red");</script>

http://api.jquery.com/eq-selector/

:even Selector

Selects even elements, zero-indexed. See also odd. In particular, note that the 0-based indexing means that, counter-intuitively, :even selects the first element, third element, and so on within the matched set.

<script>$("tr:even").css("background-color", "#bbbbff");</script>

http://api.jquery.com/even-selector/

:file Selector

Selects all elements of type file. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':file') is equivalent to $('*:file'), so $('input:file') should be used instead.

<script> var input = $("input:file").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
</script>

http://api.jquery.com/file-selector/

:first Selector

Selects the first matched element. The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.

<script>$("tr:first").css("font-style", "italic");</script>

http://api.jquery.com/first-selector/

:first-child Selector

Selects all elements that are the first child of their parent. While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).

<script> $("div span:first-child") .css("text-decoration", "underline") .hover(function () { $(this).addClass("sogreen"); }, function () { $(this).removeClass("sogreen"); });
</script>

http://api.jquery.com/first-child-selector/

:gt() Selector

Select all elements at an index greater than index within the matched set. index-related selectors

<script>$("td:gt(4)").css("text-decoration", "line-through");</script>

http://api.jquery.com/gt-selector/

:has() Selector

Selects elements which contain at least one element that matches the specified selector. The expression $('div:has(p)') matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.

<script>$("div:has(p)").addClass("test");</script>

http://api.jquery.com/has-selector/

:header Selector

Selects all elements that are headers, like h1, h2, h3 and so on.

<script>$(":header").css({ background:'#CCC', color:'blue' });</script>

http://api.jquery.com/header-selector/

:hidden Selector

Selects all elements that are hidden. Elements can be considered hidden for several reasons:

<script> // in some browsers :hidden includes head, title, script, etc... so limit to body $("span:first").text("Found " + $(":hidden", document.body).length + " hidden elements total."); $("div:hidden").show(3000); $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>

http://api.jquery.com/hidden-selector/

:image Selector

Selects all elements of type image.

<script> var input = $("input:image").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
</script>

http://api.jquery.com/image-selector/

:input Selector

Selects all input, textarea, select and button elements. The :input selector basically selects all form controls.

<script> var allInputs = $(":input"); var formChildren = $("form > *"); $("#messages").text("Found " + allInputs.length + " inputs and the form has " + formChildren.length + " children."); // so it won't submit $("form").submit(function () { return false; });
</script>

http://api.jquery.com/input-selector/

:last Selector

Selects the last matched element. Note that :last selects a single element by filtering the current jQuery collection and matching the last element within it.

<script>$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});</script>

http://api.jquery.com/last-selector/

:last-child Selector

Selects all elements that are the last child of their parent. While :last matches only a single element, :last-child can match more than one: one for each parent.

<script> $("div span:last-child") .css({color:"red", fontSize:"80%"}) .hover(function () { $(this).addClass("solast"); }, function () { $(this).removeClass("solast"); });
</script>

http://api.jquery.com/last-child-selector/

:lt() Selector

Select all elements at an index less than index within the matched set. index-related selectors

<script>$("td:lt(4)").css("color", "red");</script>

http://api.jquery.com/lt-selector/

:not() Selector

Selects all elements that do not match the given selector. All selectors are accepted inside :not(), for example: :not(div a) and :not(div,a).

<script> $("input:not(:checked) + span").css("background-color", "yellow"); $("input").attr("disabled", "disabled");
</script>

http://api.jquery.com/not-selector/

:nth-child() Selector

Selects all elements that are the nth-child of their parent. Because jQuery's implementation of :nth-child(n) is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript's "0-indexed" counting. Therefore, given a single <ul> containing two <li>s, $('li:nth-child(1)') selects the first <li> while $('li:eq(1)') selects the second.

<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

http://api.jquery.com/nth-child-selector/

:odd Selector

Selects odd elements, zero-indexed. See also even. In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

<script>$("tr:odd").css("background-color", "#bbbbff");</script>

http://api.jquery.com/odd-selector/

:only-child Selector

Selects all elements that are the only child of their parent. If the parent has other child elements, nothing is matched.

<script>$("div button:only-child").text("Alone").css("border", "2px blue solid");</script>

http://api.jquery.com/only-child-selector/

:parent Selector

Select all elements that are the parent of another element, including text nodes. This is the inverse of :empty.

<script>$("td:parent").fadeTo(1500, 0.3);</script>

http://api.jquery.com/parent-selector/

:password Selector

Selects all elements of type password. $(':password') is equivalent to $('[type=password]'). As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':password') is equivalent to $('*:password'), so $('input:password') should be used instead.

<script> var input = $("input:password").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
</script>

http://api.jquery.com/password-selector/

:radio Selector

Selects all elements of type radio. $(':radio') is equivalent to $('[type=radio]'). As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':radio') is equivalent to $('*:radio'), so $('input:radio') should be used instead.

<script> var input = $("form input:radio").wrap('<span></span>').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
</script>

http://api.jquery.com/radio-selector/

:reset Selector

Selects all elements of type reset.

<script> var input = $("input:reset").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
</script>

http://api.jquery.com/reset-selector/

:selected Selector

Selects all elements that are selected. The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them.

<script> $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .trigger('change');
</script>

http://api.jquery.com/selected-selector/

:submit Selector

Selects all elements of type submit. The :submit selector typically applies to button or input elements. Note that some browsers treat <button> element as type="default" implicitly while others (such as Internet Explorer) do not.

<script> var submitEl = $("td :submit") .parent('td') .css({background:"yellow", border:"3px red solid"}) .end(); $('#result').text('jQuery matched ' + submitEl.length + ' elements.'); // so it won't submit $("form").submit(function () { return false; }); // Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector $('#exampleTable').find('td').each(function(i, el) { var inputEl = $(el).children(), inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : ''; $(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>'); })
</script>

http://api.jquery.com/submit-selector/

:text Selector

Selects all elements of type text. $(':text') is equivalent to $('[type=text]') and thus selects all <input type="text"> elements. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare $(':text') is equivalent to $('*:text'), so $('input:text') should be used instead.

<script> var input = $("form input:text").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
</script>

http://api.jquery.com/text-selector/

:visible Selector

Selects all elements that are visible. Elements can be considered hidden for several reasons:

<script> $("div:visible").click(function () { $(this).css("background", "yellow"); }); $("button").click(function () { $("div:hidden").show("fast"); });
</script>

http://api.jquery.com/visible-selector/



.


.add()

Add elements to the set of matched elements. Given a jQuery object that represents a set of DOM elements, the .add() method constructs a new jQuery object from the union of those elements and the ones passed into the method. The argument to .add() can be pretty much anything that $() accepts, including a jQuery selector expression, references to DOM elements, or an HTML snippet.

<script>
$("div").css("border", "2px solid red") .add("p") .css("background", "yellow");
</script>

http://api.jquery.com/add/

.addClass()

Adds the specified class(es) to each of the set of matched elements. It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

<script>$("p:last").addClass("selected");</script>

http://api.jquery.com/addClass/

.after()

Insert content, specified by the parameter, after each element in the set of matched elements. The .after() and .insertAfter() methods perform the same task. The major difference is in the syntaxspecifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted. With .insertAfter(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.

<script>$("p").after("<b>Hello</b>");</script>

http://api.jquery.com/after/

.ajaxComplete()

Register a handler to be called when Ajax requests complete. This is an Ajax Event. Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

$("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>Request Complete.</li>"); });

http://api.jquery.com/ajaxComplete/

.ajaxError()

Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time.

$("#msg").ajaxError(function(event, request, settings){ $(this).append("<li>Error requesting page " + settings.url + "</li>"); });

http://api.jquery.com/ajaxError/

.ajaxSend()

Attach a function to be executed before an Ajax request is sent. This is an Ajax Event. Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time.

$("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>Starting request at " + settings.url + "</li>"); });

http://api.jquery.com/ajaxSend/

.ajaxStart()

Register a handler to be called when the first Ajax request begins. This is an Ajax Event. Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

$("#loading").ajaxStart(function(){ $(this).show(); });

http://api.jquery.com/ajaxStart/

.ajaxStop()

Register a handler to be called when all Ajax requests have completed. This is an Ajax Event. Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

$("#loading").ajaxStop(function(){ $(this).hide(); });

http://api.jquery.com/ajaxStop/

.ajaxSuccess()

Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event. Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

$("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>Successful Request!</li>"); });

http://api.jquery.com/ajaxSuccess/

.andSelf()

Add the previous set of elements on the stack to the current set. As described in the discussion for .end(), jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, .andSelf() can help.

<script> $("div").find("p").andSelf().addClass("border"); $("div").find("p").addClass("background");
</script>

http://api.jquery.com/andSelf/

.animate()

Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

<script>
/* 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 );
});
</script>

http://api.jquery.com/animate/

.append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements. The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

<script> $("p").append("<strong>Hello</strong>");
</script>

http://api.jquery.com/append/

.appendTo()

Insert every element in the set of matched elements to the end of the target. The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

<script>$("span").appendTo("#foo"); // check append() examples</script>

http://api.jquery.com/appendTo/

.attr()

Get the value of an attribute for the first element in the set of matched elements. The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

<script>
var title = $("em").attr("title"); $("div").text(title);
</script>

http://api.jquery.com/attr/

.before()

Insert content, specified by the parameter, before each element in the set of matched elements. The .before() and .insertBefore() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .before(), the selector expression preceding the method is the container before which the content is inserted. With .insertBefore(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.

<script>$("p").before("<b>Hello</b>");</script>

http://api.jquery.com/before/

.bind()

Attach a handler to an event for the elements. The .bind() method is the primary means of attaching behavior to a document. All JavaScript event types, such as focus, mouseover, and resize, are allowed for eventType. (The beforeunload and error events on the window object use nonstandard conventions and are not supported by jQuery; attach a handler directly to the window object instead.)

<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});
</script>

http://api.jquery.com/bind/

.blur()

Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('blur', handler) in the first two variations, and .trigger('blur') in the third.

$("p").blur();

http://api.jquery.com/blur/

.change()

Bind an event handler to the "change" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('change', handler) in the first two variations, and .trigger('change') in the third.

<script> $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .change();
</script>

http://api.jquery.com/change/

.children()

Get the children of each element in the set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .children() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree. Note also that like most jQuery methods, .children() does not return text nodes; to get all children including text and comment nodes, use .contents().

<script> $("#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; });
</script>

http://api.jquery.com/children/

.clearQueue()

Remove from the queue all items that have not yet been run. When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.

<script>$("#start").click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},5000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:'-=200'},1500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp();
});
$("#stop").click(function () { $("div").clearQueue(); $("div").stop();
});</script>

http://api.jquery.com/clearQueue/

.click()

Bind an event handler to the "click" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('click', handler) in the first two variations, and .trigger('click') in the third.

<script> $("p").click(function () { $(this).slideUp(); }); $("p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); });
</script>

http://api.jquery.com/click/

.clone()

Create a deep copy of the set of matched elements. The .clone() method performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. When used in conjunction with one of the insertion methods, .clone() is a convenient way to duplicate elements on a page. Consider the following HTML:

<script> $("b").clone().prependTo("p");
</script>

http://api.jquery.com/clone/

.closest()

Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree. Given a jQuery object that represents a set of DOM elements, the .closest() method allows us to search through these elements and their ancestors in the DOM tree and construct a new jQuery object from the matching elements. The .parents() and .closest() methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:

<script> $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight"); });
</script>

http://api.jquery.com/closest/

.contents()

Get the children of each element in the set of matched elements, including text and comment nodes. Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.

<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>

http://api.jquery.com/contents/

.context

The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document. The .live() method for binding event handlers uses this property to determine the root element to use for its event delegation needs. Plug-ins which perform similar tasks may also find the property useful.

<script>$("ul") .append("<li>" + $("ul").context + "</li>") .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
</script>

http://api.jquery.com/context/

.dblclick()

Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('dblclick', handler) in the first two variations, and .trigger('dblclick') in the third. The dblclick event is sent to an element when the element is double-clicked. Any HTML element can receive this event. For example, consider the HTML:

$("p").dblclick( function () { alert("Hello World!"); });

http://api.jquery.com/dblclick/

.delay()

Set a timer to delay execution of subsequent items in the queue. Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

<script> $("button").click(function() { $("div.first").slideUp(300).delay(800).fadeIn(400); $("div.second").slideUp(300).fadeIn(400); });
</script>

http://api.jquery.com/delay/

.delegate()

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. Delegate is an alternative to using the .live() method, allowing for each binding of event delegation to specific DOM elements. For example the following delegate code:

<script> $("body").delegate("p", "click", function(){ $(this).after("<p>Another paragraph!</p>"); });
</script>

http://api.jquery.com/delegate/

.dequeue()

Execute the next function on the queue for the matched elements. When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.

<script>
$("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);
});
</script>

http://api.jquery.com/dequeue/

.detach()

Remove the set of matched elements from the DOM. The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

<script> $("p").click(function(){ $(this).toggleClass("off"); }); var p; $("button").click(function(){ if ( p ) { p.appendTo("body"); p = null; } else { p = $("p").detach(); } });</script>

http://api.jquery.com/detach/

.die()

Remove all event handlers previously attached using .live() from the elements. Any handler that has been attached with .live() can be removed with .die(). This method is analogous to calling .unbind() with no arguments, which is used to remove all handlers attached with .bind(). See the discussions of .live() and .unbind() for further details.

http://api.jquery.com/die/

.each()

Iterate over a jQuery object, executing a function for each matched element. The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

<script> $(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); });</script>

http://api.jquery.com/each/

.empty()

Remove all child nodes of the set of matched elements from the DOM. This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:

<script> $("button").click(function () { $("p").empty(); });
</script>

http://api.jquery.com/empty/

.end()

End the most recent filtering operation in the current chain and return the set of matched elements to its previous state. Most of jQuery's DOM traversal methods operate on a jQuery object instance and produce a new one, matching a different set of DOM elements. When this happens, it is as if the new set of elements is pushed onto a stack that is maintained inside the object. Each successive filtering method pushes a new element set onto the stack. If we need an older element set, we can use end() to pop the sets back off of the stack.

<script> 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");
</script>

http://api.jquery.com/end/

.eq()

Reduce the set of matched elements to the one at the specified index. Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.

<script> $("body").find("div").eq(2).addClass("blue");
</script>

http://api.jquery.com/eq/

.error()

Bind an event handler to the "error" JavaScript event. This method is a shortcut for .bind('error', handler).

$("img").error(function(){ $(this).hide();
});

http://api.jquery.com/error/

.fadeIn()

Display the matched elements by fading them to opaque. The .fadeIn() method animates the opacity of the matched elements.

<script> $(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); }); </script>

http://api.jquery.com/fadeIn/

.fadeOut()

Hide the matched elements by fading them to transparent. The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

<script> $("p").click(function () { $("p").fadeOut("slow"); }); </script>

http://api.jquery.com/fadeOut/

.fadeTo()

Adjust the opacity of the matched elements. The .fadeTo() method animates the opacity of the matched elements.

<script>
$("p:first").click(function () {
$(this).fadeTo("slow", 0.33);
});
</script>

http://api.jquery.com/fadeTo/

.fadeToggle()

Display or hide the matched elements by animating their opacity. The .fadeToggle() method animates the opacity of the matched elements. When called on a visible element, the element's display style property is set to none once the opacity reaches 0, so the element no longer affects the layout of the page.

<script>
$("button:first").click(function() { $("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () { $("p:last").fadeToggle("fast", function () { $("#log").append("<div>finished</div>"); });
});
</script>

http://api.jquery.com/fadeToggle/

.filter()

Reduce the set of matched elements to those that match the selector or pass the function's test. Given a jQuery object that represents a set of DOM elements, the .filter() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; all elements matching the selector will be included in the result.

<script> $("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red");
</script>

http://api.jquery.com/filter/

.find()

Get the descendants of each element in the current set of matched elements, filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

<script> $("p").find("span").css('color','red');
</script>

http://api.jquery.com/find/

.first()

Reduce the set of matched elements to the first in the set. Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first matching element.

<script>$("p span").first().addClass('highlight');</script>

http://api.jquery.com/first/

.focus()

Bind an event handler to the "focus" JavaScript event, or trigger that event on an element. For example, consider the HTML:

<script> $("input").focus(function () { $(this).next("span").css('display','inline').fadeOut(1000); });
</script>

http://api.jquery.com/focus/

.focusin()

Bind an event handler to the "focusin" JavaScript event. This method is a shortcut for .bind('focusin', handler).

<script> $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
</script>

http://api.jquery.com/focusin/

.focusout()

Bind an event handler to the "focusout" JavaScript event. This method is a shortcut for .bind('focusout', handler).

<script>
var fo = 0, b = 0;
$("p").focusout(function() { fo++; $("#fo") .text("focusout fired: " + fo + "x");
}).blur(function() { b++; $("#b") .text("blur fired: " + b + "x");
});
</script>

http://api.jquery.com/focusout/

.get()

Retrieve the DOM elements matched by the jQuery object. The .get() method grants us access to the DOM nodes underlying each jQuery object. Suppose we had a simple unordered list on the page:

<script> function disp(divs) { var a = []; for (var i = 0; i < divs.length; i++) { a.push(divs[i].innerHTML); } $("span").text(a.join(" ")); } disp( $("div").get().reverse() );
</script>

http://api.jquery.com/get/

.has()

Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element. Given a jQuery object that represents a set of DOM elements, the .has() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against the descendants of the matching elements; the element will be included in the result if any of its descendant elements matches the selector.

<script> $("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>"); $("ul").has("li").addClass("full");
</script>

http://api.jquery.com/has/

.hasClass()

Determine whether any of the matched elements are assigned the given class. Elements may have more than one class assigned to them. In HTML, this is represented by separating the class names with a space:

<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>

http://api.jquery.com/hasClass/

.height()

Get the current computed height for the first element in the set of matched elements. The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation.

<script> function showHeight(ele, h) { $("div").text("The height for the " + ele + " is " + h + "px."); } $("#getp").click(function () { showHeight("paragraph", $("p").height()); }); $("#getd").click(function () { showHeight("document", $(document).height()); }); $("#getw").click(function () { showHeight("window", $(window).height()); });
</script>

http://api.jquery.com/height/

.hide()

Hide the matched elements. With no parameters, the .hide() method is the simplest way to hide an element:

<script> $("p").hide(); $("a").click(function () { $(this).hide(); return true; });
</script>

http://api.jquery.com/hide/

.hover()

Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

<script>
$("li").hover( function () { $(this).append($("<span> ***</span>")); }, function () { $(this).find("span:last").remove(); }
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>

http://api.jquery.com/hover/

.html()

Get the HTML contents of the first element in the set of matched elements. This method is not available on XML documents.

<script> $("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });
</script>

http://api.jquery.com/html/

.index()

Search for a given element from among the matched elements. If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

<script>
$("div").click(function () { // this is the dom element clicked var index = $("div").index(this); $("span").text("That was div index #" + index);
});
</script>

http://api.jquery.com/index/

.innerHeight()

Get the current computed height for the first element in the set of matched elements, including padding but not border. This method returns the height of the element, including top and bottom padding, in pixels.

<script>var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );</script>

http://api.jquery.com/innerHeight/

.innerWidth()

Get the current computed width for the first element in the set of matched elements, including padding but not border. This method returns the width of the element, including left and right padding, in pixels.

<script>var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );</script>

http://api.jquery.com/innerWidth/

.insertAfter()

Insert every element in the set of matched elements after the target. The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted. With .insertAfter(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.

<script>$("p").insertAfter("#foo"); // check after() examples</script>

http://api.jquery.com/insertAfter/

.insertBefore()

Insert every element in the set of matched elements before the target. The .before() and .insertBefore() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .before(), the selector expression preceding the method is the container before which the content is inserted. With .insertBefore(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.

<script>$("p").insertBefore("#foo"); // check before() examples</script>

http://api.jquery.com/insertBefore/

.is()

Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector. Unlike the other filtering methods, .is() does not create a new jQuery object. Instead, it allows you to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.

<script> $("div").one('click', function () { if ($(this).is(":first-child")) { $("p").text("It's the first div."); } else if ($(this).is(".blue,.red")) { $("p").text("It's a blue or red div."); } else if ($(this).is(":contains('Peter')")) { $("p").text("It's Peter!"); } else { $("p").html("It's nothing <em>special</em>."); } $("p").hide().slideDown("slow"); $(this).css({"border-style": "inset", cursor:"default"}); });
</script>

http://api.jquery.com/is/

.jquery

A string containing the jQuery version number. The .jquery property is assigned to the jQuery prototype, commonly referred to by its alias $.fn. It is a string containing the version number of jQuery, such as "1.5.0" or "1.4.4".

var a = { what: "A regular JS object" }, b = $('body');
if ( a.jquery ) { // falsy, since it's undefined alert(' a is a jQuery object! ');
}
if ( b.jquery ) { // truthy, since it's a string alert(' b is a jQuery object! ');
}

http://api.jquery.com/.jquery/

.keydown()

Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('keydown', handler) in the first and second variations, and .trigger('keydown') in the third.

<script>
var xTriggered = 0;
$('#target').keydown(function(event) { if (event.keyCode == '13') { event.preventDefault(); } xTriggered++; var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).'; $.print(msg, 'html'); $.print(event);
});
$('#other').click(function() { $('#target').keydown();
});</script>

http://api.jquery.com/keydown/

.keypress()

Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('keypress', handler) in the first two variations, and .trigger('keypress') in the third.

<script>
var xTriggered = 0;
$('#target').keypress(function(event) { if (event.which == '13') { event.preventDefault(); } xTriggered++; var msg = 'Handler for .keypress() called ' + xTriggered + ' time(s).'; $.print(msg, 'html'); $.print(event);
});
$('#other').click(function() { $('#target').keypress();
});</script>

http://api.jquery.com/keypress/

.keyup()

Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('keyup', handler) in the first two variations, and .trigger('keyup') in the third.

<script>
var xTriggered = 0;
$('#target').keyup(function(event) { if (event.keyCode == '13') { event.preventDefault(); } xTriggered++; var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).'; $.print(msg, 'html'); $.print(event);
});
$('#other').click(function() { $('#target').keyup();
});</script>

http://api.jquery.com/keyup/

.last()

Reduce the set of matched elements to the final one in the set. Given a jQuery object that represents a set of DOM elements, the .last() method constructs a new jQuery object from the last matching element.

<script>$("p span").last().addClass('highlight');</script>

http://api.jquery.com/last/

.length

The number of elements in the jQuery object. The number of elements currently matched. The .size() method will return the same value.

<script>$(document.body).click(function () { $(document.body).append($("<div>")); var n = $("div").length; $("span").text("There are " + n + " divs." + "Click to add more."); }).trigger('click'); // trigger the click to start</script>

http://api.jquery.com/length/

.live()

Attach a handler to the event for all elements which match the current selector, now and in the future. This method is a variation on the basic .bind() method for attaching event handlers to elements. When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call. For instance, consider the HTML:

<script> $("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); });
</script>

http://api.jquery.com/live/

.load()

Load data from the server and place the returned HTML into the matched element. This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:

<script> $("#new-nav").load("/ #jq-footerNavigation li");
</script>

http://api.jquery.com/load/

.load()

Bind an event handler to the "load" JavaScript event. This method is a shortcut for .bind('load', handler).

$(window).load(function () { // run code
});

http://api.jquery.com/load-event/

.map()

Pass each element in the current matched set through a function, producing a new jQuery object containing the return values. As the return value is a jQuery-wrapped array, it's very common to get() the returned object to work with a basic array.

<script> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );
</script>

http://api.jquery.com/map/

.mousedown()

Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('mousedown', handler) in the first variation, and .trigger('mousedown') in the second.

<script> $("p").mouseup(function(){ $(this).append('<span style="color:#F00;">Mouse up.</span>'); }).mousedown(function(){ $(this).append('<span style="color:#00F;">Mouse down.</span>'); });
</script>

http://api.jquery.com/mousedown/

.mouseenter()

Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element. This method is a shortcut for .bind('mouseenter', handler) in the first two variations, and .trigger('mouseenter') in the third.

<script> var i = 0; $("div.overout").mouseover(function(){ $("p:first",this).text("mouse over"); $("p:last",this).text(++i); }).mouseout(function(){ $("p:first",this).text("mouse out"); }); var n = 0; $("div.enterleave").mouseenter(function(){ $("p:first",this).text("mouse enter"); $("p:last",this).text(++n); }).mouseleave(function(){ $("p:first",this).text("mouse leave"); });
</script>

http://api.jquery.com/mouseenter/

.mouseleave()

Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element. This method is a shortcut for .bind('mouseleave', handler) in the first two variations, and .trigger('mouseleave') in the third.

<script> var i = 0; $("div.overout").mouseover(function(){ $("p:first",this).text("mouse over"); }).mouseout(function(){ $("p:first",this).text("mouse out"); $("p:last",this).text(++i); }); var n = 0; $("div.enterleave").mouseenter(function(){ $("p:first",this).text("mouse enter"); }).mouseleave(function(){ $("p:first",this).text("mouse leave"); $("p:last",this).text(++n); });
</script>

http://api.jquery.com/mouseleave/

.mousemove()

Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('mousemove', handler) in the first two variations, and .trigger('mousemove') in the third.

<script> $("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });
</script>

http://api.jquery.com/mousemove/

.mouseout()

Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('mouseout', handler) in the first two variation, and .trigger('mouseout') in the third.

<script> var i = 0; $("div.overout").mouseout(function(){ $("p:first",this).text("mouse out"); $("p:last",this).text(++i); }).mouseover(function(){ $("p:first",this).text("mouse over"); }); var n = 0; $("div.enterleave").bind("mouseenter",function(){ $("p:first",this).text("mouse enter"); }).bind("mouseleave",function(){ $("p:first",this).text("mouse leave"); $("p:last",this).text(++n); });
</script>

http://api.jquery.com/mouseout/

.mouseover()

Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('mouseover', handler) in the first two variations, and .trigger('mouseover') in the third.

<script> var i = 0; $("div.overout").mouseover(function() { i += 1; $(this).find("span").text( "mouse over x " + i ); }).mouseout(function(){ $(this).find("span").text("mouse out "); }); var n = 0; $("div.enterleave").mouseenter(function() { n += 1; $(this).find("span").text( "mouse enter x " + n ); }).mouseleave(function() { $(this).find("span").text("mouse leave"); });
</script>

http://api.jquery.com/mouseover/

.mouseup()

Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('mouseup', handler) in the first variation, and .trigger('mouseup') in the second.

<script> $("p").mouseup(function(){ $(this).append('<span style="color:#F00;">Mouse up.</span>'); }).mousedown(function(){ $(this).append('<span style="color:#00F;">Mouse down.</span>'); });
</script>

http://api.jquery.com/mouseup/

.next()

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<script>$("button[disabled]").next().text("this button is disabled");</script>

http://api.jquery.com/next/

.nextAll()

Get all following siblings of each element in the set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .nextAll() method allows us to search through the successors of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<script>$("div:first").nextAll().addClass("after");</script>

http://api.jquery.com/nextAll/

.nextUntil()

Get all following siblings of each element up to but not including the element matched by the selector. Given a jQuery object that represents a set of DOM elements, the .nextUntil() method allows us to search through the successors of these elements in the DOM tree, stopping when it reaches an element matched by the method's argument. The new jQuery object that is returned contains all following siblings up to but not including the one matched by the .nextUntil() selector.

<script> $("#term-2").nextUntil("dt") .css("background-color", "red")
</script>

http://api.jquery.com/nextUntil/

.not()

Remove elements from the set of matched elements. Given a jQuery object that represents a set of DOM elements, the .not() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; the elements that don't match the selector will be included in the result.

<script> $("div").not(".green, #blueone") .css("border-color", "red");
</script>

http://api.jquery.com/not/

.offset()

Get the current coordinates of the first element in the set of matched elements, relative to the document. The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.

<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>

http://api.jquery.com/offset/

.offsetParent()

Get the closest ancestor element that is positioned. Given a jQuery object that represents a set of DOM elements, the .offsetParent() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor. An element is said to be positioned if it has a CSS position attribute of relative, absolute, or fixed. This information is useful for calculating offsets for performing animations and placing objects on the page.

<script>$('li.item-a').offsetParent().css('background-color', 'red');</script>

http://api.jquery.com/offsetParent/

.one()

Attach a handler to an event for the elements. The handler is executed at most once per element. This method is identical to .bind(), except that the handler is unbound after its first invocation. For example:

<script>
var n = 0;
$("div").one("click", function(){
var index = $("div").index(this);
$(this).css({ borderStyle:"inset", cursor:"auto" });
$("p").text("Div at index #" + index + " clicked." + " That's " + ++n + " total clicks.");
});
</script>

http://api.jquery.com/one/

.outerHeight()

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.

<script>var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );</script>

http://api.jquery.com/outerHeight/

.outerWidth()

Get the current computed width for the first element in the set of matched elements, including padding and border. Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.

<script>var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );
</script>

http://api.jquery.com/outerWidth/

.parent()

Get the parent of each element in the current set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .parent() method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

<script> $("*", document.body).each(function () { var parentTag = $(this).parent().get(0).tagName; $(this).prepend(document.createTextNode(parentTag + " > ")); });
</script>

http://api.jquery.com/parent/

.parents()

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .parents() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements ordered from immediate parent on up; the elements are returned in order from the closest parent to the outer ones. The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

<script>
var parentEls = $("b").parents() .map(function () { return this.tagName; }) .get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>

http://api.jquery.com/parents/

.parentsUntil()

Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector. Given a jQuery object that represents a set of DOM elements, the .parentsUntil() method traverses through the ancestors of these elements until it reaches an element matched by the selector passed in the method's argument. The resulting jQuery object contains all of the ancestors up to but not including the one matched by the .parentsUntil() selector. Consider a page with a basic nested list as follows:

<script> $('li.item-a').parentsUntil('.level-1') .css('background-color', 'red');
</script>

http://api.jquery.com/parentsUntil/

.position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent. The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>

http://api.jquery.com/position/

.prepend()

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements. The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).

<script>$("p").prepend("<b>Hello </b>");</script>

http://api.jquery.com/prepend/

.prependTo()

Insert every element in the set of matched elements to the beginning of the target. The .prepend() and .prependTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .prepend(), the selector expression preceding the method is the container into which the content is inserted. With .prependTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

<script>$("span").prependTo("#foo"); // check prepend() examples</script>

http://api.jquery.com/prependTo/

.prev()

Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .prev() method allows us to search through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<script> var $curr = $("#start"); $curr.css("background", "#f99"); $("button").click(function () { $curr = $curr.prev(); $("div").css("background", ""); $curr.css("background", "#f99"); });
</script>

http://api.jquery.com/prev/

.prevAll()

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .prevAll() method allows us to search through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<script>$("div:last").prevAll().addClass("before");</script>

http://api.jquery.com/prevAll/

.prevUntil()

Get all preceding siblings of each element up to but not including the element matched by the selector. Given a jQuery object that represents a set of DOM elements, the .prevUntil() method allows us to search through the predecessors of these elements in the DOM tree, stopping when it reaches an element matched by the method's argument. The new jQuery object that is returned contains all previous siblings up to but not including the one matched by the .prevUntil() selector.

<script> $("#term-2").prevUntil("dt") .css("background-color", "red")
</script>

http://api.jquery.com/prevUntil/

.pushStack()

Add a collection of DOM elements onto the jQuery stack.

jQuery([]) .pushStack( document.getElementsByTagName("div") ) .remove() .end();

http://api.jquery.com/pushStack/

.queue()

Show the queue of functions to be executed on the matched elements. Every element can have one to many queues of functions attached to it by jQuery. In most applications, only one queue (called fx) is used. Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. The typical example of this is calling multiple animation methods on an element. For example:

<script>$("#show").click(function () { var n = $("div").queue("fx"); $("p").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt();</script>

http://api.jquery.com/queue/

.ready()

Specify a function to execute when the DOM is fully loaded. While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

<script> $(document).ready(function () { $("p").text("The DOM is now loaded and can be manipulated.");
}); </script>

http://api.jquery.com/ready/

.remove()

Remove the set of matched elements from the DOM. Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

<script> $("button").click(function () { $("p").remove(); });
</script>

http://api.jquery.com/remove/

.removeAttr()

Remove an attribute from each element in the set of matched elements. The .removeAttr() method uses the JavaScript removeAttribute() function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.

<script>
$("button").click(function () { $(this).next().removeAttr("disabled") .focus() .val("editable now");
});
</script>

http://api.jquery.com/removeAttr/

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements. If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.

<script>$("p:even").removeClass("blue");</script>

http://api.jquery.com/removeClass/

.removeData()

Remove a previously-stored piece of data. The .removeData() method allows us to remove values that were previously set using .data(). When called with the name of a key, .removeData() deletes that particular value; when called with no arguments, all values are removed.

<script> $("span:eq(0)").text("" + $("div").data("test1")); $("div").data("test1", "VALUE-1"); $("div").data("test2", "VALUE-2"); $("span:eq(1)").text("" + $("div").data("test1")); $("div").removeData("test1"); $("span:eq(2)").text("" + $("div").data("test1")); $("span:eq(3)").text("" + $("div").data("test2"));
</script>

http://api.jquery.com/removeData/

.replaceAll()

Replace each target element with the set of matched elements. The .replaceAll() method is corollary to .replaceWith(), but with the source and target reversed. Consider this DOM structure:

<script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples</script>

http://api.jquery.com/replaceAll/

.replaceWith()

Replace each element in the set of matched elements with the provided new content. The .replaceWith() method allows us to remove content from the DOM and insert new content in its place with a single call. Consider this DOM structure:

<script> $("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); });
</script>

http://api.jquery.com/replaceWith/

.resize()

Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('resize', handler) in the first and second variations, and .trigger('resize') in the third.

$(window).resize(function() { $('body').prepend('<div>' + $(window).width() + '</div>');
}); 

http://api.jquery.com/resize/

.scroll()

Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('scroll', handler) in the first and second variations, and .trigger('scroll') in the third.

<script> $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function () { $("span").css("display", "inline").fadeOut("slow"); });
</script>

http://api.jquery.com/scroll/

.scrollLeft()

Get the current horizontal position of the scroll bar for the first element in the set of matched elements. The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be 0.

<script>var p = $("p:first");	$("p:last").text( "scrollLeft:" + p.scrollLeft() );	</script>

http://api.jquery.com/scrollLeft/

.scrollTop()

Get the current vertical position of the scroll bar for the first element in the set of matched elements. The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

<script>var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
</script>

http://api.jquery.com/scrollTop/

.select()

Bind an event handler to the "select" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('select', handler) in the first two variations, and .trigger('select') in the third.

<script> $(":input").select( function () { $("div").text("Something was selected").show().fadeOut(1000); });
</script>

http://api.jquery.com/select/

.selector

A selector representing selector originally passed to jQuery(). Should be used in conjunction with context to determine the exact query used.

<script>$("ul") .append("<li>" + $("ul").selector + "</li>") .append("<li>" + $("ul li").selector + "</li>") .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
</script>

http://api.jquery.com/selector/

.serialize()

Encode a set of form elements as a string for submission. The .serialize() method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements. The form elements can be of several types:

<script> function showValues() { var str = $("form").serialize(); $("#results").text(str); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues();
</script>

http://api.jquery.com/serialize/

.serializeArray()

Encode a set of form elements as an array of names and values. The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery object representing a set of form elements. The form elements can be of several types:

<script> function showValues() { var fields = $(":input").serializeArray(); $("#results").empty(); jQuery.each(fields, function(i, field){ $("#results").append(field.value + " "); }); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues();
</script>

http://api.jquery.com/serializeArray/

.show()

Display the matched elements. With no parameters, the .show() method is the simplest way to display an element:

<script> $("button").click(function () { $("p").show("slow"); }); </script>

http://api.jquery.com/show/

.siblings()

Get the siblings of each element in the set of matched elements, optionally filtered by a selector. Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<script> var len = $(".hilite").siblings() .css("color", "red") .length; $("b").text(len);
</script>

http://api.jquery.com/siblings/

.size()

Return the number of DOM elements matched by the jQuery object. We can determine the number of list items by calling .size():

<script>$(document.body).click(function () { $(document.body).append($("<div>"));
var n = $("div").size();
$("span").text("There are " + n + " divs." + "Click to add more.");}).click(); // trigger the click to start</script>

http://api.jquery.com/size/

.slice()

Reduce the set of matched elements to a subset specified by a range of indices. Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object from a subset of the matching elements. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.

<script> function colorEm() { var $div = $("div"); var start = Math.floor(Math.random() * $div.length); var end = Math.floor(Math.random() * ($div.length - start)) + start + 1; if (end == $div.length) end = undefined; $div.css("background", ""); if (end) $div.slice(start, end).css("background", "yellow"); else $div.slice(start).css("background", "yellow"); $("span").text('$("div").slice(' + start + (end ? ', ' + end : '') + ').css("background", "yellow");'); } $("button").click(colorEm);
</script>

http://api.jquery.com/slice/

.slideDown()

Display the matched elements with a sliding motion. The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.

<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>

http://api.jquery.com/slideDown/

.slideToggle()

Display or hide the matched elements with a sliding motion. The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.

<script> $("button").click(function () { $("p").slideToggle("slow"); });
</script>

http://api.jquery.com/slideToggle/

.slideUp()

Hide the matched elements with a sliding motion. The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items. Once the height reaches 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.

<script> $(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").show("slow"); } else { $("div").slideUp(); } }); </script>

http://api.jquery.com/slideUp/

.stop()

Stop the currently-running animation on the matched elements. When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.

<script>
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});
// Start animation in the opposite direction
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script>

http://api.jquery.com/stop/

.submit()

Bind an event handler to the "submit" JavaScript event, or trigger that event on an element. This method is a shortcut for .bind('submit', handler) in the first variation, and .trigger('submit') in the second.

<script> $("form").submit(function() { if ($("input:first").val() == "correct") { $("span").text("Validated...").show(); return true; } $("span").text("Not valid!").show().fadeOut(1000); return false; });
</script>

http://api.jquery.com/submit/

.text()

Get the combined text contents of each element in the set of matched elements, including their descendants. Unlike the .html() method, .text() can be used in both XML and HTML documents. The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) Consider the following HTML:

<script> var str = $("p:first").text(); $("p:last").html(str);
</script>

http://api.jquery.com/text/

.toArray()

Retrieve all the DOM elements contained in the jQuery set, as an array. .toArray() returns all of the elements in the jQuery set:

<script> function disp(divs) { var a = []; for (var i = 0; i < divs.length; i++) { a.push(divs[i].innerHTML); } $("span").text(a.join(" ")); } disp( $("div").toArray().reverse() );
</script>

http://api.jquery.com/toArray/

.toggle()

Bind two or more handlers to the matched elements, to be executed on alternate clicks. The .toggle() method binds a handler for the click event, so the rules outlined for the triggering of click apply here as well.

<script> $("li").toggle( function () { $(this).css({"list-style-type":"disc", "color":"blue"}); }, function () { $(this).css({"list-style-type":"disc", "color":"red"}); }, function () { $(this).css({"list-style-type":"", "color":""}); } );
</script>

http://api.jquery.com/toggle-event/

.toggle()

Display or hide the matched elements. With no parameters, the .toggle() method simply toggles the visibility of elements:

<script>
$("button").click(function () {
$("p").toggle();
});
</script>

http://api.jquery.com/toggle/

.toggleClass()

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument. This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply .toggleClass() to a simple <div>:

<script> $("p").click(function () { $(this).toggleClass("highlight"); });
</script>

http://api.jquery.com/toggleClass/

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type. Any event handlers attached with .bind() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user:

<script>
$("button:first").click(function () {
update($("span:first"));
});
$("button:last").click(function () {
$("button:first").trigger('click');
update($("span:last"));
});
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}
</script>

http://api.jquery.com/trigger/

.triggerHandler()

Execute all handlers attached to an element for an event. The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions:

<script>
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
</script>

http://api.jquery.com/triggerHandler/

.unbind()

Remove a previously-attached event handler from the elements. Any handler that has been attached with .bind() can be removed with .unbind(). In the simplest case, with no arguments, .unbind() removes all handlers attached to the elements:

<script>
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick) .text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick) .text("Does nothing...");
});
</script>

http://api.jquery.com/unbind/

.undelegate()

Remove a handler from the event for all elements which match the current selector, now or in the future, based upon a specific set of root elements. Undelegate is a way of removing event handlers that have been bound using .delegate(). It works virtually identically to .die() with the addition of a selector filter argument (which is required for delegation to work).

<script>
function aClick() { $("div").show().fadeOut("slow");
}
$("#bind").click(function () { $("body").delegate("#theone", "click", aClick) .find("#theone").text("Can Click!");
});
$("#unbind").click(function () { $("body").undelegate("#theone", "click", aClick) .find("#theone").text("Does nothing...");
});
</script>

http://api.jquery.com/undelegate/

.unload()

Bind an event handler to the "unload" JavaScript event. This method is a shortcut for .bind('unload', handler).

$(window).unload( function () { alert("Bye now!"); } );

http://api.jquery.com/unload/

.unwrap()

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place. The .unwrap() method removes the element's parent. This is effectively the inverse of the .wrap() method. The matched elements (and their siblings, if any) replace their parents within the DOM structure.

<script>
$("button").toggle(function(){ $("p").wrap("<div></div>");
}, function(){ $("p").unwrap();
});</script>

http://api.jquery.com/unwrap/

.val()

Get the current value of the first element in the set of matched elements. The .val() method is primarily used to get the values of form elements. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option.

<script> function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || []; $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join(", ")); } $("select").change(displayVals); displayVals();
</script>

http://api.jquery.com/val/

.width()

Get the current computed width for the first element in the set of matched elements. The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.

<script> function showWidth(ele, w) { $("div").text("The width for the " + ele + " is " + w + "px."); } $("#getp").click(function () { showWidth("paragraph", $("p").width()); }); $("#getd").click(function () { showWidth("document", $(document).width()); }); $("#getw").click(function () { showWidth("window", $(window).width()); });
</script>

http://api.jquery.com/width/

.wrap()

Wrap an HTML structure around each element in the set of matched elements. The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around each of the elements in the set of matched elements. This method returns the original set of elements for chaining purposes.

<script>$("p").wrap("<div></div>");</script>

http://api.jquery.com/wrap/

.wrapAll()

Wrap an HTML structure around all elements in the set of matched elements. The .wrapAll() function can take any string or object that could be passed to the $() function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.

<script>$("p").wrapAll("<div></div>");</script>

http://api.jquery.com/wrapAll/

.wrapInner()

Wrap an HTML structure around the content of each element in the set of matched elements. The .wrapInner() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around the content of each of the elements in the set of matched elements.

<script>$("p").wrapInner("<b></b>");</script>

http://api.jquery.com/wrapInner/



A


All Selector (“*”)

Selects all elements. Caution: The all, or universal, selector is extremely slow, except when used by itself.

<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>

http://api.jquery.com/all-selector/

Attribute Contains Prefix Selector [name|="value"]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). This selector was introduced into the CSS specification to handle language attributes.

<script>$('a[hreflang|="en"]').css('border','3px dotted green');</script>

http://api.jquery.com/attribute-contains-prefix-selector/

Attribute Contains Selector [name*="value"]

Selects elements that have the specified attribute with a value containing the a given substring. This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.

<script>$('input[name*="man"]').val('has man in it!');</script>

http://api.jquery.com/attribute-contains-selector/

Attribute Contains Word Selector [name~="value"]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.

<script>$('input[name~="man"]').val('mr. man is in it!');</script>

http://api.jquery.com/attribute-contains-word-selector/

Attribute Ends With Selector [name$="value"]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

<script>$('input[name$="letter"]').val('a letter');</script>

http://api.jquery.com/attribute-ends-with-selector/

Attribute Equals Selector [name="value"]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

<script>$('input[name="newsletter"]').next().text(' is newsletter');</script>

http://api.jquery.com/attribute-equals-selector/

Attribute Not Equal Selector [name!="value"]

Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value. This selector is equivalent to :not([attr="value"]).

<script>$('input[name!="newsletter"]').next().append('<b>; not newsletter</b>');</script>

http://api.jquery.com/attribute-not-equal-selector/

Attribute Starts With Selector [name^="value"]

Selects elements that have the specified attribute with a value beginning exactly with a given string. This selector can be useful for identifying elements in pages produced by server-side frameworks that produce HTML with systematic element IDs. However it will be slower than using a class selector so leverage classes, if you can, to group like elements.

<script>$('input[name^="news"]').val('news here!');</script>

http://api.jquery.com/attribute-starts-with-selector/



C


Child Selector (“parent > child”)

Selects all direct child elements specified by "child" of elements specified by "parent". As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above, but notably not by Internet Explorer versions 6 and below. However, in jQuery, this selector (along with all others) works across all supported browsers, including IE6.

<script>$("ul.topnav > li").css("border", "3px double red");</script>

http://api.jquery.com/child-selector/

Class Selector (“.class”)

Selects all elements with the given class. For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it.

<script>$(".myClass").css("border","3px solid red");</script>

http://api.jquery.com/class-selector/



D


deferred.done()

Add handlers to be called when the Deferred object is resolved. The argument can be either a single function or an array of functions. When the Deferred is resolved, the doneCallbacks are called. Callbacks are executed in the order they were added. Since deferred.done returns the deferred object, other methods of the deferred object can be chained to this one, including additional .done() methods. When the Deferred is resolved, doneCallbacks are executed using the arguments provided to the resolve or resolveWith method call in the order they were added. For more information, see the documentation for Deferred object.

$.get("test.php").done( function(){ alert("$.get succeeded"); }
);

http://api.jquery.com/deferred.done/

deferred.fail()

Add handlers to be called when the Deferred object is rejected. The argument can be either a single function or an array of functions. When the Deferred is rejected, the failCallbacks are called. Callbacks are executed in the order they were added. Since deferred.fail() returns the deferred object, other methods of the deferred object can be chained to this one, including additional deferred.fail() methods. The failCallbacks are executed using the arguments provided to the deferred.reject() or deferred.rejectWith() method call in the order they were added. For more information, see the documentation for Deferred object.

$.get("test.php") .done(function(){ alert("$.get succeeded"); }) .fail(function(){ alert("$.get failed!"); });

http://api.jquery.com/deferred.fail/

deferred.isRejected()

Determine whether a Deferred object has been rejected. Returns true if the Deferred object is in the rejected state, meaning that either deferred.reject() or deferred.rejectWith() has been called for the object and the failCallbacks have been called (or are in the process of being called).

http://api.jquery.com/deferred.isRejected/

deferred.isResolved()

Determine whether a Deferred object has been resolved. Returns true if the Deferred object is in the resolved state, meaning that either deferred.resolve() or deferred.resolveWith() has been called for the object and the doneCallbacks have been called (or are in the process of being called).

http://api.jquery.com/deferred.isResolved/

deferred.promise()

Return a Deferred's Promise object. The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the Deferred methods needed to attach additional handlers or determine the state (then, done, fail, isResolved, and isRejected), but not ones that change the state (resolve, reject, resolveWith, and rejectWith).

// Create a Deferred and return its Promise
function asyncEvent(){ var dfd = new jQuery.Deferred(); setTimeout(function(){ dfd.resolve("hurray"); }, Math.floor(Math.random()*1500)); setTimeout(function(){ dfd.reject("sorry"); }, Math.floor(Math.random()*1500)); return dfd.promise();
}
// Attach a done and fail handler for the asyncEvent
$.when( asyncEvent() ).then( function(status){ alert( status+', things are going well' ); }, function(status){ alert( status+', you fail this time' ); }
);

http://api.jquery.com/deferred.promise/

deferred.reject()

Reject a Deferred object and call any failCallbacks with the given args. Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state by returning a restricted Promise object through deferred.promise().

http://api.jquery.com/deferred.reject/

deferred.rejectWith()

Reject a Deferred object and call any failCallbacks with the given context and args. Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state by returning a restricted Promise object through deferred.promise().

http://api.jquery.com/deferred.rejectWith/

deferred.resolve()

Resolve a Deferred object and call any doneCallbacks with the given args. When the Deferred is resolved, any doneCallbacks added by deferred.then or deferred.done are called. Callbacks are executed in the order they were added. Each callback is passed the args from the .resolve(). Any doneCallbacks added after the Deferred enters the resolved state are executed immediately when they are added, using the arguments that were passed to the .resolve() call. For more information, see the documentation for Deferred object.

http://api.jquery.com/deferred.resolve/

deferred.resolveWith()

Resolve a Deferred object and call any doneCallbacks with the given context and args. Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state by returning a restricted Promise object through deferred.promise().

http://api.jquery.com/deferred.resolveWith/

deferred.then()

Add handlers to be called when the Deferred object is resolved or rejected. Both arguments can be either a single function or an array of functions. Either argument can also be null if no callback of that type is desired. Alternatively, use .done() or .fail() to set only doneCallbacks or failCallbacks. When the Deferred is resolved, the doneCallbacks are called. If the Deferred is instead rejected, the failCallbacks are called. Callbacks are executed in the order they were added. Since deferred.then returns the deferred object, other methods of the deferred object can be chained to this one, including additional .then() methods. For more information, see the documentation for Deferred object.

$.get("test.php").then( function(){ alert("$.get succeeded"); }, function(){ alert("$.get failed!"); }
);

http://api.jquery.com/deferred.then/



D


Descendant Selector (“ancestor descendant”)

Selects all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

<script>$("form input").css("border", "2px dotted blue");</script>

http://api.jquery.com/descendant-selector/



E


Element Selector (“element”)

Selects all elements with the given tag name. JavaScript's getElementsByTagName() function is called to return the appropriate elements when this expression is used.

<script>$("div").css("border","9px solid red");</script>

http://api.jquery.com/element-selector/



E


event.currentTarget

The current DOM element within the event bubbling phase. This property will typically be equal to the this of the function.

$("p").click(function(event) { alert( event.currentTarget === this ); // true
}); 

http://api.jquery.com/event.currentTarget/

event.data

The optional data passed to jQuery.fn.bind when the current executing handler was bound.

$("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); });
}); 

http://api.jquery.com/event.data/

event.isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object.

$("a").click(function(event){ alert( event.isDefaultPrevented() ); // false event.preventDefault(); alert( event.isDefaultPrevented() ); // true
}); 

http://api.jquery.com/event.isDefaultPrevented/

event.isImmediatePropagationStopped()

Returns whether event.stopImmediatePropagation() was ever called on this event object. This property was introduced in DOM level 3.

<script>
function immediatePropStopped(e) { var msg = ""; if ( e.isImmediatePropagationStopped() ) { msg = "called" } else { msg = "not called"; } $("#stop-log").append( "<div>" + msg + "</div>" );
}
$("button").click(function(event) { immediatePropStopped(event); event.stopImmediatePropagation(); immediatePropStopped(event);
});
</script>

http://api.jquery.com/event.isImmediatePropagationStopped/

event.isPropagationStopped()

Returns whether event.stopPropagation() was ever called on this event object. This event method is described in the W3C DOM Level 3 specification.

<script>
function propStopped(e) { var msg = ""; if ( e.isPropagationStopped() ) { msg = "called" } else { msg = "not called"; } $("#stop-log").append( "<div>" + msg + "</div>" );
}
$("button").click(function(event) { propStopped(event); event.stopPropagation(); propStopped(event);
});
</script>

http://api.jquery.com/event.isPropagationStopped/

event.namespace

The namespace specified when the event was triggered. This will likely be used primarily by plugin authors who wish to handle tasks differently depending on the event namespace used.

<script>
$("p").bind("test.something", function(event) { alert( event.namespace );
});
$("button").click(function(event) { $("p").trigger("test.something");
});
</script>

http://api.jquery.com/event.namespace/

event.pageX

The mouse position relative to the left edge of the document.

<script>$(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
}); </script>

http://api.jquery.com/event.pageX/

event.pageY

The mouse position relative to the top edge of the document.

<script>$(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
}); </script>

http://api.jquery.com/event.pageY/

event.preventDefault()

If this method is called, the default action of the event will not be triggered. For example, clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event.

<script>
$("a").click(function(event) { event.preventDefault(); $('<div/>') .append('default ' + event.type + ' prevented') .appendTo('#log');
});
</script>

http://api.jquery.com/event.preventDefault/

event.relatedTarget

The other DOM element involved in the event, if any. For mouseout, indicates the element being entered; for mousein, indicates the element being exited.

$("a").mouseout(function(event) { alert(event.relatedTarget.nodeName); // "DIV"
}); 

http://api.jquery.com/event.relatedTarget/

event.result

The last value returned by an event handler that was triggered by this event, unless the value was undefined. This property can be useful for getting previous return values of custom events.

<script>
$("button").click(function(event) { return "hey";
});
$("button").click(function(event) { $("p").html( event.result );
});
</script>

http://api.jquery.com/event.result/

event.stopImmediatePropagation()

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree. In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly calling event.stopPropagation(). To simply prevent the event from bubbling to ancestor elements but allow other event handlers to execute on the same element, we can use event.stopPropagation() instead.

<script>
$("p").click(function(event){ event.stopImmediatePropagation();
});
$("p").click(function(event){ // This function won't be executed $(this).css("background-color", "#f00");
});
$("div").click(function(event) { // This function will be executed $(this).css("background-color", "#f00");
});</script>

http://api.jquery.com/event.stopImmediatePropagation/

event.stopPropagation()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. We can use event.isPropagationStopped() to determine if this method was ever called (on that event object).

$("p").click(function(event){ event.stopPropagation(); // do something
}); 

http://api.jquery.com/event.stopPropagation/

event.target

The DOM element that initiated the event. The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

<script>$("body").click(function(event) { $("#log").html("clicked: " + event.target.nodeName);
}); </script>

http://api.jquery.com/event.target/

event.timeStamp

The difference in milliseconds between the time an event is triggered and January 1, 1970. This property can be useful for profiling the performance of certain jQuery functions by getting the event.timeStamp value at two points in the code and noting the difference.

<script>
var last, diff;
$('div').click(function(event) { if ( last ) { diff = event.timeStamp - last $('div').append('time since last event: ' + diff + '<br/>'); } else { $('div').append('Click again.<br/>'); } last = event.timeStamp;
});
</script>

http://api.jquery.com/event.timeStamp/

event.type

Describes the nature of the event.

$("a").click(function(event) { alert(event.type); // "click"
}); 

http://api.jquery.com/event.type/

event.which

For key or button events, this attribute indicates the specific button or key that was pressed. event.which normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input. For more detail, read about event.charCode on the MDC.

<script>$('#whichkey').bind('keydown',function(e){ $('#log').html(e.type + ': ' + e.which );
}); </script>

http://api.jquery.com/event.which/



H


Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

<script> $('div[id]').one('click', function(){ var idString = $(this).text() + ' = ' + $(this).attr('id'); $(this).text(idString); });
</script>

http://api.jquery.com/has-attribute-selector/



I


ID Selector (“#id”)

Selects a single element with the given id attribute. For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

<script>$("#myDiv").css("border","3px solid red");</script>

http://api.jquery.com/id-selector/



J


jQuery.ajax()

Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use. If less common options are required, though, $.ajax() can be used more flexibly.

$.ajax({ type: "GET", url: "test.js", dataType: "script" });

http://api.jquery.com/jQuery.ajax/

jQuery.ajaxSetup()

Set default values for future Ajax requests. For details on the settings available for $.ajaxSetup(), see $.ajax().

$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });

http://api.jquery.com/jQuery.ajaxSetup/

jQuery.boxModel

Deprecated in jQuery 1.3 (see jQuery.support). States if the current page, in the user's browser, is being rendered using the W3C CSS Box Model.

<script> $("p").html("The box model for this iframe is: <span>" + jQuery.boxModel + "</span>");
</script>

http://api.jquery.com/jQuery.boxModel/

jQuery.browser

We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser will be moved to a plugin in a future release of jQuery. Contains flags for the useragent, read from navigator.userAgent. The $.browser property allows us to detect which web browser is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.

<script> jQuery.each(jQuery.browser, function(i, val) { $("<div>" + i + " : <span>" + val + "</span>") .appendTo(document.body); });</script>

http://api.jquery.com/jQuery.browser/

jQuery.contains()

Check to see if a DOM node is within another DOM node.

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

http://api.jquery.com/jQuery.contains/

jQuery.cssHooks

Provides a way to hook directly into jQuery to override how particular CSS properties are retrieved or set. Amongst other uses, cssHooks can be used to create custom, browser-normalized properties for CSS3 features such as box-shadows and gradients. The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. This can also be used to create new cssHooks for normalizing CSS3 properties - eg. Webkit-based browsers such as Google Chrome require you to use -webkit-border-radius to set the border-radius on an element, whilst Firefox require -moz-border-radius.

 (function($){
//first, check to see if cssHooks are supported if ( !$.cssHooks ){ //if not, output an error message alert("jQuery 1.4.3 or above is required for this plugin to work"); return; }
$.cssHooks['someCSSProperty'] = { get: function(elem, computed, extra){ //handle getting the CSS property }, set: function(elem, value){ //handle setting the CSS value }
};
})(jQuery); 

http://api.jquery.com/jQuery.cssHooks/

jQuery.data()

Store arbitrary data associated with the specified element. Note: This is a low-level method; a more convenient .data() is also available.

<script>var div = $("div")[0]; jQuery.data(div, "test", { first: 16, last: "pizza!" }); $("span:first").text(jQuery.data(div, "test").first); $("span:last").text(jQuery.data(div, "test").last);</script>

http://api.jquery.com/jQuery.data/

jQuery.dequeue()

Execute the next function on the queue for the matched element. Note: This is a low-level method, you should probably use .dequeue() instead.

<script>$("button").click(function () { $("div").animate({left:'+=200px'}, 2000); $("div").animate({top:'0px'}, 600); $("div").queue(function () { $(this).toggleClass("red"); $.dequeue( this ); }); $("div").animate({left:'10px', top:'30px'}, 700); });</script>

http://api.jquery.com/jQuery.dequeue/

jQuery.each()

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties. The $.each() function is not the same as .each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

<script> var arr = [ "one", "two", "three", "four", "five" ]; var obj = { one:1, two:2, three:3, four:4, five:5 }; jQuery.each(arr, function() { $("#" + this).text("Mine is " + this + "."); return (this != "three"); // will stop running after "three" }); jQuery.each(obj, function(i, val) { $("#" + i).append(document.createTextNode(" - " + val)); });
</script>

http://api.jquery.com/jQuery.each/

jQuery.error

Takes a string and throws an exception containing it. This method exists primarily for plugin developers who wish to override it and provide a better display (or more information) for the error messages.

jQuery.error = console.error;

http://api.jquery.com/jQuery.error/

jQuery.extend()

Merge the contents of two or more objects together into the first object. When we supply two or more objects to $.extend(), properties from all of the objects are added to the target object.

var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97
};
var object2 = { banana: {price: 200}, durian: 100
};
$.extend(object1, object2);

http://api.jquery.com/jQuery.extend/

jQuery.fx.interval

The rate (in milliseconds) at which animations fire. This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.

<script>
jQuery.fx.interval = 100;
$("input").click(function(){ $("div").toggle( 3000 );
}); </script>

http://api.jquery.com/jQuery.fx.interval/

jQuery.fx.off

Globally disable all animations. When this property is set to true, all animation methods will immediately set elements to their final state when called, rather than displaying an effect. This may be desirable for a couple reasons:

<script>
var toggleFx = function() { $.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx)
$("input").click(function(){ $("div").toggle("slow");
}); </script>

http://api.jquery.com/jQuery.fx.off/

jQuery.get()

Load data from the server using a HTTP GET request. This is a shorthand Ajax function, which is equivalent to:

$.get("test.php");

http://api.jquery.com/jQuery.get/

jQuery.getJSON()

Load JSON-encoded data from the server using a GET HTTP request. This is a shorthand Ajax function, which is equivalent to:

<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { tags: "cat", tagmode: "any", format: "json" }, function(data) { $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });</script>

http://api.jquery.com/jQuery.getJSON/

jQuery.getScript()

Load a JavaScript file from the server using a GET HTTP request, then execute it. This is a shorthand Ajax function, which is equivalent to:

<script>$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ $("#go").click(function(){ $(".block").animate( { backgroundColor: 'pink' }, 1000) .animate( { backgroundColor: 'blue' }, 1000); });
});</script>

http://api.jquery.com/jQuery.getScript/

jQuery.globalEval()

Execute some JavaScript code globally. This method behaves differently from using a normal JavaScript eval() in that it's executed within the global context (which is important for loading external scripts dynamically).

function test(){ jQuery.globalEval("var newVar = true;")
}
test();
// newVar === true

http://api.jquery.com/jQuery.globalEval/

jQuery.grep()

Finds the elements of an array which satisfy a filter function. The original array is not affected. The $.grep() method removes items from an array as necessary so that all remaining items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array.

<script>
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$("div").text(arr.join(", "));
arr = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 4);
});
$("p").text(arr.join(", "));
arr = jQuery.grep(arr, function (a) { return a != 9; });
$("span").text(arr.join(", "));
</script>

http://api.jquery.com/jQuery.grep/

jQuery.hasData()

Determine whether an element has any jQuery data associated with it. The jQuery.hasData() method provides a way to determine if an element currently has any values that were set using jQuery.data(). If no data is associated with an element (there is no data object at all or the data object is empty), the method returns false; otherwise it returns true.

<script>
$(function(){ var $p = jQuery("p"), p = $p[0]; $p.append(jQuery.hasData(p)+" "); /* false */ jQuery.data(p, "testing", 123); $p.append(jQuery.hasData(p)+" "); /* true*/ jQuery.removeData(p, "testing"); $p.append(jQuery.hasData(p)+" "); /* false */
});
</script>

http://api.jquery.com/jQuery.hasData/

jQuery.inArray()

Search for a specified value within an array and return its index (or -1 if not found). The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0.

<script>var arr = [ 4, "Pete", 8, "John" ];
$("span:eq(0)").text(jQuery.inArray("John", arr));
$("span:eq(1)").text(jQuery.inArray(4, arr));
$("span:eq(2)").text(jQuery.inArray("Karl", arr));
</script>

http://api.jquery.com/jQuery.inArray/

jQuery.isArray()

Determine whether the argument is an array. $.isArray() returns a Boolean indicating whether the object is a JavaScript array (not an array-like object, such as a jQuery object).

<script>$("b").append( "" + $.isArray([]) );</script>

http://api.jquery.com/jQuery.isArray/

jQuery.isEmptyObject()

Check to see if an object is empty (contains no properties). As of jQuery 1.4 this method checks both properties on the object itself and properties inherited from prototypes (in that it doesn't use hasOwnProperty).

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

http://api.jquery.com/jQuery.isEmptyObject/

jQuery.isFunction()

Determine if the argument passed is a Javascript function object. Note: As of jQuery 1.3, functions provided by the browser like alert() and DOM element methods like getAttribute() are not guaranteed to be detected as functions in browsers such as Internet Explorer.

<script> function stub() { } var objs = [ function () {}, { x:15, y:20 }, null, stub, "function" ]; jQuery.each(objs, function (i) { var isFunc = jQuery.isFunction(objs[i]); $("span").eq(i).text(isFunc); });
</script>

http://api.jquery.com/jQuery.isFunction/

jQuery.isPlainObject()

Check to see if an object is a plain object (created using "{}" or "new Object").

jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false

http://api.jquery.com/jQuery.isPlainObject/

jQuery.isWindow()

Determine whether the argument is a window. This is used in a number of places in jQuery to determine if we're operating against a browser window (such as the current window or an iframe).

<script>$("b").append( "" + $.isWindow(window) );</script>

http://api.jquery.com/jQuery.isWindow/

jQuery.isXMLDoc()

Check to see if a DOM node is within an XML document (or is an XML document).

jQuery.isXMLDoc(document) // false
jQuery.isXMLDoc(document.body) // false

http://api.jquery.com/jQuery.isXMLDoc/

jQuery.makeArray()

Convert an array-like object into a true JavaScript array. Many methods, both in jQuery and in JavaScript in general, return objects that are array-like. For example, the jQuery factory function $() returns a jQuery object that has many of the properties of an array (a length, the [] array access operator, etc.), but is not exactly the same as an array and lacks some of an array's built-in methods (such as .pop() and .reverse()).

<script> var elems = document.getElementsByTagName("div"); // returns a nodeList var arr = jQuery.makeArray(elems); arr.reverse(); // use an Array method on list of dom elements $(arr).appendTo(document.body);
</script>

http://api.jquery.com/jQuery.makeArray/

jQuery.map()

Translate all items in an array or array-like object to another array of items. The $.map() method applies a function to each item in an array, collecting the results into a new array.

<script> var arr = [ "a", "b", "c", "d", "e" ]; $("div").text(arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("span").text(arr.join(", "));
</script>

http://api.jquery.com/jQuery.map/

jQuery.merge()

Merge the contents of two arrays together into the first array. The $.merge() operation forms an array that contains all elements from the two arrays. The orders of items in the arrays are preserved, with items from the second array appended. The $.merge() function is destructive. It alters the first parameter to add the items from the second.

$.merge( [0,1,2], [2,3,4] )

http://api.jquery.com/jQuery.merge/

jQuery.noConflict()

Relinquish jQuery's control of the $ variable. Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

http://api.jquery.com/jQuery.noConflict/

jQuery.noop()

An empty function. You can use this empty function when you wish to pass around a function that will do nothing.

http://api.jquery.com/jQuery.noop/

jQuery.now()

Return a number representing the current time. The $.now() method is a shorthand for the number returned by the expression (new Date).getTime().

http://api.jquery.com/jQuery.now/

jQuery.param()

Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request. This function is used internally to convert form element values into a serialized string representation (See .serialize() for more information).

<script> var params = { width:1680, height:1050 }; var str = jQuery.param(params); $("#results").text(str);
</script>

http://api.jquery.com/jQuery.param/

jQuery.parseJSON

Takes a well-formed JSON string and returns the resulting JavaScript object. Passing in a malformed JSON string may result in an exception being thrown. For example, the following are all malformed JSON strings:

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

http://api.jquery.com/jQuery.parseJSON/

jQuery.parseXML()

Parses a string into an XML document. jQuery.parseXML uses the native parsing function of the browser to create a valid XML Document. This document can then be passed to jQuery to create a typical jQuery object that can be traversed and manipulated.

var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>', xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $title = $xml.find( 'title' );
// append "RSS Title" to #someElement
$( '#someElement' ).append( $title.text() );
// change the title to "XML Title"
$title.text( 'XML Title' );
// append "XML Title" to #anotherElement
$( '#anotherElement' ).append( $title.text() );

http://api.jquery.com/jQuery.parseXML/

jQuery.post()

Load data from the server using a HTTP POST request. This is a shorthand Ajax function, which is equivalent to:

$.post("test.php");

http://api.jquery.com/jQuery.post/

jQuery.proxy()

Takes a function and returns a new one that will always have a particular context. This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function, if passed the original.

var obj = { name: "John", test: function() { alert( this.name ); $("#test").unbind("click", obj.test); }
};
$("#test").click( jQuery.proxy( obj, "test" ) );
// This also works:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

http://api.jquery.com/jQuery.proxy/

jQuery.queue()

Show the queue of functions to be executed on the matched element. Note: This is a low-level method, you should probably use .queue() instead.

<script>$("#show").click(function () { var n = jQuery.queue( $("div")[0], "fx" ); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt();</script>

http://api.jquery.com/jQuery.queue/

jQuery.removeData()

Remove a previously-stored piece of data. Note: This is a low-level method, you should probably use .removeData() instead.

<script>
var div = $("div")[0];
$("span:eq(0)").text("" + $("div").data("test1"));
jQuery.data(div, "test1", "VALUE-1");
jQuery.data(div, "test2", "VALUE-2");
$("span:eq(1)").text("" + jQuery.data(div, "test1"));
jQuery.removeData(div, "test1");
$("span:eq(2)").text("" + jQuery.data(div, "test1"));
$("span:eq(3)").text("" + jQuery.data(div, "test2"));</script>

http://api.jquery.com/jQuery.removeData/

jQuery.sub()

Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object. There are two specific use cases for which jQuery.sub() was created. The first was for providing a painless way of overriding jQuery methods without completely destroying the original methods and another was for helping to do encapsulation and basic namespacing for jQuery plugins.

 (function(){ var sub$ = jQuery.sub(); sub$.fn.myCustomMethod = function(){ return 'just for me'; }; sub$(document).ready(function() { sub$('body').myCustomMethod() // 'just for me' }); })(); typeof jQuery('body').myCustomMethod // undefined

http://api.jquery.com/jQuery.sub/

jQuery.support

A collection of properties that represent the presence of different browser features or bugs. Rather than using $.browser to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to perform feature detection. This means that prior to executing code which relies on a browser feature, we test to ensure that the feature works properly. To make this process simpler, jQuery performs many such tests and makes the results available to us as properties of the jQuery.support object.

<script> $("p").html("This frame uses the W3C box model: <span>" + jQuery.support.boxModel + "</span>");
</script>

http://api.jquery.com/jQuery.support/

jQuery.trim()

Remove the whitespace from the beginning and end of a string. The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.

<script>
$("button").click(function () {
var str = " lots of spaces before and after ";
alert("'" + str + "'");
str = jQuery.trim(str);
alert("'" + str + "' - no longer");
});
</script>

http://api.jquery.com/jQuery.trim/

jQuery.type()

Determine the internal JavaScript [[Class]] of an object. A number of techniques are used to determine the exact return value for an object. The [[Class]] is determined as follows:

<script>$("b").append( "" + jQuery.type(/test/) );</script>

http://api.jquery.com/jQuery.type/

jQuery.unique()

Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers. The $.unique() function searches through an array of objects, sorting the array, and removing any duplicate nodes. This function only works on plain JavaScript arrays of DOM elements, and is chiefly used internally by jQuery.

<script> var divs = $("div").get(); // unique() must take a native array // add 3 elements of class dup too (they are divs) divs = divs.concat($(".dup").get()); $("div:eq(1)").text("Pre-unique there are " + divs.length + " elements."); divs = jQuery.unique(divs); $("div:eq(2)").text("Post-unique there are " + divs.length + " elements.") .css("color", "red");
</script>

http://api.jquery.com/jQuery.unique/

jQuery.when()

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events. If a single Deferred is passed to jQuery.when, it is returned by the method and additional methods of the Deferred object can be called to attach callbacks, such as defered.then. When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by jQuery.ajax is a Deferred and can be used this way:

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1, a2){ /* a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively */ var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */ if ( /Whip It/.test(jqXHR.responseText) ) { alert("First page has 'Whip It' somewhere."); }
});

http://api.jquery.com/jQuery.when/

jQuery()

Accepts a string containing a CSS selector which is then used to match a set of elements. In the first formulation listed above, jQuery() which can also be written as $() searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements:

<script> $("div > p").css("border", "1px solid gray");
</script>

http://api.jquery.com/jQuery/



M


Multiple Attribute Selector [name="value"][name2="value2"]

Matches elements that match all of the specified attribute filters.

<script>$('input[id][name$="man"]').val('only this one');</script>

http://api.jquery.com/multiple-attribute-selector/

Multiple Selector (“selector1, selector2, selectorN”)

Selects the combined results of all the specified selectors. You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method.

<script>$("div,span,p.myClass").css("border","3px solid red");</script>

http://api.jquery.com/multiple-selector/



N


Next Adjacent Selector (“prev + next”)

Selects all next elements matching "next" that are immediately preceded by a sibling "prev". One important point to consider with both the next adjacent sibling selector (prev + next) and the general sibling selector (prev ~ siblings) is that the elements on either side of the combinator must share the same parent.

<script>$("label + input").css("color", "blue").val("Labeled!")</script>

http://api.jquery.com/next-adjacent-Selector/

Next Siblings Selector (“prev ~ siblings”)

Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector. The notable difference between (prev + next) and (prev ~ siblings) is their respective reach. While the former reaches only to the immediately following sibling element, the latter extends that reach to all following sibling elements.

<script>$("#prev ~ div").css("border", "3px groove blue");</script>

http://api.jquery.com/next-siblings-selector/