

jQuery
======

 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the [jQuery Learning Center](https://learn.jquery.com/).

 If you're updating to a newer version of jQuery, be sure to read the release notes published on [our blog](https://blog.jquery.com/). If you're coming from a version prior 1.9, you should check out the [1.9 Upgrade Guide](https://jquery.com/upgrade-guide/1.9/) as well.

 Note that this is the API documentation for jQuery core. Other projects have API docs in other locations:

 * [jQuery UI API docs](https://api.jqueryui.com/)
* [jQuery Mobile API docs](https://api.jquerymobile.com)
* [QUnit API docs](https://api.qunitjs.com)

   [.add()](add "Permalink to .add()")
------------------------------------

  Create a new jQuery object with elements added to the set of matched elements.

     [.addBack()](addback "Permalink to .addBack()")
------------------------------------------------

  Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

     [.addClass()](addclass "Permalink to .addClass()")
---------------------------------------------------

  Adds the specified class(es) to each element in the set of matched elements.

     [.after()](after "Permalink to .after()")
------------------------------------------

  Insert content, specified by the parameter, after each element in the set of matched elements.

     [.ajaxComplete()](ajaxcomplete "Permalink to .ajaxComplete()")
---------------------------------------------------------------

  Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

     [.ajaxError()](ajaxerror "Permalink to .ajaxError()")
------------------------------------------------------

  Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

     [.ajaxSend()](ajaxsend "Permalink to .ajaxSend()")
---------------------------------------------------

  Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

     [.ajaxStart()](ajaxstart "Permalink to .ajaxStart()")
------------------------------------------------------

  Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

     [.ajaxStop()](ajaxstop "Permalink to .ajaxStop()")
---------------------------------------------------

  Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

     [.ajaxSuccess()](ajaxsuccess "Permalink to .ajaxSuccess()")
------------------------------------------------------------

  Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

     [All Selector (“\*”)](all-selector "Permalink to All Selector (“*”)")
----------------------------------------------------------------------

  Selects all elements.

     [.andSelf()](andself "Permalink to .andSelf()")
------------------------------------------------

  Add the previous set of elements on the stack to the current set.

     [.animate()](animate "Permalink to .animate()")
------------------------------------------------

  Perform a custom animation of a set of CSS properties.

     [:animated Selector](animated-selector "Permalink to :animated Selector")
--------------------------------------------------------------------------

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

     [.append()](append "Permalink to .append()")
---------------------------------------------

  Insert content, specified by the parameter, to the end of each element in the set of matched elements.

     [.appendTo()](appendto "Permalink to .appendTo()")
---------------------------------------------------

  Insert every element in the set of matched elements to the end of the target.

     [.attr()](attr "Permalink to .attr()")
---------------------------------------

  Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

     [Attribute Contains Prefix Selector [name|=”value”]](attribute-contains-prefix-selector "Permalink to 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 (-).

     [Attribute Contains Selector [name\*=”value”]](attribute-contains-selector "Permalink to Attribute Contains Selector [name*=”value”]")
---------------------------------------------------------------------------------------------------------------------------------------

  Selects elements that have the specified attribute with a value containing a given substring.

     [Attribute Contains Word Selector [name~=”value”]](attribute-contains-word-selector "Permalink to Attribute Contains Word Selector [name~=”value”]")
-----------------------------------------------------------------------------------------------------------------------------------------------------

  Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

     [Attribute Ends With Selector [name$=”value”]](attribute-ends-with-selector "Permalink to 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.

     [Attribute Equals Selector [name=”value”]](attribute-equals-selector "Permalink to Attribute Equals Selector [name=”value”]")
------------------------------------------------------------------------------------------------------------------------------

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

     [Attribute Not Equal Selector [name!=”value”]](attribute-not-equal-selector "Permalink to 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.

     [Attribute Starts With Selector [name^=”value”]](attribute-starts-with-selector "Permalink to Attribute Starts With Selector [name^=”value”]")
-----------------------------------------------------------------------------------------------------------------------------------------------

  Selects elements that have the specified attribute with a value beginning exactly with a given string.

     [.before()](before "Permalink to .before()")
---------------------------------------------

  Insert content, specified by the parameter, before each element in the set of matched elements.

     [.bind()](bind "Permalink to .bind()")
---------------------------------------

  Attach a handler to an event for the elements.

     [.blur()](blur "Permalink to .blur()")
---------------------------------------

  Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

     [:button Selector](button-selector "Permalink to :button Selector")
--------------------------------------------------------------------

  Selects all button elements and elements of type button.

     [callbacks.add()](callbacks.add "Permalink to callbacks.add()")
----------------------------------------------------------------

  Add a callback or a collection of callbacks to a callback list.

     [callbacks.disable()](callbacks.disable "Permalink to callbacks.disable()")
----------------------------------------------------------------------------

  Disable a callback list from doing anything more.

     [callbacks.disabled()](callbacks.disabled "Permalink to callbacks.disabled()")
-------------------------------------------------------------------------------

  Determine if the callbacks list has been disabled.

     [callbacks.empty()](callbacks.empty "Permalink to callbacks.empty()")
----------------------------------------------------------------------

  Remove all of the callbacks from a list.

     [callbacks.fire()](callbacks.fire "Permalink to callbacks.fire()")
-------------------------------------------------------------------

  Call all of the callbacks with the given arguments.

     [callbacks.fired()](callbacks.fired "Permalink to callbacks.fired()")
----------------------------------------------------------------------

  Determine if the callbacks have already been called at least once.

     [callbacks.fireWith()](callbacks.firewith "Permalink to callbacks.fireWith()")
-------------------------------------------------------------------------------

  Call all callbacks in a list with the given context and arguments.

     [callbacks.has()](callbacks.has "Permalink to callbacks.has()")
----------------------------------------------------------------

  Determine whether or not the list has any callbacks attached. If a callback is provided as an argument, determine whether it is in a list.

     [callbacks.lock()](callbacks.lock "Permalink to callbacks.lock()")
-------------------------------------------------------------------

  Lock a callback list in its current state.

     [callbacks.locked()](callbacks.locked "Permalink to callbacks.locked()")
-------------------------------------------------------------------------

  Determine if the callbacks list has been locked.

     [callbacks.remove()](callbacks.remove "Permalink to callbacks.remove()")
-------------------------------------------------------------------------

  Remove a callback or a collection of callbacks from a callback list.

     [.change()](change "Permalink to .change()")
---------------------------------------------

  Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

     [:checkbox Selector](checkbox-selector "Permalink to :checkbox Selector")
--------------------------------------------------------------------------

  Selects all elements of type checkbox.

     [:checked Selector](checked-selector "Permalink to :checked Selector")
-----------------------------------------------------------------------

  Matches all elements that are checked or selected.

     [Child Selector (“parent > child”)](child-selector "Permalink to Child Selector (“parent > child”)")
-----------------------------------------------------------------------------------------------------

  Selects all direct child elements specified by “child” of elements specified by “parent”.

     [.children()](children "Permalink to .children()")
---------------------------------------------------

  Get the children of each element in the set of matched elements, optionally filtered by a selector.

     [Class Selector (“.class”)](class-selector "Permalink to Class Selector (“.class”)")
-------------------------------------------------------------------------------------

  Selects all elements with the given class.

     [.clearQueue()](clearqueue "Permalink to .clearQueue()")
---------------------------------------------------------

  Remove from the queue all items that have not yet been run.

     [.click()](click "Permalink to .click()")
------------------------------------------

  Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

     [.clone()](clone "Permalink to .clone()")
------------------------------------------

  Create a deep copy of the set of matched elements.

     [.closest()](closest "Permalink to .closest()")
------------------------------------------------

  For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

     [:contains() Selector](contains-selector "Permalink to :contains() Selector")
------------------------------------------------------------------------------

  Select all elements that contain the specified text.

     [.contents()](contents "Permalink to .contents()")
---------------------------------------------------

  Get the children of each element in the set of matched elements, including text and comment nodes.

     [.context](context "Permalink to .context")
--------------------------------------------

  The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

     [.contextmenu()](contextmenu "Permalink to .contextmenu()")
------------------------------------------------------------

  Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

     [.css()](css "Permalink to .css()")
------------------------------------

  Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

     [.data()](data "Permalink to .data()")
---------------------------------------

  Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

     [.dblclick()](dblclick "Permalink to .dblclick()")
---------------------------------------------------

  Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

     [deferred.always()](deferred.always "Permalink to deferred.always()")
----------------------------------------------------------------------

  Add handlers to be called when the Deferred object is either resolved or rejected.

     [deferred.catch()](deferred.catch "Permalink to deferred.catch()")
-------------------------------------------------------------------

  Add handlers to be called when the Deferred object is rejected.

     [deferred.done()](deferred.done "Permalink to deferred.done()")
----------------------------------------------------------------

  Add handlers to be called when the Deferred object is resolved.

     [deferred.fail()](deferred.fail "Permalink to deferred.fail()")
----------------------------------------------------------------

  Add handlers to be called when the Deferred object is rejected.

     [deferred.isRejected()](deferred.isrejected "Permalink to deferred.isRejected()")
----------------------------------------------------------------------------------

  Determine whether a Deferred object has been rejected.

     [deferred.isResolved()](deferred.isresolved "Permalink to deferred.isResolved()")
----------------------------------------------------------------------------------

  Determine whether a Deferred object has been resolved.

     [deferred.notify()](deferred.notify "Permalink to deferred.notify()")
----------------------------------------------------------------------

  Call the progressCallbacks on a Deferred object with the given args.

     [deferred.notifyWith()](deferred.notifywith "Permalink to deferred.notifyWith()")
----------------------------------------------------------------------------------

  Call the progressCallbacks on a Deferred object with the given context and args.

     [deferred.pipe()](deferred.pipe "Permalink to deferred.pipe()")
----------------------------------------------------------------

  Utility method to filter and/or chain Deferreds.

     [deferred.progress()](deferred.progress "Permalink to deferred.progress()")
----------------------------------------------------------------------------

  Add handlers to be called when the Deferred object generates progress notifications.

     [deferred.promise()](deferred.promise "Permalink to deferred.promise()")
-------------------------------------------------------------------------

  Return a Deferred’s Promise object.

     [deferred.reject()](deferred.reject "Permalink to deferred.reject()")
----------------------------------------------------------------------

  Reject a Deferred object and call any failCallbacks with the given args.

     [deferred.rejectWith()](deferred.rejectwith "Permalink to deferred.rejectWith()")
----------------------------------------------------------------------------------

  Reject a Deferred object and call any failCallbacks with the given context and args.

     [deferred.resolve()](deferred.resolve "Permalink to deferred.resolve()")
-------------------------------------------------------------------------

  Resolve a Deferred object and call any doneCallbacks with the given args.

     [deferred.resolveWith()](deferred.resolvewith "Permalink to deferred.resolveWith()")
-------------------------------------------------------------------------------------

  Resolve a Deferred object and call any doneCallbacks with the given context and args.

     [deferred.state()](deferred.state "Permalink to deferred.state()")
-------------------------------------------------------------------

  Determine the current state of a Deferred object.

     [deferred.then()](deferred.then "Permalink to deferred.then()")
----------------------------------------------------------------

  Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.

     [.delay()](delay "Permalink to .delay()")
------------------------------------------

  Set a timer to delay execution of subsequent items in the queue.

     [.delegate()](delegate "Permalink to .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.

     [.dequeue()](dequeue "Permalink to .dequeue()")
------------------------------------------------

  Execute the next function on the queue for the matched elements.

     [Descendant Selector (“ancestor descendant”)](descendant-selector "Permalink to Descendant Selector (“ancestor descendant”)")
------------------------------------------------------------------------------------------------------------------------------

  Selects all elements that are descendants of a given ancestor.

     [.detach()](detach "Permalink to .detach()")
---------------------------------------------

  Remove the set of matched elements from the DOM.

     [.die()](die "Permalink to .die()")
------------------------------------

  Remove event handlers previously attached using .live() from the elements.

     [:disabled Selector](disabled-selector "Permalink to :disabled Selector")
--------------------------------------------------------------------------

  Selects all elements that are disabled.

     [.each()](each "Permalink to .each()")
---------------------------------------

  Iterate over a jQuery object, executing a function for each matched element.

     [Element Selector (“element”)](element-selector "Permalink to Element Selector (“element”)")
---------------------------------------------------------------------------------------------

  Selects all elements with the given tag name.

     [.empty()](empty "Permalink to .empty()")
------------------------------------------

  Remove all child nodes of the set of matched elements from the DOM.

     [:empty Selector](empty-selector "Permalink to :empty Selector")
-----------------------------------------------------------------

  Select all elements that have no children (including text nodes).

     [:enabled Selector](enabled-selector "Permalink to :enabled Selector")
-----------------------------------------------------------------------

  Selects all elements that are enabled.

     [.end()](end "Permalink to .end()")
------------------------------------

  End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

     [.eq()](eq "Permalink to .eq()")
---------------------------------

  Reduce the set of matched elements to the one at the specified index.

     [:eq() Selector](eq-selector "Permalink to :eq() Selector")
------------------------------------------------------------

  Select the element at index n within the matched set.

     [.error()](error "Permalink to .error()")
------------------------------------------

  Bind an event handler to the “error” JavaScript event.

     [.even()](even "Permalink to .even()")
---------------------------------------

  Reduce the set of matched elements to the even ones in the set, numbered from zero.

     [:even Selector](even-selector "Permalink to :even Selector")
--------------------------------------------------------------

  Selects even elements, zero-indexed. See also :odd.

     [event.currentTarget](event.currenttarget "Permalink to event.currentTarget")
------------------------------------------------------------------------------

  The current DOM element within the event bubbling phase.

     [event.data](event.data "Permalink to event.data")
---------------------------------------------------

  An optional object of data passed to an event method when the current executing handler is bound.

     [event.delegateTarget](event.delegatetarget "Permalink to event.delegateTarget")
---------------------------------------------------------------------------------

  The element where the currently-called jQuery event handler was attached.

     [event.isDefaultPrevented()](event.isdefaultprevented "Permalink to event.isDefaultPrevented()")
-------------------------------------------------------------------------------------------------

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

     [event.isImmediatePropagationStopped()](event.isimmediatepropagationstopped "Permalink to event.isImmediatePropagationStopped()")
----------------------------------------------------------------------------------------------------------------------------------

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

     [event.isPropagationStopped()](event.ispropagationstopped "Permalink to event.isPropagationStopped()")
-------------------------------------------------------------------------------------------------------

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

     [event.metaKey](event.metakey "Permalink to event.metaKey")
------------------------------------------------------------

  Indicates whether the META key was pressed when the event fired.

     [event.namespace](event.namespace "Permalink to event.namespace")
------------------------------------------------------------------

  The namespace specified when the event was triggered.

     [event.pageX](event.pagex "Permalink to event.pageX")
------------------------------------------------------

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

     [event.pageY](event.pagey "Permalink to event.pageY")
------------------------------------------------------

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

     [event.preventDefault()](event.preventdefault "Permalink to event.preventDefault()")
-------------------------------------------------------------------------------------

  If this method is called, the default action of the event will not be triggered.

     [event.relatedTarget](event.relatedtarget "Permalink to event.relatedTarget")
------------------------------------------------------------------------------

  The other DOM element involved in the event, if any.

     [event.result](event.result "Permalink to event.result")
---------------------------------------------------------

  The last value returned by an event handler that was triggered by this event, unless the value was undefined.

     [event.stopImmediatePropagation()](event.stopimmediatepropagation "Permalink to event.stopImmediatePropagation()")
-------------------------------------------------------------------------------------------------------------------

  Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

     [event.stopPropagation()](event.stoppropagation "Permalink to event.stopPropagation()")
----------------------------------------------------------------------------------------

  Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

     [event.target](event.target "Permalink to event.target")
---------------------------------------------------------

  The DOM element that initiated the event.

     [event.timeStamp](event.timestamp "Permalink to event.timeStamp")
------------------------------------------------------------------

  The difference in milliseconds between the time the browser created the event and January 1, 1970.

     [event.type](event.type "Permalink to event.type")
---------------------------------------------------

  Describes the nature of the event.

     [event.which](event.which "Permalink to event.which")
------------------------------------------------------

  For key or mouse events, this property indicates the specific key or button that was pressed.

     [.fadeIn()](fadein "Permalink to .fadeIn()")
---------------------------------------------

  Display the matched elements by fading them to opaque.

     [.fadeOut()](fadeout "Permalink to .fadeOut()")
------------------------------------------------

  Hide the matched elements by fading them to transparent.

     [.fadeTo()](fadeto "Permalink to .fadeTo()")
---------------------------------------------

  Adjust the opacity of the matched elements.

     [.fadeToggle()](fadetoggle "Permalink to .fadeToggle()")
---------------------------------------------------------

  Display or hide the matched elements by animating their opacity.

     [:file Selector](file-selector "Permalink to :file Selector")
--------------------------------------------------------------

  Selects all elements of type file.

     [.filter()](filter "Permalink to .filter()")
---------------------------------------------

  Reduce the set of matched elements to those that match the selector or pass the function’s test.

     [.find()](find "Permalink to .find()")
---------------------------------------

  Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

     [.finish()](finish "Permalink to .finish()")
---------------------------------------------

  Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

     [.first()](first "Permalink to .first()")
------------------------------------------

  Reduce the set of matched elements to the first in the set.

     [:first-child Selector](first-child-selector "Permalink to :first-child Selector")
-----------------------------------------------------------------------------------

  Selects all elements that are the first child of their parent.

     [:first-of-type Selector](first-of-type-selector "Permalink to :first-of-type Selector")
-----------------------------------------------------------------------------------------

  Selects all elements that are the first among siblings of the same element name.

     [:first Selector](first-selector "Permalink to :first Selector")
-----------------------------------------------------------------

  Selects the first matched DOM element.

     [.focus()](focus "Permalink to .focus()")
------------------------------------------

  Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

     [:focus Selector](focus-selector "Permalink to :focus Selector")
-----------------------------------------------------------------

  Selects element if it is currently focused.

     [.focusin()](focusin "Permalink to .focusin()")
------------------------------------------------

  Bind an event handler to the “focusin” event.

     [.focusout()](focusout "Permalink to .focusout()")
---------------------------------------------------

  Bind an event handler to the “focusout” JavaScript event.

     [.get()](get "Permalink to .get()")
------------------------------------

  Retrieve the DOM elements matched by the jQuery object.

     [:gt() Selector](gt-selector "Permalink to :gt() Selector")
------------------------------------------------------------

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

     [.has()](has "Permalink to .has()")
------------------------------------

  Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

     [Has Attribute Selector [name]](has-attribute-selector "Permalink to Has Attribute Selector [name]")
-----------------------------------------------------------------------------------------------------

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

     [:has() Selector](has-selector "Permalink to :has() Selector")
---------------------------------------------------------------

  Selects elements which contain at least one element that matches the specified selector.

     [.hasClass()](hasclass "Permalink to .hasClass()")
---------------------------------------------------

  Determine whether any of the matched elements are assigned the given class.

     [:header Selector](header-selector "Permalink to :header Selector")
--------------------------------------------------------------------

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

     [.height()](height "Permalink to .height()")
---------------------------------------------

  Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

     [:hidden Selector](hidden-selector "Permalink to :hidden Selector")
--------------------------------------------------------------------

  Selects all elements that are hidden.

     [.hide()](hide "Permalink to .hide()")
---------------------------------------

  Hide the matched elements.

     [.hover()](hover "Permalink to .hover()")
------------------------------------------

  Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

     [.html()](html "Permalink to .html()")
---------------------------------------

  Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

     [ID Selector (“#id”)](id-selector "Permalink to ID Selector (“#id”)")
----------------------------------------------------------------------

  Selects a single element with the given id attribute.

     [:image Selector](image-selector "Permalink to :image Selector")
-----------------------------------------------------------------

  Selects all elements of type image.

     [.index()](https://api.jquery.com/index/ "Permalink to .index()")
------------------------------------------------------------------

  Search for a given element from among the matched elements.

     [.innerHeight()](innerheight "Permalink to .innerHeight()")
------------------------------------------------------------

  Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

     [.innerWidth()](innerwidth "Permalink to .innerWidth()")
---------------------------------------------------------

  Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

     [:input Selector](input-selector "Permalink to :input Selector")
-----------------------------------------------------------------

  Selects all input, textarea, select and button elements.

     [.insertAfter()](insertafter "Permalink to .insertAfter()")
------------------------------------------------------------

  Insert every element in the set of matched elements after the target.

     [.insertBefore()](insertbefore "Permalink to .insertBefore()")
---------------------------------------------------------------

  Insert every element in the set of matched elements before the target.

     [.is()](is "Permalink to .is()")
---------------------------------

  Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

     [jQuery()](jquery "Permalink to jQuery()")
-------------------------------------------

  Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

     [.jquery](jquery-2 "Permalink to .jquery")
-------------------------------------------

  A string containing the jQuery version number.

     [jQuery.ajax()](jquery.ajax "Permalink to jQuery.ajax()")
----------------------------------------------------------

  Perform an asynchronous HTTP (Ajax) request.

     [jQuery.ajaxPrefilter()](jquery.ajaxprefilter "Permalink to jQuery.ajaxPrefilter()")
-------------------------------------------------------------------------------------

  Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

     [jQuery.ajaxSetup()](jquery.ajaxsetup "Permalink to jQuery.ajaxSetup()")
-------------------------------------------------------------------------

  Set default values for future Ajax requests. Its use is not recommended.

     [jQuery.ajaxTransport()](jquery.ajaxtransport "Permalink to jQuery.ajaxTransport()")
-------------------------------------------------------------------------------------

  Creates an object that handles the actual transmission of Ajax data.

     [jQuery.boxModel](jquery.boxmodel "Permalink to jQuery.boxModel")
------------------------------------------------------------------

  States if the current page, in the user’s browser, is being rendered using the W3C CSS Box Model.

     [jQuery.browser](jquery.browser "Permalink to jQuery.browser")
---------------------------------------------------------------

  Contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

     [jQuery.Callbacks()](jquery.callbacks "Permalink to jQuery.Callbacks()")
-------------------------------------------------------------------------

  A multi-purpose callbacks list object that provides a powerful way to manage callback lists.

     [jQuery.contains()](jquery.contains "Permalink to jQuery.contains()")
----------------------------------------------------------------------

  Check to see if a DOM element is a descendant of another DOM element.

     [jQuery.cssHooks](jquery.csshooks "Permalink to jQuery.cssHooks")
------------------------------------------------------------------

  Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

     [jQuery.cssNumber](jquery.cssnumber "Permalink to jQuery.cssNumber")
---------------------------------------------------------------------

  An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

     [jQuery.data()](jquery.data "Permalink to jQuery.data()")
----------------------------------------------------------

  Store arbitrary data associated with the specified element and/or return the value that was set.

     [jQuery.Deferred()](jquery.deferred "Permalink to jQuery.Deferred()")
----------------------------------------------------------------------

  A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

     [jQuery.dequeue()](jquery.dequeue "Permalink to jQuery.dequeue()")
-------------------------------------------------------------------

  Execute the next function on the queue for the matched element.

     [jQuery.each()](jquery.each "Permalink to 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.

     [jQuery.error()](jquery.error "Permalink to jQuery.error()")
-------------------------------------------------------------

  Takes a string and throws an exception containing it.

     [jQuery.escapeSelector()](jquery.escapeselector "Permalink to jQuery.escapeSelector()")
----------------------------------------------------------------------------------------

  Escapes any character that has a special meaning in a CSS selector.

     [jQuery.extend()](jquery.extend "Permalink to jQuery.extend()")
----------------------------------------------------------------

  Merge the contents of two or more objects together into the first object.

     [jQuery.fn.extend()](jquery.fn.extend "Permalink to jQuery.fn.extend()")
-------------------------------------------------------------------------

  Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

     [jQuery.fx.interval](jquery.fx.interval "Permalink to jQuery.fx.interval")
---------------------------------------------------------------------------

  The rate (in milliseconds) at which animations fire.

     [jQuery.fx.off](jquery.fx.off "Permalink to jQuery.fx.off")
------------------------------------------------------------

  Globally disable all animations.

     [jQuery.get()](jquery.get "Permalink to jQuery.get()")
-------------------------------------------------------

  Load data from the server using a HTTP GET request.

     [jQuery.getJSON()](jquery.getjson "Permalink to jQuery.getJSON()")
-------------------------------------------------------------------

  Load JSON-encoded data from the server using a GET HTTP request.

     [jQuery.getScript()](jquery.getscript "Permalink to jQuery.getScript()")
-------------------------------------------------------------------------

  Load a JavaScript file from the server using a GET HTTP request, then execute it.

     [jQuery.globalEval()](jquery.globaleval "Permalink to jQuery.globalEval()")
----------------------------------------------------------------------------

  Execute some JavaScript code globally.

     [jQuery.grep()](jquery.grep "Permalink to jQuery.grep()")
----------------------------------------------------------

  Finds the elements of an array which satisfy a filter function. The original array is not affected.

     [jQuery.hasData()](jquery.hasdata "Permalink to jQuery.hasData()")
-------------------------------------------------------------------

  Determine whether an element has any jQuery data associated with it.

     [jQuery.holdReady()](jquery.holdready "Permalink to jQuery.holdReady()")
-------------------------------------------------------------------------

  Holds or releases the execution of jQuery’s ready event.

     [jQuery.htmlPrefilter()](jquery.htmlprefilter "Permalink to jQuery.htmlPrefilter()")
-------------------------------------------------------------------------------------

  Modify and filter HTML strings passed through jQuery manipulation methods.

     [jQuery.inArray()](jquery.inarray "Permalink to jQuery.inArray()")
-------------------------------------------------------------------

  Search for a specified value within an array and return its index (or -1 if not found).

     [jQuery.isArray()](jquery.isarray "Permalink to jQuery.isArray()")
-------------------------------------------------------------------

  Determine whether the argument is an array.

     [jQuery.isEmptyObject()](jquery.isemptyobject "Permalink to jQuery.isEmptyObject()")
-------------------------------------------------------------------------------------

  Check to see if an object is empty (contains no enumerable properties).

     [jQuery.isFunction()](jquery.isfunction "Permalink to jQuery.isFunction()")
----------------------------------------------------------------------------

  Determines if its argument is callable as a function.

     [jQuery.isNumeric()](jquery.isnumeric "Permalink to jQuery.isNumeric()")
-------------------------------------------------------------------------

  Determines whether its argument represents a JavaScript number.

     [jQuery.isPlainObject()](jquery.isplainobject "Permalink to jQuery.isPlainObject()")
-------------------------------------------------------------------------------------

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

     [jQuery.isWindow()](jquery.iswindow "Permalink to jQuery.isWindow()")
----------------------------------------------------------------------

  Determine whether the argument is a window.

     [jQuery.isXMLDoc()](jquery.isxmldoc "Permalink to jQuery.isXMLDoc()")
----------------------------------------------------------------------

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

     [jQuery.makeArray()](jquery.makearray "Permalink to jQuery.makeArray()")
-------------------------------------------------------------------------

  Convert an array-like object into a true JavaScript array.

     [jQuery.map()](jquery.map "Permalink to jQuery.map()")
-------------------------------------------------------

  Translate all items in an array or object to new array of items.

     [jQuery.merge()](jquery.merge "Permalink to jQuery.merge()")
-------------------------------------------------------------

  Merge the contents of two arrays together into the first array.

     [jQuery.noConflict()](jquery.noconflict "Permalink to jQuery.noConflict()")
----------------------------------------------------------------------------

  Relinquish jQuery’s control of the $ variable.

     [jQuery.noop()](jquery.noop "Permalink to jQuery.noop()")
----------------------------------------------------------

  An empty function.

     [jQuery.now()](jquery.now "Permalink to jQuery.now()")
-------------------------------------------------------

  Return a number representing the current time.

     [jQuery.param()](jquery.param "Permalink to jQuery.param()")
-------------------------------------------------------------

  Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

     [jQuery.parseHTML()](jquery.parsehtml "Permalink to jQuery.parseHTML()")
-------------------------------------------------------------------------

  Parses a string into an array of DOM nodes.

     [jQuery.parseJSON()](jquery.parsejson "Permalink to jQuery.parseJSON()")
-------------------------------------------------------------------------

  Takes a well-formed JSON string and returns the resulting JavaScript value.

     [jQuery.parseXML()](jquery.parsexml "Permalink to jQuery.parseXML()")
----------------------------------------------------------------------

  Parses a string into an XML document.

     [jQuery.post()](jquery.post "Permalink to jQuery.post()")
----------------------------------------------------------

  Send data to the server using a HTTP POST request.

     [jQuery.proxy()](jquery.proxy "Permalink to jQuery.proxy()")
-------------------------------------------------------------

  Takes a function and returns a new one that will always have a particular context.

     [jQuery.queue()](jquery.queue "Permalink to jQuery.queue()")
-------------------------------------------------------------

  Show or manipulate the queue of functions to be executed on the matched element.

     [jQuery.ready](jquery.ready "Permalink to jQuery.ready")
---------------------------------------------------------

  A Promise-like object (or “thenable”) that resolves when the document is ready.

     [jQuery.readyException()](jquery.readyexception "Permalink to jQuery.readyException()")
----------------------------------------------------------------------------------------

  Handles errors thrown synchronously in functions wrapped in jQuery().

     [jQuery.removeData()](jquery.removedata "Permalink to jQuery.removeData()")
----------------------------------------------------------------------------

  Remove a previously-stored piece of data.

     [jQuery.speed](jquery.speed "Permalink to jQuery.speed")
---------------------------------------------------------

  Creates an object containing a set of properties ready to be used in the definition of custom animations.

     [jQuery.sub()](jquery.sub "Permalink to jQuery.sub()")
-------------------------------------------------------

  Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.

     [jQuery.support](jquery.support "Permalink to jQuery.support")
---------------------------------------------------------------

  A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery’s internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project’s feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

     [jQuery.trim()](jquery.trim "Permalink to jQuery.trim()")
----------------------------------------------------------

  Remove the whitespace from the beginning and end of a string.

     [jQuery.type()](jquery.type "Permalink to jQuery.type()")
----------------------------------------------------------

  Determine the internal JavaScript [[Class]] of an object.

     [jQuery.unique()](jquery.unique "Permalink to 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.

     [jQuery.uniqueSort()](jquery.uniquesort "Permalink to jQuery.uniqueSort()")
----------------------------------------------------------------------------

  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.

     [jQuery.when()](jquery.when "Permalink to jQuery.when()")
----------------------------------------------------------

  Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

     [.keydown()](keydown "Permalink to .keydown()")
------------------------------------------------

  Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.

     [.keypress()](keypress "Permalink to .keypress()")
---------------------------------------------------

  Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

     [.keyup()](keyup "Permalink to .keyup()")
------------------------------------------

  Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

     [:lang() Selector](lang-selector "Permalink to :lang() Selector")
------------------------------------------------------------------

  Selects all elements of the specified language.

     [.last()](last "Permalink to .last()")
---------------------------------------

  Reduce the set of matched elements to the final one in the set.

     [:last-child Selector](last-child-selector "Permalink to :last-child Selector")
--------------------------------------------------------------------------------

  Selects all elements that are the last child of their parent.

     [:last-of-type Selector](last-of-type-selector "Permalink to :last-of-type Selector")
--------------------------------------------------------------------------------------

  Selects all elements that are the last among siblings of the same element name.

     [:last Selector](last-selector "Permalink to :last Selector")
--------------------------------------------------------------

  Selects the last matched element.

     [.length](length "Permalink to .length")
-----------------------------------------

  The number of elements in the jQuery object.

     [.live()](live "Permalink to .live()")
---------------------------------------

  Attach an event handler for all elements which match the current selector, now and in the future.

     [.load()](load "Permalink to .load()")
---------------------------------------

  Load data from the server and place the returned HTML into the matched elements.

     [.load()](load-event "Permalink to .load()")
---------------------------------------------

  Bind an event handler to the “load” JavaScript event.

     [:lt() Selector](lt-selector "Permalink to :lt() Selector")
------------------------------------------------------------

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

     [.map()](map "Permalink to .map()")
------------------------------------

  Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

     [.mousedown()](mousedown "Permalink to .mousedown()")
------------------------------------------------------

  Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.

     [.mouseenter()](mouseenter "Permalink to .mouseenter()")
---------------------------------------------------------

  Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

     [.mouseleave()](mouseleave "Permalink to .mouseleave()")
---------------------------------------------------------

  Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

     [.mousemove()](mousemove "Permalink to .mousemove()")
------------------------------------------------------

  Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

     [.mouseout()](mouseout "Permalink to .mouseout()")
---------------------------------------------------

  Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

     [.mouseover()](mouseover "Permalink to .mouseover()")
------------------------------------------------------

  Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

     [.mouseup()](mouseup "Permalink to .mouseup()")
------------------------------------------------

  Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.

     [Multiple Attribute Selector [name=”value”][name2=”value2″]](multiple-attribute-selector "Permalink to Multiple Attribute Selector [name=”value”][name2=”value2″]")
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

  Matches elements that match all of the specified attribute filters.

     [Multiple Selector (“selector1, selector2, selectorN”)](multiple-selector "Permalink to Multiple Selector (“selector1, selector2, selectorN”)")
------------------------------------------------------------------------------------------------------------------------------------------------

  Selects the combined results of all the specified selectors.

     [.next()](next "Permalink to .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.

     [Next Adjacent Selector (“prev + next”)](next-adjacent-selector "Permalink to Next Adjacent Selector (“prev + next”)")
-----------------------------------------------------------------------------------------------------------------------

  Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

     [Next Siblings Selector (“prev ~ siblings”)](next-siblings-selector "Permalink to 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.

     [.nextAll()](nextall "Permalink to .nextAll()")
------------------------------------------------

  Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.nextUntil()](nextuntil "Permalink to .nextUntil()")
------------------------------------------------------

  Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

     [.not()](not "Permalink to .not()")
------------------------------------

  Remove elements from the set of matched elements.

     [:not() Selector](not-selector "Permalink to :not() Selector")
---------------------------------------------------------------

  Selects all elements that do not match the given selector.

     [:nth-child() Selector](nth-child-selector "Permalink to :nth-child() Selector")
---------------------------------------------------------------------------------

  Selects all elements that are the nth-child of their parent.

     [:nth-last-child() Selector](nth-last-child-selector "Permalink to :nth-last-child() Selector")
------------------------------------------------------------------------------------------------

  Selects all elements that are the nth-child of their parent, counting from the last element to the first.

     [:nth-last-of-type() Selector](nth-last-of-type-selector "Permalink to :nth-last-of-type() Selector")
------------------------------------------------------------------------------------------------------

  Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

     [:nth-of-type() Selector](nth-of-type-selector "Permalink to :nth-of-type() Selector")
---------------------------------------------------------------------------------------

  Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

     [.odd()](odd "Permalink to .odd()")
------------------------------------

  Reduce the set of matched elements to the odd ones in the set, numbered from zero.

     [:odd Selector](odd-selector "Permalink to :odd Selector")
-----------------------------------------------------------

  Selects odd elements, zero-indexed. See also :even.

     [.off()](off "Permalink to .off()")
------------------------------------

  Remove an event handler.

     [.offset()](offset "Permalink to .offset()")
---------------------------------------------

  Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

     [.offsetParent()](offsetparent "Permalink to .offsetParent()")
---------------------------------------------------------------

  Get the closest ancestor element that is positioned.

     [.on()](on "Permalink to .on()")
---------------------------------

  Attach an event handler function for one or more events to the selected elements.

     [.one()](one "Permalink to .one()")
------------------------------------

  Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

     [:only-child Selector](only-child-selector "Permalink to :only-child Selector")
--------------------------------------------------------------------------------

  Selects all elements that are the only child of their parent.

     [:only-of-type Selector](only-of-type-selector "Permalink to :only-of-type Selector")
--------------------------------------------------------------------------------------

  Selects all elements that have no siblings with the same element name.

     [.outerHeight()](outerheight "Permalink to .outerHeight()")
------------------------------------------------------------

  Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

     [.outerWidth()](outerwidth "Permalink to .outerWidth()")
---------------------------------------------------------

  Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

     [.parent()](parent "Permalink to .parent()")
---------------------------------------------

  Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

     [:parent Selector](parent-selector "Permalink to :parent Selector")
--------------------------------------------------------------------

  Select all elements that have at least one child node (either an element or text).

     [.parents()](parents "Permalink to .parents()")
------------------------------------------------

  Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

     [.parentsUntil()](parentsuntil "Permalink to .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, DOM node, or jQuery object.

     [:password Selector](password-selector "Permalink to :password Selector")
--------------------------------------------------------------------------

  Selects all elements of type password.

     [.position()](position "Permalink to .position()")
---------------------------------------------------

  Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

     [.prepend()](prepend "Permalink to .prepend()")
------------------------------------------------

  Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

     [.prependTo()](prependto "Permalink to .prependTo()")
------------------------------------------------------

  Insert every element in the set of matched elements to the beginning of the target.

     [.prev()](prev "Permalink to .prev()")
---------------------------------------

  Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

     [.prevAll()](prevall "Permalink to .prevAll()")
------------------------------------------------

  Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.prevUntil()](prevuntil "Permalink to .prevUntil()")
------------------------------------------------------

  Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

     [.promise()](promise "Permalink to .promise()")
------------------------------------------------

  Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

     [.prop()](prop "Permalink to .prop()")
---------------------------------------

  Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

     [.pushStack()](pushstack "Permalink to .pushStack()")
------------------------------------------------------

  Add a collection of DOM elements onto the jQuery stack.

     [.queue()](queue "Permalink to .queue()")
------------------------------------------

  Show or manipulate the queue of functions to be executed on the matched elements.

     [:radio Selector](radio-selector "Permalink to :radio Selector")
-----------------------------------------------------------------

  Selects all elements of type radio.

     [.ready()](ready "Permalink to .ready()")
------------------------------------------

  Specify a function to execute when the DOM is fully loaded.

     [.remove()](remove "Permalink to .remove()")
---------------------------------------------

  Remove the set of matched elements from the DOM.

     [.removeAttr()](removeattr "Permalink to .removeAttr()")
---------------------------------------------------------

  Remove an attribute from each element in the set of matched elements.

     [.removeClass()](removeclass "Permalink to .removeClass()")
------------------------------------------------------------

  Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

     [.removeData()](removedata "Permalink to .removeData()")
---------------------------------------------------------

  Remove a previously-stored piece of data.

     [.removeProp()](removeprop "Permalink to .removeProp()")
---------------------------------------------------------

  Remove a property for the set of matched elements.

     [.replaceAll()](replaceall "Permalink to .replaceAll()")
---------------------------------------------------------

  Replace each target element with the set of matched elements.

     [.replaceWith()](replacewith "Permalink to .replaceWith()")
------------------------------------------------------------

  Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

     [:reset Selector](reset-selector "Permalink to :reset Selector")
-----------------------------------------------------------------

  Selects all elements of type reset.

     [.resize()](resize "Permalink to .resize()")
---------------------------------------------

  Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.

     [:root Selector](root-selector "Permalink to :root Selector")
--------------------------------------------------------------

  Selects the element that is the root of the document.

     [.scroll()](scroll "Permalink to .scroll()")
---------------------------------------------

  Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

     [.scrollLeft()](scrollleft "Permalink to .scrollLeft()")
---------------------------------------------------------

  Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

     [.scrollTop()](scrolltop "Permalink to .scrollTop()")
------------------------------------------------------

  Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

     [.select()](select "Permalink to .select()")
---------------------------------------------

  Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

     [:selected Selector](selected-selector "Permalink to :selected Selector")
--------------------------------------------------------------------------

  Selects all elements that are selected.

     [.selector](selector "Permalink to .selector")
-----------------------------------------------

  A selector representing selector passed to jQuery(), if any, when creating the original set.

     [.serialize()](serialize "Permalink to .serialize()")
------------------------------------------------------

  Encode a set of form elements as a string for submission.

     [.serializeArray()](serializearray "Permalink to .serializeArray()")
---------------------------------------------------------------------

  Encode a set of form elements as an array of names and values.

     [.show()](show "Permalink to .show()")
---------------------------------------

  Display the matched elements.

     [.siblings()](siblings "Permalink to .siblings()")
---------------------------------------------------

  Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.size()](size "Permalink to .size()")
---------------------------------------

  Return the number of elements in the jQuery object.

     [.slice()](slice "Permalink to .slice()")
------------------------------------------

  Reduce the set of matched elements to a subset specified by a range of indices.

     [.slideDown()](slidedown "Permalink to .slideDown()")
------------------------------------------------------

  Display the matched elements with a sliding motion.

     [.slideToggle()](slidetoggle "Permalink to .slideToggle()")
------------------------------------------------------------

  Display or hide the matched elements with a sliding motion.

     [.slideUp()](slideup "Permalink to .slideUp()")
------------------------------------------------

  Hide the matched elements with a sliding motion.

     [.stop()](stop "Permalink to .stop()")
---------------------------------------

  Stop the currently-running animation on the matched elements.

     [.submit()](submit "Permalink to .submit()")
---------------------------------------------

  Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

     [:submit Selector](submit-selector "Permalink to :submit Selector")
--------------------------------------------------------------------

  Selects all elements of type submit.

     [:target Selector](target-selector "Permalink to :target Selector")
--------------------------------------------------------------------

  Selects the target element indicated by the fragment identifier of the document’s URI.

     [.text()](text "Permalink to .text()")
---------------------------------------

  Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

     [:text Selector](text-selector "Permalink to :text Selector")
--------------------------------------------------------------

  Selects all input elements of type text.

     [.toArray()](toarray "Permalink to .toArray()")
------------------------------------------------

  Retrieve all the elements contained in the jQuery set, as an array.

     [.toggle()](toggle "Permalink to .toggle()")
---------------------------------------------

  Display or hide the matched elements.

     [.toggle()](toggle-event "Permalink to .toggle()")
---------------------------------------------------

  Bind two or more handlers to the matched elements, to be executed on alternate clicks.

     [.toggleClass()](toggleclass "Permalink to .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 state argument.

     [.trigger()](trigger "Permalink to .trigger()")
------------------------------------------------

  Execute all handlers and behaviors attached to the matched elements for the given event type.

     [.triggerHandler()](triggerhandler "Permalink to .triggerHandler()")
---------------------------------------------------------------------

  Execute all handlers attached to an element for an event.

     [.unbind()](unbind "Permalink to .unbind()")
---------------------------------------------

  Remove a previously-attached event handler from the elements.

     [.undelegate()](undelegate "Permalink to .undelegate()")
---------------------------------------------------------

  Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

     [.unload()](unload "Permalink to .unload()")
---------------------------------------------

  Bind an event handler to the “unload” JavaScript event.

     [.unwrap()](unwrap "Permalink to .unwrap()")
---------------------------------------------

  Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

     [.val()](val "Permalink to .val()")
------------------------------------

  Get the current value of the first element in the set of matched elements or set the value of every matched element.

     [:visible Selector](visible-selector "Permalink to :visible Selector")
-----------------------------------------------------------------------

  Selects all elements that are visible.

     [.width()](width "Permalink to .width()")
------------------------------------------

  Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

     [.wrap()](wrap "Permalink to .wrap()")
---------------------------------------

  Wrap an HTML structure around each element in the set of matched elements.

     [.wrapAll()](wrapall "Permalink to .wrapAll()")
------------------------------------------------

  Wrap an HTML structure around all elements in the set of matched elements.

     [.wrapInner()](wrapinner "Permalink to .wrapInner()")
------------------------------------------------------

  Wrap an HTML structure around the content of each element in the set of matched elements.

  

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/>

Category: Traversing
====================

   [.add()](../add "Permalink to .add()")
=======================================

  Create a new jQuery object with elements added to the set of matched elements.

     [.addBack()](../addback "Permalink to .addBack()")
===================================================

  Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

     [.andSelf()](../andself "Permalink to .andSelf()")
===================================================

  Add the previous set of elements on the stack to the current set.

     [.children()](../children "Permalink to .children()")
======================================================

  Get the children of each element in the set of matched elements, optionally filtered by a selector.

     [.closest()](../closest "Permalink to .closest()")
===================================================

  For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

     [.contents()](../contents "Permalink to .contents()")
======================================================

  Get the children of each element in the set of matched elements, including text and comment nodes.

     [.each()](../each "Permalink to .each()")
==========================================

  Iterate over a jQuery object, executing a function for each matched element.

     [.end()](../end "Permalink to .end()")
=======================================

  End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

     [.eq()](../eq "Permalink to .eq()")
====================================

  Reduce the set of matched elements to the one at the specified index.

     [.even()](../even "Permalink to .even()")
==========================================

  Reduce the set of matched elements to the even ones in the set, numbered from zero.

     [.filter()](../filter "Permalink to .filter()")
================================================

  Reduce the set of matched elements to those that match the selector or pass the function’s test.

     [.find()](../find "Permalink to .find()")
==========================================

  Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

     [.first()](../first "Permalink to .first()")
=============================================

  Reduce the set of matched elements to the first in the set.

     [.has()](../has "Permalink to .has()")
=======================================

  Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

     [.is()](../is "Permalink to .is()")
====================================

  Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

     [.last()](../last "Permalink to .last()")
==========================================

  Reduce the set of matched elements to the final one in the set.

     [.map()](../map "Permalink to .map()")
=======================================

  Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

     [.next()](../next "Permalink to .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.

     [.nextAll()](../nextall "Permalink to .nextAll()")
===================================================

  Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.nextUntil()](../nextuntil "Permalink to .nextUntil()")
=========================================================

  Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

     [.not()](../not "Permalink to .not()")
=======================================

  Remove elements from the set of matched elements.

     [.odd()](../odd "Permalink to .odd()")
=======================================

  Reduce the set of matched elements to the odd ones in the set, numbered from zero.

     [.offsetParent()](../offsetparent "Permalink to .offsetParent()")
==================================================================

  Get the closest ancestor element that is positioned.

     [.parent()](../parent "Permalink to .parent()")
================================================

  Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

     [.parents()](../parents "Permalink to .parents()")
===================================================

  Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

     [.parentsUntil()](../parentsuntil "Permalink to .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, DOM node, or jQuery object.

     [.prev()](../prev "Permalink to .prev()")
==========================================

  Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

     [.prevAll()](../prevall "Permalink to .prevAll()")
===================================================

  Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.prevUntil()](../prevuntil "Permalink to .prevUntil()")
=========================================================

  Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

     [.siblings()](../siblings "Permalink to .siblings()")
======================================================

  Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.slice()](../slice "Permalink to .slice()")
=============================================

  Reduce the set of matched elements to a subset specified by a range of indices.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/traversing>

.addBack()
==========

   .addBack( [selector ] )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

 * ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)[.addBack( [selector ] )](#addBack-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match the current set of elements against.

  As described in the discussion for `[.end()](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, `.addBack()` can help.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 The result of the following code is a red background behind items 3, 4 and 5:

 
```
$( "li.third-item" ).nextAll().addBack()
  .css( "background-color", "red" );
```
 First, the initial selector locates item 3, initializing the stack with the set containing just this item. The call to `.nextAll()` then pushes the set of items 4 and 5 onto the stack. Finally, the `.addBack()` invocation merges these two sets together, creating a jQuery object that points to all three items in document order: `{[<li.third-item>,<li>,<li> ]}`.

  Example:
--------


 The `.addBack()` method causes the previous set of DOM elements in the traversal stack to be added to the current set. In the first example, the top stack contains the set resulting from `.find("p")`. In the second example, `.addBack()` adds the previous set of elements on the stack — in this case `$("div.after-addback")` — to the current set, selecting both the div and its enclosed paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addBack demo</title>
  <style>
  p, div {
    margin: 5px;
    padding: 5px;
  }
  .border {
    border: 2px solid red;
  }
  .background {
    background: yellow;
  }
  .left, .right {
    width: 45%;
    float: left;
  }
  .right {
    margin-left: 3%;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="left">
  <p><strong>Before <code>addBack()</code></strong></p>
  <div class="before-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
<div class="right">
  <p><strong>After <code>addBack()</code></strong></p>
  <div class="after-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
 
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
 
// First Example
$( "div.before-addback" ).find( "p" ).addClass( "background" );
 
// Second Example
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/addBack>

Category: Class Attribute
=========================

 
These methods inspect and manipulate the CSS classes assigned to elements.

    [.addClass()](../../addclass "Permalink to .addClass()")
=========================================================

  Adds the specified class(es) to each element in the set of matched elements.

     [.hasClass()](../../hasclass "Permalink to .hasClass()")
=========================================================

  Determine whether any of the matched elements are assigned the given class.

     [.removeClass()](../../removeclass "Permalink to .removeClass()")
==================================================================

  Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

     [.toggleClass()](../../toggleclass "Permalink to .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 state argument.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/class-attribute>

Category: Attributes
====================

 
These methods get and set DOM attributes of elements.

    [.addClass()](../addclass "Permalink to .addClass()")
======================================================

  Adds the specified class(es) to each element in the set of matched elements.

     [.attr()](../attr "Permalink to .attr()")
==========================================

  Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

     [.hasClass()](../hasclass "Permalink to .hasClass()")
======================================================

  Determine whether any of the matched elements are assigned the given class.

     [.html()](../html "Permalink to .html()")
==========================================

  Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

     [.prop()](../prop "Permalink to .prop()")
==========================================

  Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

     [.removeAttr()](../removeattr "Permalink to .removeAttr()")
============================================================

  Remove an attribute from each element in the set of matched elements.

     [.removeClass()](../removeclass "Permalink to .removeClass()")
===============================================================

  Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

     [.removeProp()](../removeprop "Permalink to .removeProp()")
============================================================

  Remove a property for the set of matched elements.

     [.toggleClass()](../toggleclass "Permalink to .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 state argument.

     [.val()](../val "Permalink to .val()")
=======================================

  Get the current value of the first element in the set of matched elements or set the value of every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/attributes>

.addClass()
===========

   .addClass( className )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Adds the specified class(es) to each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.addClass( className )](#addClass-className)


	+ **className** Type: [String](types#String)  One or more space-separated classes to be added to the class attribute of each matched element.
* ####  version added: [3.3](https://api.jquery.com/category/version/3.3/)[.addClass( classNames )](#addClass-classNames)


	+ **classNames** Type: [Array](types#Array)  An array of classes to be added to the class attribute of each matched element.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.addClass( function )](#addClass-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) currentClassName ) => [String](types#String)  A function returning one or more space-separated classes or an array of classes to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, `this` refers to the current element in the set.

  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.

 Before jQuery version 1.12/2.2, the `.addClass()` method manipulated the `className` *property* of the selected elements, not the `class` *attribute*. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).

 As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the `class` *attribute* is used instead. So, `.addClass()` can be used on XML or SVG documents.

 More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

 
```
$( "p" ).addClass( "myClass yourClass" );
```
 This method is often used with `.removeClass()` to switch elements' classes from one to another, like so:

 
```
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
```
 Here, the `myClass` and `noClass` classes are removed from all paragraphs, while `yourClass` is added.

 As of jQuery 1.4, the `.addClass()` method's argument can receive a function.

 
```
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});
```
 Given an unordered list with two `<li>` elements, this example adds the class "item-0" to the first `<li>` and "item-1" to the second.

  Examples:
---------


 Add the class "selected" to the matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>
```
 #### Demo:

   Add the classes "selected" and "highlight" to the matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected highlight" );
</script>
 
</body>
</html>
```
 #### Demo:

   Add the classes "selected" and "highlight" to the matched elements (3.3+ syntax).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( [ "selected", "highlight" ] );
</script>
 
</body>
</html>
```
 #### Demo:

   Pass in a function to `.addClass()` to add the "green" class to a div that already has a "red" class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  div {
    background: white;
  }
  .red {
    background: red;
  }
  .red.green {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
 
<script>
$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "red" ) {
    addedClass = "green";
    $( "p" ).text( "There is one green div" );
  }
 
  return addedClass;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/addClass>

Category: Manipulation
======================

 
All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the [Attributes category](attributes)), while others set an element's style properties (also listed in the [CSS category](css)). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as "setters," as they change the values of properties.  
 A few of these methods—such as `.attr()`, `.html()`, and `.val()`—also act as "getters," retrieving information from DOM elements for later use.

    [.addClass()](../addclass "Permalink to .addClass()")
======================================================

  Adds the specified class(es) to each element in the set of matched elements.

     [.after()](../after "Permalink to .after()")
=============================================

  Insert content, specified by the parameter, after each element in the set of matched elements.

     [.append()](../append "Permalink to .append()")
================================================

  Insert content, specified by the parameter, to the end of each element in the set of matched elements.

     [.appendTo()](../appendto "Permalink to .appendTo()")
======================================================

  Insert every element in the set of matched elements to the end of the target.

     [.attr()](../attr "Permalink to .attr()")
==========================================

  Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

     [.before()](../before "Permalink to .before()")
================================================

  Insert content, specified by the parameter, before each element in the set of matched elements.

     [.clone()](../clone "Permalink to .clone()")
=============================================

  Create a deep copy of the set of matched elements.

     [.css()](../css "Permalink to .css()")
=======================================

  Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

     [.detach()](../detach "Permalink to .detach()")
================================================

  Remove the set of matched elements from the DOM.

     [.empty()](../empty "Permalink to .empty()")
=============================================

  Remove all child nodes of the set of matched elements from the DOM.

     [.hasClass()](../hasclass "Permalink to .hasClass()")
======================================================

  Determine whether any of the matched elements are assigned the given class.

     [.height()](../height "Permalink to .height()")
================================================

  Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

     [.html()](../html "Permalink to .html()")
==========================================

  Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

     [.innerHeight()](../innerheight "Permalink to .innerHeight()")
===============================================================

  Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

     [.innerWidth()](../innerwidth "Permalink to .innerWidth()")
============================================================

  Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

     [.insertAfter()](../insertafter "Permalink to .insertAfter()")
===============================================================

  Insert every element in the set of matched elements after the target.

     [.insertBefore()](../insertbefore "Permalink to .insertBefore()")
==================================================================

  Insert every element in the set of matched elements before the target.

     [jQuery.cssNumber](../jquery.cssnumber "Permalink to jQuery.cssNumber")
========================================================================

  An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

     [jQuery.htmlPrefilter()](../jquery.htmlprefilter "Permalink to jQuery.htmlPrefilter()")
========================================================================================

  Modify and filter HTML strings passed through jQuery manipulation methods.

     [.offset()](../offset "Permalink to .offset()")
================================================

  Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

     [.outerHeight()](../outerheight "Permalink to .outerHeight()")
===============================================================

  Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

     [.outerWidth()](../outerwidth "Permalink to .outerWidth()")
============================================================

  Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

     [.position()](../position "Permalink to .position()")
======================================================

  Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

     [.prepend()](../prepend "Permalink to .prepend()")
===================================================

  Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

     [.prependTo()](../prependto "Permalink to .prependTo()")
=========================================================

  Insert every element in the set of matched elements to the beginning of the target.

     [.prop()](../prop "Permalink to .prop()")
==========================================

  Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

     [.remove()](../remove "Permalink to .remove()")
================================================

  Remove the set of matched elements from the DOM.

     [.removeAttr()](../removeattr "Permalink to .removeAttr()")
============================================================

  Remove an attribute from each element in the set of matched elements.

     [.removeClass()](../removeclass "Permalink to .removeClass()")
===============================================================

  Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

     [.removeProp()](../removeprop "Permalink to .removeProp()")
============================================================

  Remove a property for the set of matched elements.

     [.replaceAll()](../replaceall "Permalink to .replaceAll()")
============================================================

  Replace each target element with the set of matched elements.

     [.replaceWith()](../replacewith "Permalink to .replaceWith()")
===============================================================

  Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

     [.scrollLeft()](../scrollleft "Permalink to .scrollLeft()")
============================================================

  Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

     [.scrollTop()](../scrolltop "Permalink to .scrollTop()")
=========================================================

  Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

     [.text()](../text "Permalink to .text()")
==========================================

  Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

     [.toggleClass()](../toggleclass "Permalink to .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 state argument.

     [.unwrap()](../unwrap "Permalink to .unwrap()")
================================================

  Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

     [.val()](../val "Permalink to .val()")
=======================================

  Get the current value of the first element in the set of matched elements or set the value of every matched element.

     [.width()](../width "Permalink to .width()")
=============================================

  Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

     [.wrap()](../wrap "Permalink to .wrap()")
==========================================

  Wrap an HTML structure around each element in the set of matched elements.

     [.wrapAll()](../wrapall "Permalink to .wrapAll()")
===================================================

  Wrap an HTML structure around all elements in the set of matched elements.

     [.wrapInner()](../wrapinner "Permalink to .wrapInner()")
=========================================================

  Wrap an HTML structure around the content of each element in the set of matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation>

.after()
========

   .after( content [, content ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------

  **Description:** Insert content, specified by the parameter, after each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.after( content [, content ] )](#after-content-content)


	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  HTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert after each element in the set of matched elements.
	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert after each element in the set of matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.after( function )](#after-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index ) => [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [jQuery](types#jQuery)  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, `this` refers to the current element in the set.
* ####  version added: [1.10](https://api.jquery.com/category/version/1.10/)[.after( function-html )](#after-function-html)


	+ **function-html** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) html ) => [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [jQuery](types#jQuery)  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, `this` refers to the current element in the set.

  The `.after()` and `[.insertAfter()](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 content to be inserted comes from the method's argument: `$(target).after(contentToBeInserted)`. With `.insertAfter()`, on the other hand, the content precedes the method and is inserted after the target, which in turn is passed as the `.insertAfter()` method's argument: `$(contentToBeInserted).insertAfter(target)`.

 Using the following HTML:

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 Content can be created and then inserted after several elements at once:

 
```
$( ".inner" ).after( "<p>Test</p>" );
```
 Each inner `<div>` element gets this new content:

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>
```
 An element in the DOM can also be selected and inserted after another element:

 
```
$( ".container" ).after( $( "h2" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved rather than cloned:

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
```
 **Important**: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

 #### Passing a Function

 As of jQuery 1.4, `.after()` supports passing a function that returns the elements to insert.

 
```
$( "p" ).after(function() {
  return "<div>" + this.className + "</div>";
});
```
 This example inserts a `<div>` after each paragraph, with each new `<div>` containing the class name(s) of its preceding paragraph.

 #### Additional Arguments

 Similar to other content-adding methods such as `[.prepend()](prepend)` and `[.before()](before)`, `.after()` also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

 For example, the following will insert two new `<div>`s and an existing `<div>` after the first paragraph:

 
```
var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );
```
 Since `.after()` can accept any number of additional arguments, the same result can be achieved by passing in the three `<div>`s as three separate arguments, like so: `$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 )`. The type and number of arguments will largely depend on the elements that are collected in the code.

  ### Additional Notes:

 * Prior to jQuery 1.9, `.after()` would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, `.after()`, `.before()`, and `.replaceWith()` always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.
* By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
 Examples:
---------


 Inserts some HTML after all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).after( "<b>Hello</b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Inserts a DOM element after all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).after( document.createTextNode( "Hello" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Hello</b>
<p>I would like to say: </p>
 
<script>
$( "p" ).after( $( "b" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/after>

Category: Miscellaneous Traversing
==================================

   [.add()](../../add "Permalink to .add()")
==========================================

  Create a new jQuery object with elements added to the set of matched elements.

     [.addBack()](../../addback "Permalink to .addBack()")
======================================================

  Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

     [.andSelf()](../../andself "Permalink to .andSelf()")
======================================================

  Add the previous set of elements on the stack to the current set.

     [.contents()](../../contents "Permalink to .contents()")
=========================================================

  Get the children of each element in the set of matched elements, including text and comment nodes.

     [.end()](../../end "Permalink to .end()")
==========================================

  End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

     [.not()](../../not "Permalink to .not()")
==========================================

  Remove elements from the set of matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/traversing/miscellaneous-traversal>

.add()
======

   .add( selector )Returns: [jQuery](types#jQuery)
------------------------------------------------

  **Description:** Create a new jQuery object with elements added to the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.add( selector )](#add-selector)


	+ **selector** Type: [Selector](types#Selector)  A string representing a selector expression to find additional elements to add to the set of matched elements.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.add( elements )](#add-elements)


	+ **elements** Type: [Element](types#Element)  One or more elements to add to the set of matched elements.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.add( html )](#add-html)


	+ **html** Type: [htmlString](types#htmlString)  An HTML fragment to add to the set of matched elements.
* ####  version added: [1.3.2](https://api.jquery.com/category/version/1.3.2/)[.add( selection )](#add-selection)


	+ **selection** Type: [jQuery](types#jQuery)  An existing jQuery object to add to the set of matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.add( selector, context )](#add-selector-context)


	+ **selector** Type: [Selector](types#Selector)  A string representing a selector expression to find additional elements to add to the set of matched elements.
	+ **context** Type: [Element](types#Element)  The point in the document at which the selector should begin matching; similar to the context argument of the `$(selector, context)` method.

  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.

 Do not assume that this method appends the elements to the existing collection in the order they are passed to the `.add()` method. When all elements are members of the same document, the resulting collection from `.add()` will be sorted in document order; that is, in order of each element's appearance in the document. If the collection consists of elements from different documents or ones not in any document, the sort order is undefined. To create a jQuery object with elements in a well-defined order and without sorting overhead, use the `$(array_of_DOM_elements)` signature.

 The updated set of elements can be used in a following (chained) method, or assigned to a variable for later use. For example:

 
```
$( "p" ).add( "div" ).addClass( "widget" );
var pdiv = $( "p" ).add( "div" );
```
 The following will *not* save the added elements, because the `.add()` method creates a new set and leaves the original set in pdiv unchanged:

 
```
var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change
```
 Consider a page with a simple list and a paragraph following it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a paragraph</p>
```
 We can select the list items and then the paragraph by using either a selector or a reference to the DOM element itself as the `.add()` method's argument:

 
```
$( "li" ).add( "p" ).css( "background-color", "red" );
```
 Or:

 
```
$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] )
  .css( "background-color", "red" );
```
 The result of this call is a red background behind all four elements. Using an HTML snippet as the `.add()` method's argument (as in the third version), we can create additional elements on the fly and add those elements to the matched set of elements. Let's say, for example, that we want to alter the background of the list items along with a newly created paragraph:

 
```
$( "li" ).add( "<p id='new'>new paragraph</p>" )
  .css( "background-color", "red" );
```
 Although the new paragraph has been created and its background color changed, it still does not appear on the page. To place it on the page, we could add one of the insertion methods to the chain.

 As of jQuery 1.4 the results from .add() will always be returned in document order (rather than a simple concatenation).

 **Note:** To reverse the `.add()` you can use [`.not( elements | selector )`](not) to remove elements from the jQuery results, or [`.end()`](end) to return to the selection before you added.

  Examples:
---------


 Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
  p {
    clear: left;
    font-weight: bold;
    font-size: 16px;
    color: blue;
    margin: 0 10px;
    padding: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<p>Added this... (notice no border)</p>
 
<script>
$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   Adds more elements, matched by the given expression, to the set of matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span>Hello Again</span>
 
<script>
$( "p" ).add( "span" ).css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   Adds more elements, created on the fly, to the set of matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
 
<script>
$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
</script>
 
</body>
</html>
```
 #### Demo:

   Adds one or more Elements to the set of matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   Demonstrates how to add (or push) elements to an existing collection

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
var collection = $( "p" );
// Capture the new collection
collection = collection.add( document.getElementById( "a" ) );
collection.css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/add>

.ajaxStop()
===========

   .ajaxStop( handler )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Register a handler to be called when all Ajax requests have completed. This is an [Ajax Event](ajax_events).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ajaxStop( handler )](#ajaxStop-handler)


	+ **handler** Type: [Function](types#Function)() The function to be invoked.

  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. 

 To observe this method in action, set up a basic Ajax load request:

 
```
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
```
 Attach the event handler to the document:

 
```
$( document ).ajaxStop(function() {
  $( ".log" ).text( "Triggered ajaxStop handler." );
});
```
 Now, make an Ajax request using any jQuery method:

 
```
$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});
```
 When the user clicks the element with class `trigger` and the Ajax request completes, the log message is displayed.

  ### Additional Notes:

 * As of jQuery 1.9, all the handlers for the [jQuery global Ajax events](category/ajax/global-ajax-event-handlers), including those added with the `.ajaxStop()` method, *must* be attached to `document`.
* If `[$.ajax()](jquery.ajax)` or `[$.ajaxSetup()](jquery.ajaxsetup)` is called with the `global` option set to `false`, the `.ajaxStop()` method will not fire.
 Example:
--------


 Hide a loading message after all the Ajax requests have stopped.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ajaxStop>

.ajaxSuccess()
==============

   .ajaxSuccess( handler )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Attach a function to be executed whenever an Ajax request completes successfully. This is an [Ajax Event](ajax_events).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ajaxSuccess( handler )](#ajaxSuccess-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) event, [jqXHR](types#jqXHR) jqXHR, [PlainObject](types#PlainObject) ajaxOptions, [PlainObject](types#PlainObject) data ) The function to be invoked.

  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.

 To observe this method in action, set up a basic Ajax load request:

 
```
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
```
 Attach the event handler to any element:

 
```
$(document).ajaxSuccess(function() {
  $( ".log" ).text( "Triggered ajaxSuccess handler." );
});
```
 Now, make an Ajax request using any jQuery method:

 
```
$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
});
```
 When the user clicks the element with class `trigger` and the Ajax request completes successfully, the log message is displayed.

 All `ajaxSuccess` handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, you can use the parameters passed to the handler. Each time an `ajaxSuccess` handler is executed, it is passed the event object, the `XMLHttpRequest` object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:

 
```
$( document ).ajaxSuccess(function( event, xhr, settings ) {
  if ( settings.url == "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSuccess handler. The Ajax response was: " +
      xhr.responseText );
  }
});
```
 **Note:** You can get the returned Ajax contents by looking at `xhr.responseXML` or `xhr.responseText` for xml and html respectively.

  ### Additional Notes:

 * As of jQuery 1.9, all the handlers for the [jQuery global Ajax events](category/ajax/global-ajax-event-handlers), including those added with the `.ajaxSuccess()` method, *must* be attached to `document`.
* If `[$.ajax()](jquery.ajax)` or `[$.ajaxSetup()](jquery.ajaxsetup)` is called with the `global` option set to `false`, the `.ajaxSuccess()` method will not fire.
 Example:
--------


 Show a message when an Ajax request completes successfully.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ajaxSuccess>

Category: DOM Insertion, Outside
================================

 
These methods allow us to insert new content outside an existing element.

    [.after()](../../after "Permalink to .after()")
================================================

  Insert content, specified by the parameter, after each element in the set of matched elements.

     [.before()](../../before "Permalink to .before()")
===================================================

  Insert content, specified by the parameter, before each element in the set of matched elements.

     [.insertAfter()](../../insertafter "Permalink to .insertAfter()")
==================================================================

  Insert every element in the set of matched elements after the target.

     [.insertBefore()](../../insertbefore "Permalink to .insertBefore()")
=====================================================================

  Insert every element in the set of matched elements before the target.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/dom-insertion-outside>

Category: CSS
=============

 
These methods get and set CSS-related properties of elements.

    [.addClass()](../addclass "Permalink to .addClass()")
======================================================

  Adds the specified class(es) to each element in the set of matched elements.

     [.css()](../css "Permalink to .css()")
=======================================

  Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

     [.hasClass()](../hasclass "Permalink to .hasClass()")
======================================================

  Determine whether any of the matched elements are assigned the given class.

     [.height()](../height "Permalink to .height()")
================================================

  Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

     [.innerHeight()](../innerheight "Permalink to .innerHeight()")
===============================================================

  Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

     [.innerWidth()](../innerwidth "Permalink to .innerWidth()")
============================================================

  Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

     [jQuery.cssHooks](../jquery.csshooks "Permalink to jQuery.cssHooks")
=====================================================================

  Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

     [jQuery.cssNumber](../jquery.cssnumber "Permalink to jQuery.cssNumber")
========================================================================

  An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

     [jQuery.escapeSelector()](../jquery.escapeselector "Permalink to jQuery.escapeSelector()")
===========================================================================================

  Escapes any character that has a special meaning in a CSS selector.

     [.offset()](../offset "Permalink to .offset()")
================================================

  Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

     [.outerHeight()](../outerheight "Permalink to .outerHeight()")
===============================================================

  Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

     [.outerWidth()](../outerwidth "Permalink to .outerWidth()")
============================================================

  Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

     [.position()](../position "Permalink to .position()")
======================================================

  Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

     [.removeClass()](../removeclass "Permalink to .removeClass()")
===============================================================

  Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

     [.scrollLeft()](../scrollleft "Permalink to .scrollLeft()")
============================================================

  Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

     [.scrollTop()](../scrolltop "Permalink to .scrollTop()")
=========================================================

  Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

     [.toggleClass()](../toggleclass "Permalink to .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 state argument.

     [.width()](../width "Permalink to .width()")
=============================================

  Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/css>

Category: Global Ajax Event Handlers
====================================

 
These methods register handlers to be called when certain events, such as initialization or completion, take place for any Ajax request on the page. The global events are fired on each Ajax request if the `global` property in [`jQuery.ajaxSetup()`](../../jquery.ajaxsetup) is `true`, which it is by default. *Note: Global events are never fired for cross-domain script or JSONP requests, regardless of the value of `global`.*

    [.ajaxComplete()](../../ajaxcomplete "Permalink to .ajaxComplete()")
=====================================================================

  Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

     [.ajaxError()](../../ajaxerror "Permalink to .ajaxError()")
============================================================

  Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

     [.ajaxSend()](../../ajaxsend "Permalink to .ajaxSend()")
=========================================================

  Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

     [.ajaxStart()](../../ajaxstart "Permalink to .ajaxStart()")
============================================================

  Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

     [.ajaxStop()](../../ajaxstop "Permalink to .ajaxStop()")
=========================================================

  Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

     [.ajaxSuccess()](../../ajaxsuccess "Permalink to .ajaxSuccess()")
==================================================================

  Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/ajax/global-ajax-event-handlers>

Category: Ajax
==============

 
The jQuery library has a full suite of Ajax capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.

    [.ajaxComplete()](../ajaxcomplete "Permalink to .ajaxComplete()")
==================================================================

  Register a handler to be called when Ajax requests complete. This is an AjaxEvent.

     [.ajaxError()](../ajaxerror "Permalink to .ajaxError()")
=========================================================

  Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

     [.ajaxSend()](../ajaxsend "Permalink to .ajaxSend()")
======================================================

  Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.

     [.ajaxStart()](../ajaxstart "Permalink to .ajaxStart()")
=========================================================

  Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

     [.ajaxStop()](../ajaxstop "Permalink to .ajaxStop()")
======================================================

  Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

     [.ajaxSuccess()](../ajaxsuccess "Permalink to .ajaxSuccess()")
===============================================================

  Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.

     [jQuery.ajax()](../jquery.ajax "Permalink to jQuery.ajax()")
=============================================================

  Perform an asynchronous HTTP (Ajax) request.

     [jQuery.ajaxPrefilter()](../jquery.ajaxprefilter "Permalink to jQuery.ajaxPrefilter()")
========================================================================================

  Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

     [jQuery.ajaxSetup()](../jquery.ajaxsetup "Permalink to jQuery.ajaxSetup()")
============================================================================

  Set default values for future Ajax requests. Its use is not recommended.

     [jQuery.ajaxTransport()](../jquery.ajaxtransport "Permalink to jQuery.ajaxTransport()")
========================================================================================

  Creates an object that handles the actual transmission of Ajax data.

     [jQuery.get()](../jquery.get "Permalink to jQuery.get()")
==========================================================

  Load data from the server using a HTTP GET request.

     [jQuery.getJSON()](../jquery.getjson "Permalink to jQuery.getJSON()")
======================================================================

  Load JSON-encoded data from the server using a GET HTTP request.

     [jQuery.getScript()](../jquery.getscript "Permalink to jQuery.getScript()")
============================================================================

  Load a JavaScript file from the server using a GET HTTP request, then execute it.

     [jQuery.param()](../jquery.param "Permalink to jQuery.param()")
================================================================

  Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

     [jQuery.post()](../jquery.post "Permalink to jQuery.post()")
=============================================================

  Send data to the server using a HTTP POST request.

     [.load()](../load "Permalink to .load()")
==========================================

  Load data from the server and place the returned HTML into the matched elements.

     [.serialize()](../serialize "Permalink to .serialize()")
=========================================================

  Encode a set of form elements as a string for submission.

     [.serializeArray()](../serializearray "Permalink to .serializeArray()")
========================================================================

  Encode a set of form elements as an array of names and values.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/ajax>

Category: Selectors
===================

 
Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

 To use any of the meta-characters ( such as  `!"#$%&'()*+,./:;<=>?@[\]^`{|}~` ) as a literal part of a name, it must be escaped with with two backslashes: `\\`. For example, an element with `id="foo.bar"`, can use the selector `$("#foo\\.bar")`. The W3C CSS specification contains the [complete set of rules regarding valid CSS selectors](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). Also useful is the blog entry by Mathias Bynens on [CSS character escape sequences for identifiers](https://mathiasbynens.be/notes/css-escapes).

    [All Selector (“\*”)](../all-selector "Permalink to All Selector (“*”)")
=========================================================================

  Selects all elements.

     [:animated Selector](../animated-selector "Permalink to :animated Selector")
=============================================================================

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

     [Attribute Contains Prefix Selector [name|=”value”]](../attribute-contains-prefix-selector "Permalink to 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 (-).

     [Attribute Contains Selector [name\*=”value”]](../attribute-contains-selector "Permalink to Attribute Contains Selector [name*=”value”]")
==========================================================================================================================================

  Selects elements that have the specified attribute with a value containing a given substring.

     [Attribute Contains Word Selector [name~=”value”]](../attribute-contains-word-selector "Permalink to Attribute Contains Word Selector [name~=”value”]")
========================================================================================================================================================

  Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

     [Attribute Ends With Selector [name$=”value”]](../attribute-ends-with-selector "Permalink to 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.

     [Attribute Equals Selector [name=”value”]](../attribute-equals-selector "Permalink to Attribute Equals Selector [name=”value”]")
=================================================================================================================================

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

     [Attribute Not Equal Selector [name!=”value”]](../attribute-not-equal-selector "Permalink to 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.

     [Attribute Starts With Selector [name^=”value”]](../attribute-starts-with-selector "Permalink to Attribute Starts With Selector [name^=”value”]")
==================================================================================================================================================

  Selects elements that have the specified attribute with a value beginning exactly with a given string.

     [:button Selector](../button-selector "Permalink to :button Selector")
=======================================================================

  Selects all button elements and elements of type button.

     [:checkbox Selector](../checkbox-selector "Permalink to :checkbox Selector")
=============================================================================

  Selects all elements of type checkbox.

     [:checked Selector](../checked-selector "Permalink to :checked Selector")
==========================================================================

  Matches all elements that are checked or selected.

     [Child Selector (“parent > child”)](../child-selector "Permalink to Child Selector (“parent > child”)")
========================================================================================================

  Selects all direct child elements specified by “child” of elements specified by “parent”.

     [Class Selector (“.class”)](../class-selector "Permalink to Class Selector (“.class”)")
========================================================================================

  Selects all elements with the given class.

     [:contains() Selector](../contains-selector "Permalink to :contains() Selector")
=================================================================================

  Select all elements that contain the specified text.

     [Descendant Selector (“ancestor descendant”)](../descendant-selector "Permalink to Descendant Selector (“ancestor descendant”)")
=================================================================================================================================

  Selects all elements that are descendants of a given ancestor.

     [:disabled Selector](../disabled-selector "Permalink to :disabled Selector")
=============================================================================

  Selects all elements that are disabled.

     [Element Selector (“element”)](../element-selector "Permalink to Element Selector (“element”)")
================================================================================================

  Selects all elements with the given tag name.

     [:empty Selector](../empty-selector "Permalink to :empty Selector")
====================================================================

  Select all elements that have no children (including text nodes).

     [:enabled Selector](../enabled-selector "Permalink to :enabled Selector")
==========================================================================

  Selects all elements that are enabled.

     [:eq() Selector](../eq-selector "Permalink to :eq() Selector")
===============================================================

  Select the element at index n within the matched set.

     [:even Selector](../even-selector "Permalink to :even Selector")
=================================================================

  Selects even elements, zero-indexed. See also :odd.

     [:file Selector](../file-selector "Permalink to :file Selector")
=================================================================

  Selects all elements of type file.

     [:first-child Selector](../first-child-selector "Permalink to :first-child Selector")
======================================================================================

  Selects all elements that are the first child of their parent.

     [:first-of-type Selector](../first-of-type-selector "Permalink to :first-of-type Selector")
============================================================================================

  Selects all elements that are the first among siblings of the same element name.

     [:first Selector](../first-selector "Permalink to :first Selector")
====================================================================

  Selects the first matched DOM element.

     [:focus Selector](../focus-selector "Permalink to :focus Selector")
====================================================================

  Selects element if it is currently focused.

     [:gt() Selector](../gt-selector "Permalink to :gt() Selector")
===============================================================

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

     [Has Attribute Selector [name]](../has-attribute-selector "Permalink to Has Attribute Selector [name]")
========================================================================================================

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

     [:has() Selector](../has-selector "Permalink to :has() Selector")
==================================================================

  Selects elements which contain at least one element that matches the specified selector.

     [:header Selector](../header-selector "Permalink to :header Selector")
=======================================================================

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

     [:hidden Selector](../hidden-selector "Permalink to :hidden Selector")
=======================================================================

  Selects all elements that are hidden.

     [ID Selector (“#id”)](../id-selector "Permalink to ID Selector (“#id”)")
=========================================================================

  Selects a single element with the given id attribute.

     [:image Selector](../image-selector "Permalink to :image Selector")
====================================================================

  Selects all elements of type image.

     [:input Selector](../input-selector "Permalink to :input Selector")
====================================================================

  Selects all input, textarea, select and button elements.

     [:lang() Selector](../lang-selector "Permalink to :lang() Selector")
=====================================================================

  Selects all elements of the specified language.

     [:last-child Selector](../last-child-selector "Permalink to :last-child Selector")
===================================================================================

  Selects all elements that are the last child of their parent.

     [:last-of-type Selector](../last-of-type-selector "Permalink to :last-of-type Selector")
=========================================================================================

  Selects all elements that are the last among siblings of the same element name.

     [:last Selector](../last-selector "Permalink to :last Selector")
=================================================================

  Selects the last matched element.

     [:lt() Selector](../lt-selector "Permalink to :lt() Selector")
===============================================================

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

     [Multiple Attribute Selector [name=”value”][name2=”value2″]](../multiple-attribute-selector "Permalink to Multiple Attribute Selector [name=”value”][name2=”value2″]")
=======================================================================================================================================================================

  Matches elements that match all of the specified attribute filters.

     [Multiple Selector (“selector1, selector2, selectorN”)](../multiple-selector "Permalink to Multiple Selector (“selector1, selector2, selectorN”)")
===================================================================================================================================================

  Selects the combined results of all the specified selectors.

     [Next Adjacent Selector (“prev + next”)](../next-adjacent-selector "Permalink to Next Adjacent Selector (“prev + next”)")
==========================================================================================================================

  Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

     [Next Siblings Selector (“prev ~ siblings”)](../next-siblings-selector "Permalink to 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.

     [:not() Selector](../not-selector "Permalink to :not() Selector")
==================================================================

  Selects all elements that do not match the given selector.

     [:nth-child() Selector](../nth-child-selector "Permalink to :nth-child() Selector")
====================================================================================

  Selects all elements that are the nth-child of their parent.

     [:nth-last-child() Selector](../nth-last-child-selector "Permalink to :nth-last-child() Selector")
===================================================================================================

  Selects all elements that are the nth-child of their parent, counting from the last element to the first.

     [:nth-last-of-type() Selector](../nth-last-of-type-selector "Permalink to :nth-last-of-type() Selector")
=========================================================================================================

  Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

     [:nth-of-type() Selector](../nth-of-type-selector "Permalink to :nth-of-type() Selector")
==========================================================================================

  Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

     [:odd Selector](../odd-selector "Permalink to :odd Selector")
==============================================================

  Selects odd elements, zero-indexed. See also :even.

     [:only-child Selector](../only-child-selector "Permalink to :only-child Selector")
===================================================================================

  Selects all elements that are the only child of their parent.

     [:only-of-type Selector](../only-of-type-selector "Permalink to :only-of-type Selector")
=========================================================================================

  Selects all elements that have no siblings with the same element name.

     [:parent Selector](../parent-selector "Permalink to :parent Selector")
=======================================================================

  Select all elements that have at least one child node (either an element or text).

     [:password Selector](../password-selector "Permalink to :password Selector")
=============================================================================

  Selects all elements of type password.

     [:radio Selector](../radio-selector "Permalink to :radio Selector")
====================================================================

  Selects all elements of type radio.

     [:reset Selector](../reset-selector "Permalink to :reset Selector")
====================================================================

  Selects all elements of type reset.

     [:root Selector](../root-selector "Permalink to :root Selector")
=================================================================

  Selects the element that is the root of the document.

     [:selected Selector](../selected-selector "Permalink to :selected Selector")
=============================================================================

  Selects all elements that are selected.

     [:submit Selector](../submit-selector "Permalink to :submit Selector")
=======================================================================

  Selects all elements of type submit.

     [:target Selector](../target-selector "Permalink to :target Selector")
=======================================================================

  Selects the target element indicated by the fragment identifier of the document’s URI.

     [:text Selector](../text-selector "Permalink to :text Selector")
=================================================================

  Selects all input elements of type text.

     [:visible Selector](../visible-selector "Permalink to :visible Selector")
==========================================================================

  Selects all elements that are visible.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors>

.ajaxComplete()
===============

   .ajaxComplete( handler )Returns: [jQuery](types#jQuery)
--------------------------------------------------------

  **Description:** Register a handler to be called when Ajax requests complete. This is an [AjaxEvent](ajax_events).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ajaxComplete( handler )](#ajaxComplete-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) event, [jqXHR](types#jqXHR) jqXHR, [PlainObject](types#PlainObject) ajaxOptions ) The function to be invoked.

  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.

 To observe this method in action, set up a basic Ajax load request:

 
```
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
```
 Attach the event handler to the document:

 
```
$( document ).ajaxComplete(function() {
  $( ".log" ).text( "Triggered ajaxComplete handler." );
});
```
 Now, make an Ajax request using any jQuery method:

 
```
$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});
```
 When the user clicks the element with class `trigger` and the Ajax request completes, the log message is displayed.

 All `ajaxComplete` handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, use the parameters passed to the handler. Each time an `ajaxComplete` handler is executed, it is passed the event object, the `XMLHttpRequest` object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:

 
```
$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
});
```
 **Note:** You can get the returned Ajax contents by looking at `xhr.responseText`.

  ### Additional Notes:

 * As of jQuery 1.9, all the handlers for the [jQuery global Ajax events](category/ajax/global-ajax-event-handlers), including those added with the `.ajaxComplete()` method, *must* be attached to `document`.
* If `[$.ajax()](jquery.ajax)` or `[$.ajaxSetup()](jquery.ajaxsetup)` is called with the `global` option set to `false`, the `.ajaxComplete()` method will not fire.
 Example:
--------


 Show a message when an Ajax request completes.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ajaxComplete>

.ajaxSend()
===========

   .ajaxSend( handler )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Attach a function to be executed before an Ajax request is sent. This is an [Ajax Event](ajax_events).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ajaxSend( handler )](#ajaxSend-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) event, [jqXHR](types#jqXHR) jqXHR, [PlainObject](types#PlainObject) ajaxOptions ) The function to be invoked.

  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.

 To observe this method in action, set up a basic Ajax load request:

 
```
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
```
 Attach the event handler to the document:

 
```
$( document ).ajaxSend(function() {
  $( ".log" ).text( "Triggered ajaxSend handler." );
});
```
 Now, make an Ajax request using any jQuery method:

 
```
$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});
```
 When the user clicks the element with class `trigger` and the Ajax request is about to begin, the log message is displayed.

 All `ajaxSend` handlers are invoked, regardless of what Ajax request is to be sent. If you must differentiate between the requests, use the parameters passed to the handler. Each time an `ajaxSend` handler is executed, it is passed the event object, the `jqXHR` object (in version 1.4, `XMLHttpRequest`object), and the [settings object](jquery.ajax) that was used in the creation of the Ajax request. For example, you can restrict the callback to only handling events dealing with a particular URL:

 
```
$( document ).ajaxSend(function( event, jqxhr, settings ) {
  if ( settings.url == "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSend handler." );
  }
});
```
  ### Additional Notes:

 * As of jQuery 1.9, all the handlers for the [jQuery global Ajax events](category/ajax/global-ajax-event-handlers), including those added with the `.ajaxSend()` method, *must* be attached to `document`.
* If `[$.ajax()](jquery.ajax)` or `[$.ajaxSetup()](jquery.ajaxsetup)` is called with the `global` option set to `false`, the `.ajaxSend()` method will not fire.
 Example:
--------


 Show a message before an Ajax request is sent.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ajaxSend>

.ajaxError()
============

   .ajaxError( handler )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Register a handler to be called when Ajax requests complete with an error. This is an [Ajax Event](ajax_events).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ajaxError( handler )](#ajaxError-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) event, [jqXHR](types#jqXHR) jqXHR, [PlainObject](types#PlainObject) ajaxSettings, [String](types#String) thrownError ) The function to be invoked.

  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. **Note:** *This handler is not called for cross-domain script and cross-domain JSONP requests.*

 To observe this method in action, set up a basic Ajax load request.

 
```
<button class="trigger">Trigger</button>
<div class="result"></div>
<div class="log"></div>
```
 Attach the event handler to the document:

 
```
$( document ).ajaxError(function() {
  $( ".log" ).text( "Triggered ajaxError handler." );
});
```
 Now, make an Ajax request using any jQuery method:

 
```
$( "button.trigger" ).on( "click", function() {
  $( "div.result" ).load( "ajax/missing.html" );
});
```
 When the user clicks the button and the Ajax request fails, because the requested file is missing, the log message is displayed.

 All `ajaxError` handlers are invoked, regardless of what Ajax request was completed. To differentiate between the requests, use the parameters passed to the handler. Each time an `ajaxError` handler is executed, it is passed the event object, the `jqXHR` object (prior to jQuery 1.5, the `XHR` object), and the settings object that was used in the creation of the request. When an HTTP error occurs, the fourth argument (`thrownError`) receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." For example, to restrict the error callback to only handling events dealing with a particular URL:

 
```
$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {
  if ( settings.url == "ajax/missing.html" ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
  }
});
```
  ### Additional Notes:

 * As of jQuery 1.9, all the handlers for the [jQuery global Ajax events](category/ajax/global-ajax-event-handlers), including those added with the `.ajaxError()` method, *must* be attached to `document`.
* If `[$.ajax()](jquery.ajax)` or `[$.ajaxSetup()](jquery.ajaxsetup)` is called with the `global` option set to `false`, the `.ajaxError()` method will not fire.
 Example:
--------


 Show a message when an Ajax request fails.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ajaxError>

All Selector (“\*”)
===================

  all selector
------------

  **Description:** Selects all elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "\*" )

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

  Examples:
---------


 Find every element (including head, body, etc) in the document. Note that if your browser has an extension/add-on enabled that inserts a `<script>` or `<link>` element into the DOM, that element will be counted as well.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>all demo</title>
  <style>
  h3 {
    margin: 0;
  }
  div, span, p {
    width: 80px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
 
<script>
var elementCount = $( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Find all elements within document.body so elements like head, script, etc. are excluded.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>all demo</title>
  <style>
  h3 {
    margin: 0;
  }
  div, span, p {
    width: 80px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  #test {
    width: auto;
    height: auto;
    background-color: transparent;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="test">
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</div>
 
<script>
var elementCount = $( "#test" ).find( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/all-selector>

.ajaxStart()
============

   .ajaxStart( handler )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Register a handler to be called when the first Ajax request begins. This is an [Ajax Event](ajax_events).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ajaxStart( handler )](#ajaxStart-handler)


	+ **handler** Type: [Function](types#Function)() The function to be invoked.

  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.

 To observe this method in action, set up a basic Ajax load request:

 
```
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
```
 Attach the event handler to any element:

 
```
$( document ).ajaxStart(function() {
  $( ".log" ).text( "Triggered ajaxStart handler." );
});
```
 Now, make an Ajax request using any jQuery method:

 
```
$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});
```
 When the user clicks the element with class `trigger` and the Ajax request is sent, the log message is displayed.

  ### Additional Notes:

 * As of jQuery 1.9, all the handlers for the [jQuery global Ajax events](category/ajax/global-ajax-event-handlers), including those added with the `.ajaxStart()` method, *must* be attached to `document`.
* If `[$.ajax()](jquery.ajax)` or `[$.ajaxSetup()](jquery.ajaxsetup)` is called with the `global` option set to `false`, the `.ajaxStart()` method will not fire.
 Example:
--------


 Show a loading message whenever an Ajax request starts (and none is already active).

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ajaxStart>

Category: Basic
===============

 
The following selectors are based on the Cascading Style Sheet 1 specification, as outlined by the W3C. For more information about the specifications, visit <https://www.w3.org/Style/CSS/#specs>.

    [All Selector (“\*”)](../../all-selector "Permalink to All Selector (“*”)")
============================================================================

  Selects all elements.

     [Class Selector (“.class”)](../../class-selector "Permalink to Class Selector (“.class”)")
===========================================================================================

  Selects all elements with the given class.

     [Element Selector (“element”)](../../element-selector "Permalink to Element Selector (“element”)")
===================================================================================================

  Selects all elements with the given tag name.

     [ID Selector (“#id”)](../../id-selector "Permalink to ID Selector (“#id”)")
============================================================================

  Selects a single element with the given id attribute.

     [Multiple Selector (“selector1, selector2, selectorN”)](../../multiple-selector "Permalink to Multiple Selector (“selector1, selector2, selectorN”)")
======================================================================================================================================================

  Selects the combined results of all the specified selectors.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/basic-css-selectors>

Category: jQuery Extensions
===========================

 
jQuery has extended the CSS3 selectors with the following selectors. Because these selectors are jQuery extension and not part of the CSS specification, queries using them cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using these selectors, first select some elements using a pure CSS selector, then use [`.filter()`](../../filter).

    [:animated Selector](../../animated-selector "Permalink to :animated Selector")
================================================================================

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

     [Attribute Not Equal Selector [name!=”value”]](../../attribute-not-equal-selector "Permalink to 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.

     [:button Selector](../../button-selector "Permalink to :button Selector")
==========================================================================

  Selects all button elements and elements of type button.

     [:checkbox Selector](../../checkbox-selector "Permalink to :checkbox Selector")
================================================================================

  Selects all elements of type checkbox.

     [:eq() Selector](../../eq-selector "Permalink to :eq() Selector")
==================================================================

  Select the element at index n within the matched set.

     [:even Selector](../../even-selector "Permalink to :even Selector")
====================================================================

  Selects even elements, zero-indexed. See also :odd.

     [:file Selector](../../file-selector "Permalink to :file Selector")
====================================================================

  Selects all elements of type file.

     [:first Selector](../../first-selector "Permalink to :first Selector")
=======================================================================

  Selects the first matched DOM element.

     [:gt() Selector](../../gt-selector "Permalink to :gt() Selector")
==================================================================

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

     [:has() Selector](../../has-selector "Permalink to :has() Selector")
=====================================================================

  Selects elements which contain at least one element that matches the specified selector.

     [:header Selector](../../header-selector "Permalink to :header Selector")
==========================================================================

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

     [:hidden Selector](../../hidden-selector "Permalink to :hidden Selector")
==========================================================================

  Selects all elements that are hidden.

     [:image Selector](../../image-selector "Permalink to :image Selector")
=======================================================================

  Selects all elements of type image.

     [:input Selector](../../input-selector "Permalink to :input Selector")
=======================================================================

  Selects all input, textarea, select and button elements.

     [:last Selector](../../last-selector "Permalink to :last Selector")
====================================================================

  Selects the last matched element.

     [:lt() Selector](../../lt-selector "Permalink to :lt() Selector")
==================================================================

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

     [:odd Selector](../../odd-selector "Permalink to :odd Selector")
=================================================================

  Selects odd elements, zero-indexed. See also :even.

     [:parent Selector](../../parent-selector "Permalink to :parent Selector")
==========================================================================

  Select all elements that have at least one child node (either an element or text).

     [:password Selector](../../password-selector "Permalink to :password Selector")
================================================================================

  Selects all elements of type password.

     [:radio Selector](../../radio-selector "Permalink to :radio Selector")
=======================================================================

  Selects all elements of type radio.

     [:reset Selector](../../reset-selector "Permalink to :reset Selector")
=======================================================================

  Selects all elements of type reset.

     [:selected Selector](../../selected-selector "Permalink to :selected Selector")
================================================================================

  Selects all elements that are selected.

     [:submit Selector](../../submit-selector "Permalink to :submit Selector")
==========================================================================

  Selects all elements of type submit.

     [:text Selector](../../text-selector "Permalink to :text Selector")
====================================================================

  Selects all input elements of type text.

     [:visible Selector](../../visible-selector "Permalink to :visible Selector")
=============================================================================

  Selects all elements that are visible.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/jquery-selector-extensions>

.animate()
==========

   .animate( properties [, duration ] [, easing ] [, complete ] )Returns: [jQuery](types#jQuery)
----------------------------------------------------------------------------------------------

  **Description:** Perform a custom animation of a set of CSS properties.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.animate( properties [, duration ] [, easing ] [, complete ] )](#animate-properties-duration-easing-complete)


	+ **properties** Type: [PlainObject](types#PlainObject)  An object of CSS properties and values that the animation will move toward.
	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.animate( properties, options )](#animate-properties-options)


	+ **properties** Type: [PlainObject](types#PlainObject)  An object of CSS properties and values that the animation will move toward.
	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))

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

 #### Animation Properties and Values

 All animated properties should be animated to a *single numeric value*, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, `width`, `height`, or `left` can be animated but `background-color` cannot be, unless the [jQuery.Color](https://github.com/jquery/jquery-color) plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units `em` and `%` can be specified where applicable.

 In addition to style properties, some non-style properties such as `scrollTop` and `scrollLeft`, as well as custom properties, can be animated.

 Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance. Or, if you want to animate font size, you would use `fontSize` or the CSS equivalent `'font-size'` rather than simply `'font'`. 

 In addition to numeric values, each property can take the strings `'show'`, `'hide'`, and `'toggle'`. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the `'toggle'` keyword must be consistently given as the value of the property being animated.

 Animated properties can also be relative. If a value is supplied with a leading `+=` or `-=` sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

  **Note:** Unlike shorthand animation methods such as `.slideDown()` and `.fadeIn()`, the `.animate()` method does *not* make hidden elements visible as part of the effect. For example, given `$( "someElement" ).hide().animate({height: "20px"}, 500)`, the animation will run, but *the element will remain hidden*.

  #### Duration

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is `400` milliseconds. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively.

 #### Callback Functions

 If supplied, the `start`, `step`, `progress`, `complete`, `done`, `fail`, and `always` callbacks are called on a *per-element* basis; `this` is set to the DOM element being animated. If no elements are in the set, no callbacks are called. If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole. Use the `.promise()` method to obtain a promise to which you can attach callbacks that fire once for an animated set of any size, including zero elements.

 #### Basic Usage

 To animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;">
```
 To animate the opacity, left offset, and height of the image simultaneously:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});
```
   ![] Figure 1 - Illustration of the specified animation effect  

 Note that the target value of the `height` property is `'toggle'`. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition: 

   ![] Figure 2 - Illustration of the specified animation effect  

 The `opacity` of the image is already at its target value, so this property is not animated by the second click. Since the target value for `left` is a relative value, the image moves even farther to the right during this second animation.

 Directional properties (`top`, `right`, `bottom`, `left`) have no discernible effect on elements if their `position` style property is `static`, which it is by default.

  **Note:** The [jQuery UI](https://jqueryui.com/) project extends the `.animate()` method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

   **Note:** if attempting to animate an element with a height or width of 0px, where contents of the element are visible due to overflow, jQuery may clip this overflow during animation. By fixing the dimensions of the original element being hidden however, it is possible to ensure that the animation runs smoothly. A [clearfix](https://www.google.com/search?q=clearfix) can be used to automatically fix the dimensions of your main element without the need to set this manually.

  #### Step Function

 The second version of `.animate()` provides a `step` option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (`now` and `fx`), and `this` is set to the DOM element being animated.

 * `now`: the numeric value of the property being animated at each step
* `fx`: a reference to the `jQuery.fx` prototype object, which contains a number of properties such as `elem` for the animated element, `start` and `end` for the first and last value of the animated property, respectively, and `prop` for the property being animated.

 Note that the `step` function is called for each animated property on each animated element. For example, given two list items, the `step` function fires four times at each step of the animation: 

 
```
$( "li" ).animate({
  opacity: .5,
  height: "50%"
}, {
  step: function( now, fx ) {
    var data = fx.elem.id + " " + fx.prop + ": " + now;
    $( "body" ).append( "<div>" + data + "</div>" );
  }
});
```
 #### Easing

 The remaining parameter of `.animate()` is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com/).

 #### Per-property Easing

 As of jQuery version 1.4, you can set per-property easing functions within a single `.animate()` call. In the first version of `.animate()`, each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the `.animate()` method's optional easing argument. If the easing argument is not defined, the default `swing` function is used.

 For example, to simultaneously animate the width and height with the `swing` easing function and the opacity with the `linear` easing function:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
  });
});
```
 In the second version of `.animate()`, the options object can include the `specialEasing` property, which is itself an object of CSS properties and their corresponding easing functions. For example, to simultaneously animate the width using the `linear` easing function and the height using the `easeOutBounce` easing function:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});
```
 As previously noted, a plugin is required for the `easeOutBounce` function.

  ### Additional Notes:

 * All jQuery effects, including `.animate()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Click the button to animate the div with a number of different properties.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="block"></div>
 
<script>
$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   The first button shows how an unqueued animation works. It expands the div out to 90% width **while** the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 200px;
    height: 1.1em;
    text-align: center;
    border: 2px solid green;
    margin: 3px;
    font-size: 14px;
  }
  button {
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
 
<script>
$( "#go1" ).click(function() {
  $( "#block1" )
    .animate({
      width: "90%"
    }, {
      queue: false,
      duration: 3000
    })
    .animate({ fontSize: "24px" }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
});
 
$( "#go2" ).click(function() {
  $( "#block2" )
    .animate({ width: "90%" }, 1000 )
    .animate({ fontSize: "24px" }, 1000 )
    .animate({ borderLeftWidth: "15px" }, 1000 );
});
 
$( "#go3" ).click(function() {
  $( "#go1" ).add( "#go2" ).click();
});
 
$( "#go4" ).click(function() {
  $( "div" ).css({
    width: "",
    fontSize: "",
    borderWidth: ""
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
 
<script>
$( "#go" ).click(function() {
  $( ".block" ).first().animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block" ).slice( 1 ).css( "left", now );
    }
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animate all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

 
```
$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, "slow" );
```
   Animate all paragraphs to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

 
```
$( "p" ).animate({
  left: 50,
  opacity: 1
}, 500 );
```
   Animate the left and opacity style properties of all paragraphs; run the animation *outside* the queue, so that it will automatically start without waiting for its turn.

 
```
$( "p" ).animate({
  left: "50px",
  opacity: 1
}, {
  duration: 500,
  queue: false
});
```
   An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

 
```
$( "p" ).animate({
  opacity: "show"
}, "slow", "easein" );
```
   Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

 
```
$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, {
  duration: "slow"
});
```
   Use an easing function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

 
```
$( "p" ).animate({
  opacity: "show"
}, {
  duration: "slow",
  easing: "easein"
});
```
   Animate all paragraphs and execute a callback function when the animation is complete. The first argument is an object of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function. 

 
```
$( "p" ).animate({
  height: 200,
  width: 400,
  opacity: 0.5
}, 1000, "linear", function() {
  alert( "all done" );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/animate>

Category: Removed
=================

   [.andSelf()](../andself "Permalink to .andSelf()")
===================================================

  Add the previous set of elements on the stack to the current set.

     [.context](../context "Permalink to .context")
===============================================

  The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

     [deferred.isRejected()](../deferred.isrejected "Permalink to deferred.isRejected()")
=====================================================================================

  Determine whether a Deferred object has been rejected.

     [deferred.isResolved()](../deferred.isresolved "Permalink to deferred.isResolved()")
=====================================================================================

  Determine whether a Deferred object has been resolved.

     [.die()](../die "Permalink to .die()")
=======================================

  Remove event handlers previously attached using .live() from the elements.

     [.error()](../error "Permalink to .error()")
=============================================

  Bind an event handler to the “error” JavaScript event.

     [jQuery.boxModel](../jquery.boxmodel "Permalink to jQuery.boxModel")
=====================================================================

  States if the current page, in the user’s browser, is being rendered using the W3C CSS Box Model.

     [jQuery.browser](../jquery.browser "Permalink to jQuery.browser")
==================================================================

  Contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

     [jQuery.sub()](../jquery.sub "Permalink to jQuery.sub()")
==========================================================

  Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.

     [.live()](../live "Permalink to .live()")
==========================================

  Attach an event handler for all elements which match the current selector, now and in the future.

     [.load()](../load-event "Permalink to .load()")
================================================

  Bind an event handler to the “load” JavaScript event.

     [.selector](../selector "Permalink to .selector")
==================================================

  A selector representing selector passed to jQuery(), if any, when creating the original set.

     [.size()](../size "Permalink to .size()")
==========================================

  Return the number of elements in the jQuery object.

     [.toggle()](../toggle-event "Permalink to .toggle()")
======================================================

  Bind two or more handlers to the matched elements, to be executed on alternate clicks.

     [.unload()](../unload "Permalink to .unload()")
================================================

  Bind an event handler to the “unload” JavaScript event.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/removed>

.andSelf()
==========

   .andSelf()Returns: [jQuery](types#jQuery)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Add the previous set of elements on the stack to the current set.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.andSelf()](#andSelf)


	+ This method does not accept any arguments.

   Note: This API has been removed in jQuery 3.0; use [`.addBack()`](addback) instead, which should work identically.

    

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/andSelf>

Category: Effects
=================

 
The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.

    [.animate()](../animate "Permalink to .animate()")
===================================================

  Perform a custom animation of a set of CSS properties.

     [.clearQueue()](../clearqueue "Permalink to .clearQueue()")
============================================================

  Remove from the queue all items that have not yet been run.

     [.delay()](../delay "Permalink to .delay()")
=============================================

  Set a timer to delay execution of subsequent items in the queue.

     [.dequeue()](../dequeue "Permalink to .dequeue()")
===================================================

  Execute the next function on the queue for the matched elements.

     [.fadeIn()](../fadein "Permalink to .fadeIn()")
================================================

  Display the matched elements by fading them to opaque.

     [.fadeOut()](../fadeout "Permalink to .fadeOut()")
===================================================

  Hide the matched elements by fading them to transparent.

     [.fadeTo()](../fadeto "Permalink to .fadeTo()")
================================================

  Adjust the opacity of the matched elements.

     [.fadeToggle()](../fadetoggle "Permalink to .fadeToggle()")
============================================================

  Display or hide the matched elements by animating their opacity.

     [.finish()](../finish "Permalink to .finish()")
================================================

  Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

     [.hide()](../hide "Permalink to .hide()")
==========================================

  Hide the matched elements.

     [jQuery.fx.interval](../jquery.fx.interval "Permalink to jQuery.fx.interval")
==============================================================================

  The rate (in milliseconds) at which animations fire.

     [jQuery.fx.off](../jquery.fx.off "Permalink to jQuery.fx.off")
===============================================================

  Globally disable all animations.

     [jQuery.speed](../jquery.speed "Permalink to jQuery.speed")
============================================================

  Creates an object containing a set of properties ready to be used in the definition of custom animations.

     [.queue()](../queue "Permalink to .queue()")
=============================================

  Show or manipulate the queue of functions to be executed on the matched elements.

     [.show()](../show "Permalink to .show()")
==========================================

  Display the matched elements.

     [.slideDown()](../slidedown "Permalink to .slideDown()")
=========================================================

  Display the matched elements with a sliding motion.

     [.slideToggle()](../slidetoggle "Permalink to .slideToggle()")
===============================================================

  Display or hide the matched elements with a sliding motion.

     [.slideUp()](../slideup "Permalink to .slideUp()")
===================================================

  Hide the matched elements with a sliding motion.

     [.stop()](../stop "Permalink to .stop()")
==========================================

  Stop the currently-running animation on the matched elements.

     [.toggle()](../toggle "Permalink to .toggle()")
================================================

  Display or hide the matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/effects>

Category: Custom
================

 
These methods allow you to create effects that are not provided "out of the box" by jQuery.

    [.animate()](../../animate "Permalink to .animate()")
======================================================

  Perform a custom animation of a set of CSS properties.

     [.clearQueue()](../../clearqueue "Permalink to .clearQueue()")
===============================================================

  Remove from the queue all items that have not yet been run.

     [.delay()](../../delay "Permalink to .delay()")
================================================

  Set a timer to delay execution of subsequent items in the queue.

     [.dequeue()](../../dequeue "Permalink to .dequeue()")
======================================================

  Execute the next function on the queue for the matched elements.

     [.finish()](../../finish "Permalink to .finish()")
===================================================

  Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

     [jQuery.fx.interval](../../jquery.fx.interval "Permalink to jQuery.fx.interval")
=================================================================================

  The rate (in milliseconds) at which animations fire.

     [jQuery.fx.off](../../jquery.fx.off "Permalink to jQuery.fx.off")
==================================================================

  Globally disable all animations.

     [jQuery.speed](../../jquery.speed "Permalink to jQuery.speed")
===============================================================

  Creates an object containing a set of properties ready to be used in the definition of custom animations.

     [.queue()](../../queue "Permalink to .queue()")
================================================

  Show or manipulate the queue of functions to be executed on the matched elements.

     [.stop()](../../stop "Permalink to .stop()")
=============================================

  Stop the currently-running animation on the matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/effects/custom-effects>

Category: Basic Filter
======================

   [:animated Selector](../../animated-selector "Permalink to :animated Selector")
================================================================================

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

     [:eq() Selector](../../eq-selector "Permalink to :eq() Selector")
==================================================================

  Select the element at index n within the matched set.

     [:even Selector](../../even-selector "Permalink to :even Selector")
====================================================================

  Selects even elements, zero-indexed. See also :odd.

     [:first Selector](../../first-selector "Permalink to :first Selector")
=======================================================================

  Selects the first matched DOM element.

     [:focus Selector](../../focus-selector "Permalink to :focus Selector")
=======================================================================

  Selects element if it is currently focused.

     [:gt() Selector](../../gt-selector "Permalink to :gt() Selector")
==================================================================

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

     [:header Selector](../../header-selector "Permalink to :header Selector")
==========================================================================

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

     [:lang() Selector](../../lang-selector "Permalink to :lang() Selector")
========================================================================

  Selects all elements of the specified language.

     [:last Selector](../../last-selector "Permalink to :last Selector")
====================================================================

  Selects the last matched element.

     [:lt() Selector](../../lt-selector "Permalink to :lt() Selector")
==================================================================

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

     [:not() Selector](../../not-selector "Permalink to :not() Selector")
=====================================================================

  Selects all elements that do not match the given selector.

     [:odd Selector](../../odd-selector "Permalink to :odd Selector")
=================================================================

  Selects odd elements, zero-indexed. See also :even.

     [:root Selector](../../root-selector "Permalink to :root Selector")
====================================================================

  Selects the element that is the root of the document.

     [:target Selector](../../target-selector "Permalink to :target Selector")
==========================================================================

  Selects the target element indicated by the fragment identifier of the document’s URI.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/basic-filter-selectors>

:animated Selector
==================

  animated selector
-----------------

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

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)jQuery( ":animated" )

  **Note:** If you use a custom jQuery build *without the effects module*, the `:animated` selector will throw an error. 

  ### Additional Notes:

 * Because `:animated` is a jQuery extension and not part of the CSS specification, queries using `:animated` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:animated` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":animated")`](filter).
 Example:
--------


 Change the color of any div that is animated.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animated demo</title>
  <style>
  div {
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
  }
  div.colored {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="run">Run</button>
 
<div></div>
<div id="mover"></div>
<div></div>
 
<script>
$( "#run" ).click(function() {
  $( "div:animated" ).toggleClass( "colored" );
});
 
function animateIt() {
  $( "#mover" ).slideToggle( "slow", animateIt );
}
 
animateIt();
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/animated-selector>

Category: DOM Insertion, Inside
===============================

 
These methods allow us to insert new content inside an existing element.

    [.append()](../../append "Permalink to .append()")
===================================================

  Insert content, specified by the parameter, to the end of each element in the set of matched elements.

     [.appendTo()](../../appendto "Permalink to .appendTo()")
=========================================================

  Insert every element in the set of matched elements to the end of the target.

     [.html()](../../html "Permalink to .html()")
=============================================

  Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

     [.prepend()](../../prepend "Permalink to .prepend()")
======================================================

  Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

     [.prependTo()](../../prependto "Permalink to .prependTo()")
============================================================

  Insert every element in the set of matched elements to the beginning of the target.

     [.text()](../../text "Permalink to .text()")
=============================================

  Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/dom-insertion-inside>

.append()
=========

   .append( content [, content ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------

  **Description:** Insert content, specified by the parameter, to the end of each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.append( content [, content ] )](#append-content-content)


	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.append( function )](#append-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) html ) => [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [jQuery](types#jQuery)  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, `this` refers to the current element in the set.

  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()`](prepend)).

 The `.append()` and `[.appendTo()](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.

 Consider the following HTML:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 You can create content and insert it into several elements at once:

 
```
$( ".inner" ).append( "<p>Test</p>" );
```
 Each inner `<div>` element gets this new content:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>
```
 You can also select an element on the page and insert it into another:

 
```
$( ".container" ).append( $( "h2" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>
```
 **Important**: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

 #### Additional Arguments

 Similar to other content-adding methods such as `[.prepend()](prepend)` and `[.before()](before)`, `.append()` also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

 For example, the following will insert two new `<div>`s and an existing `<div>` as the last three child nodes of the body:

 
```
var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
```
 Since `.append()` can accept any number of additional arguments, the same result can be achieved by passing in the three `<div>`s as three separate arguments, like so: `$('body').append( $newdiv1, newdiv2, existingdiv1 )`. The type and number of arguments will largely depend on how you collect the elements in your code.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
* jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are `addClass` and `removeClass`.
 Examples:
---------


 Appends some HTML to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Appends an Element to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).append( document.createTextNode( "Hello" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
 
<script>
$( "p" ).append( $( "strong" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/append>

.appendTo()
===========

   .appendTo( target )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Insert every element in the set of matched elements to the end of the target.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.appendTo( target )](#appendTo-target)


	+ **target** Type: [Selector](types#Selector) or [htmlString](types#htmlString) or [Element](types#Element) or [Array](types#Array) or [jQuery](types#jQuery)  A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.

  The `[.append()](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.

 Consider the following HTML:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 We can create content and insert it into several elements at once:

 
```
$( "<p>Test</p>" ).appendTo( ".inner" );
```
 Each inner `<div>` element gets this new content:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>
```
 We can also select an element on the page and insert it into another:

 
```
$( "h2" ).appendTo( $( ".container" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned:

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>
```
 If there is more than one target element, however, cloned copies of the inserted element will be created for each target except the last, and that new set (the original element plus clones) is returned.

 **Before jQuery 1.9,** the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the `.end()` method reliably when being used with an unknown number of elements.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
* jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are `addClass` and `removeClass`.
 Example:
--------


 Append all spans to the element with the ID "foo" (Check append() documentation for more examples)

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>appendTo demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>I have nothing more to say... </span>
 
<div id="foo">FOO! </div>
 
<script>
$( "span" ).appendTo( "#foo" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/appendTo>

Attribute Contains Selector [name\*=”value”]
============================================

  attributeContains selector
--------------------------

  **Description:** Selects elements that have the specified attribute with a value containing a given substring.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute\*='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted string.

  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.

  Example:
--------


 Finds all inputs with a name attribute that contains 'man' and sets the value with some text.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
 
<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-contains-selector>

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

  attributeNotEqual selector
--------------------------

  **Description:** Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute!='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted string.

  This selector is equivalent to `:not([attr='value'])`.

  ### Additional Notes:

 * Because `[name!="value"]` is a jQuery extension and not part of the CSS specification, queries using `[name!="value"]` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `$( "your-pure-css-selector" ).not( "[name='value']" )` instead.
 Example:
--------


 Finds all inputs that don't have the name 'newsletter' and appends text to the span next to it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeNotEqual demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <input type="radio" name="newsletter" value="Hot Fuzz">
  <span>name is newsletter</span>
</div>
<div>
  <input type="radio" value="Cold Fusion">
  <span>no name</span>
</div>
<div>
  <input type="radio" name="accept" value="Evil Plans">
  <span>name is accept</span>
</div>
 
<script>
$( "input[name!='newsletter']" ).next().append( "<b>; not newsletter</b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-not-equal-selector>

Attribute Equals Selector [name=”value”]
========================================

  attributeEquals selector
------------------------

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

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. **Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted string.**

 Example:
--------


 Finds all inputs with a value of "Hot Fuzz" and changes the text of the next sibling span.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEquals demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Cold Fusion">
    <span>value?</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" name="newsletter" value="Evil Plans">
    <span>value?</span>
  </label>
</div>
 
<script>
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-equals-selector>

.attr()
=======

  Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element. #### Contents:

 * [.attr( attributeName )](#attr1)
	+ [.attr( attributeName )](#attr-attributeName)
* [.attr( attributeName, value )](#attr2)
	+ [.attr( attributeName, value )](#attr-attributeName-value)
	+ [.attr( attributes )](#attr-attributes)
	+ [.attr( attributeName, function )](#attr-attributeName-function)

 
 .attr( attributeName )Returns: [String](types#String)
------------------------------------------------------

  **Description:** Get the value of an attribute for the first element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.attr( attributeName )](#attr-attributeName)


	+ **attributeName** Type: [String](types#String)  The name of the attribute to get.

  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.

 Using jQuery's `.attr()` method to get the value of an element's attribute has two main benefits:

 1. **Convenience**: It can be called directly on a jQuery object and chained to other jQuery methods.
2. **Cross-browser consistency**: The values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The `.attr()` method reduces such inconsistencies.

  **Note:** Attribute values are strings with the exception of a few attributes such as value and tabindex.

  As of jQuery 1.6, the `.attr()` method returns `undefined` for attributes that have not been set. **To retrieve and change DOM properties such as the `checked`, `selected`, or `disabled` state of form elements, use the [.prop()](prop) method.**

 #### Attributes vs. Properties

 The difference between *attributes* and *properties* can be important in specific situations. **Before jQuery 1.6**, the `.attr()` method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. **As of jQuery 1.6**, the `.prop()` method provides a way to explicitly retrieve property values, while `.attr()` retrieves attributes.

 For example, `selectedIndex`, `tagName`, `nodeName`, `nodeType`, `ownerDocument`, `defaultChecked`, and `defaultSelected` should be retrieved and set with the `[.prop()](prop)` method. Prior to jQuery 1.6, these properties were retrievable with the `.attr()` method, but this was not within the scope of `attr`. These do not have corresponding attributes and are only properties.

 Concerning boolean attributes, consider a DOM element defined by the HTML markup `<input type="checkbox" checked="checked" />`, and assume it is in a JavaScript variable named `elem`:

 

|  |  |
| --- | --- |
| `elem.checked` | `true` (Boolean) Will change with checkbox state |
| `$( elem ).prop( "checked" )` | `true` (Boolean) Will change with checkbox state |
| `elem.getAttribute( "checked" )` | `"checked"` (String) Initial state of the checkbox; does not change |
| `$( elem ).attr( "checked" )` *(1.6)* | `"checked"` (String) Initial state of the checkbox; does not change |
| `$( elem ).attr( "checked" )` *(1.6.1+)* | `"checked"` (String) Will change with checkbox state |
| `$( elem ).attr( "checked" )` *(pre-1.6)* | `true` (Boolean) Changed with checkbox state |

   
 According to the [W3C forms specification](https://www.w3.org/TR/html401/interact/forms.html#h-17.4), the `checked` attribute is a *[boolean attribute](https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2)*, which means the corresponding property is **true** if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.

 Nevertheless, the most important concept to remember about the `checked` attribute is that it does not correspond to the `checked` property. The attribute actually corresponds to the `defaultChecked` property and should be used only to set the *initial* value of the checkbox. The `checked` attribute value does not change with the state of the checkbox, while the `checked` property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

 * `if ( elem.checked )`
* `if ( $( elem ).prop( "checked" ) )`
* `if ( $( elem ).is( ":checked" ) )`

 The same is true for other dynamic attributes, such as `selected` and `value`.

  ### Additional Notes:

 * In Internet Explorer prior to version 9, using `[.prop()](prop)` to set a DOM element property to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks if the property is not removed (using [`.removeProp()`](removeprop)) before the DOM element is removed from the document. To safely set values on DOM objects without memory leaks, use [`.data()`](data).
 Examples:
---------


 Display the checked attribute and property of a checkbox as it changes.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" )
  .change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();
</script>
 
</body>
</html>
```
 #### Demo:

   Find the title attribute of the first <em> in the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
 
The title of the emphasis is:<div></div>
 
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
 
</body>
</html>
```
 #### Demo:

   .attr( attributeName, value )Returns: [jQuery](types#jQuery)
-------------------------------------------------------------

  **Description:** Set one or more attributes for the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.attr( attributeName, value )](#attr-attributeName-value)


	+ **attributeName** Type: [String](types#String)  The name of the attribute to set.
	+ **value** Type: [String](types#String) or [Number](types#Number) or [Null](types#Null)  A value to set for the attribute. If `null`, the specified attribute will be removed (as in [`.removeAttr()`](removeattr)).
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.attr( attributes )](#attr-attributes)


	+ **attributes** Type: [PlainObject](types#PlainObject)  An object of attribute-value pairs to set.
* ####  version added: [1.1](https://api.jquery.com/category/version/1.1/)[.attr( attributeName, function )](#attr-attributeName-function)


	+ **attributeName** Type: [String](types#String)  The name of the attribute to set.
	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) attr ) => [String](types#String) or [Number](types#Number)  A function returning the value to set. `this` is the current element. Receives the index position of the element in the set and the old attribute value as arguments.

  The `.attr()` method is a convenient way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Consider the following image:

 
```
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller">
```
 #### Setting a simple attribute

 To change the `alt` attribute, simply pass the name of the attribute and its new value to the `.attr()` method:

 
```
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
```
 *Add* an attribute the same way:

 
```
$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );
```
 #### Setting several attributes at once

 To change the `alt` attribute and add the `title` attribute at the same time, pass both sets of names and values into the method at once using a plain JavaScript object. Each key-value pair in the object adds or modifies an attribute:

 
```
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});
```
 When setting multiple attributes, the quotes around attribute names are optional.

 **WARNING**: When setting the 'class' attribute, you must always use quotes!

  **Note:** Attempting to change the `type` attribute on an `input` or `button` element created via `document.createElement()` will throw an exception on Internet Explorer 8 or older.

  #### Computed attribute values

 By using a function to set attributes, you can compute the value based on other properties of the element. For example, to concatenate a new value with an existing value:

 
```
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});
```
 This use of a function to compute attribute values can be particularly useful when modifying the attributes of multiple elements at once.

 **Note:** If nothing is returned in the setter function (ie. `function(index, attr){}`), or if `undefined` is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

  Examples:
---------


 Set some attributes for all <img>s in the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "/resources/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Set the id for divs based on the position in the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  b {
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
 
<script>
$( "div" )
  .attr( "id", function( arr ) {
    return "div-id" + arr;
  })
  .each(function() {
    $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Set the src attribute from title attribute on the image.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "/resources/" + this.title;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attr>

Category: Attribute
===================

 
The CSS specification allows elements to be identified by their attributes. While not supported by some older browsers for the purpose of styling documents, jQuery allows you to employ them regardless of the browser being used.

 When using any of the following attribute selectors, you should account for attributes that have multiple, space-separated values. Since these selectors see attribute values as a single string, this selector, for example, `$("a[rel='nofollow']")`, will select `<a href="example.html" rel="nofollow">Some text</a>` but not `<a href="example.html" rel="nofollow foe">Some text</a>`.

 Attribute values in selector expressions **must** follow the rules for W3C CSS selectors; in general, that means anything other than a [valid identifier](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier) should be surrounded by quotation marks.

 * double quotes inside single quotes: `$('a[rel="nofollow self"]')`
* single quotes inside double quotes: `$("a[rel='nofollow self']")`
* escaped single quotes inside single quotes: `$('a[rel=\'nofollow self\']')`
* escaped double quotes inside double quotes: `$("a[rel=\"nofollow self\"]")`

 The variation you choose is generally a matter of style or convenience.

 **Note**: In jQuery 1.3 `[@attr]` style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the "@" symbol from your selectors in order to make them work again.

    [Attribute Contains Prefix Selector [name|=”value”]](../../attribute-contains-prefix-selector "Permalink to 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 (-).

     [Attribute Contains Selector [name\*=”value”]](../../attribute-contains-selector "Permalink to Attribute Contains Selector [name*=”value”]")
=============================================================================================================================================

  Selects elements that have the specified attribute with a value containing a given substring.

     [Attribute Contains Word Selector [name~=”value”]](../../attribute-contains-word-selector "Permalink to Attribute Contains Word Selector [name~=”value”]")
===========================================================================================================================================================

  Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

     [Attribute Ends With Selector [name$=”value”]](../../attribute-ends-with-selector "Permalink to 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.

     [Attribute Equals Selector [name=”value”]](../../attribute-equals-selector "Permalink to Attribute Equals Selector [name=”value”]")
====================================================================================================================================

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

     [Attribute Not Equal Selector [name!=”value”]](../../attribute-not-equal-selector "Permalink to 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.

     [Attribute Starts With Selector [name^=”value”]](../../attribute-starts-with-selector "Permalink to Attribute Starts With Selector [name^=”value”]")
=====================================================================================================================================================

  Selects elements that have the specified attribute with a value beginning exactly with a given string.

     [Has Attribute Selector [name]](../../has-attribute-selector "Permalink to Has Attribute Selector [name]")
===========================================================================================================

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

     [Multiple Attribute Selector [name=”value”][name2=”value2″]](../../multiple-attribute-selector "Permalink to Multiple Attribute Selector [name=”value”][name2=”value2″]")
==========================================================================================================================================================================

  Matches elements that match all of the specified attribute filters.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/attribute-selectors>

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

  attributeStartsWith selector
----------------------------

  **Description:** Selects elements that have the specified attribute with a value beginning exactly with a given string.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute^='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted 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.

  Example:
--------


 Finds all inputs with an attribute name that starts with 'news' and puts text in them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeStartsWith demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="newsletter">
<input name="milkman">
<input name="newsboy">
 
<script>
$( "input[name^='news']" ).val( "news here!" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-starts-with-selector>

Category: General Attributes
============================

 
These methods get and set DOM attributes of elements

    [.attr()](../../attr "Permalink to .attr()")
=============================================

  Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

     [.prop()](../../prop "Permalink to .prop()")
=============================================

  Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

     [.removeAttr()](../../removeattr "Permalink to .removeAttr()")
===============================================================

  Remove an attribute from each element in the set of matched elements.

     [.removeProp()](../../removeprop "Permalink to .removeProp()")
===============================================================

  Remove a property for the set of matched elements.

     [.val()](../../val "Permalink to .val()")
==========================================

  Get the current value of the first element in the set of matched elements or set the value of every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/general-attributes>

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

  attributeContainsWord selector
------------------------------

  **Description:** Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute~='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted string.

  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.

  Example:
--------


 Finds all inputs with a name attribute that contains the word 'man' and sets the value with some text.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsWord demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
 
<script>
$( "input[name~='man']" ).val( "mr. man is in it!" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-contains-word-selector>

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

  attributeEndsWith selector
--------------------------

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

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute$='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted string.

 Example:
--------


 Finds all inputs with an attribute name that ends with 'letter' and puts text in them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEndsWith demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
 
<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-ends-with-selector>

callbacks.disable()
===================

   callbacks.disable()Returns: [Callbacks](types#Callbacks)
---------------------------------------------------------

  **Description:** Disable a callback list from doing anything more.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.disable()](#callbacks-disable)


	+ This method does not accept any arguments.

  This method returns the Callbacks object onto which it is attached (`this`).

  Example:
--------


 Use `callbacks.disable()` to disable further calls to a callback list:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( value );
};
 
var callbacks = $.Callbacks();
 
// Add the above function to the list
callbacks.add( foo );
 
// Fire the items on the list
callbacks.fire( "foo" );
// Outputs: foo
 
// Disable further calls being possible
callbacks.disable();
 
// Attempt to fire with "foobar" as an argument
callbacks.fire( "foobar" );
// foobar isn't output
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.disable>

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

  attributeContainsPrefix selector
--------------------------------

  **Description:** 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 (-).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute|='value']" )

 **attribute:** An attribute name.

 **value:** An attribute value. Can be either a [valid identifier](https://www.w3.org/TR/css3-selectors/#attribute-selectors) or a quoted string.

  This selector was introduced into the CSS specification to handle language attributes.

  Example:
--------


 Finds all links with an hreflang attribute that is english.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsPrefix demo</title>
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
 
<script>
$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/attribute-contains-prefix-selector>

.before()
=========

   .before( content [, content ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------

  **Description:** Insert content, specified by the parameter, before each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.before( content [, content ] )](#before-content-content)


	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  HTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert before each element in the set of matched elements.
	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert before each element in the set of matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.before( function )](#before-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index ) => [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [jQuery](types#jQuery)  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, `this` refers to the current element in the set.
* ####  version added: [1.10](https://api.jquery.com/category/version/1.10/)[.before( function-html )](#before-function-html)


	+ **function-html** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) html ) => [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [jQuery](types#jQuery)  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, `this` refers to the current element in the set.

  The `.before()` and `[.insertBefore()](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 content to be inserted comes from the method's argument: `$(target).before(contentToBeInserted)`. With `.insertBefore()`, on the other hand, the content precedes the method and is inserted before the target, which in turn is passed as the `.insertBefore()` method's argument: `$(contentToBeInserted).insertBefore(target)`.

 Consider the following HTML:

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 You can create content and insert it before several elements at once:

 
```
$( ".inner" ).before( "<p>Test</p>" );
```
 Each inner `<div>` element gets this new content:

 
```
<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>
```
 You can also select an element on the page and insert it before another:

 
```
$( ".container" ).before( $( "h2" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned):

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 **Important**: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

 #### Additional Arguments

 Similar to other content-adding methods such as `[.prepend()](prepend)` and `[.after()](after)`, `.before()` also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

 For example, the following will insert two new `<div>`s and an existing `<div>` before the first paragraph:

 
```
var newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
```
 Since `.before()` can accept any number of additional arguments, the same result can be achieved by passing in the three `<div>`s as three separate arguments, like so: `$( "p" ).first().before( $newdiv1, newdiv2, existingdiv1 )`. The type and number of arguments will largely depend on how you collect the elements in your code.

  ### Additional Notes:

 * Prior to jQuery 1.9, `.before()` would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, `.after()`, `.before()`, and `.replaceWith()` always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.
* By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
 Examples:
---------


 Inserts some HTML before all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said...</p>
 
<script>
$( "p" ).before( "<b>Hello</b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Inserts a DOM element before all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said...</p>
 
<script>
$( "p" ).before( document.createTextNode( "Hello" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said...</p><b>Hello</b>
 
<script>
$( "p" ).before( $( "b" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/before>

.blur()
=======

   .blur( handler )Returns: [jQuery](types#jQuery)
------------------------------------------------

  **Description:** Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.blur( handler )](#blur-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.blur( [eventData ], handler )](#blur-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.blur()](#blur)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "blur", handler )` in the first two variations, and `.trigger( "blur" )` in the third.

 The `blur` event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as `<input>`. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

 For example, consider the HTML:

 
```
<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>
The event handler can be bound to the first input field:
$( "#target" ).blur(function() {
  alert( "Handler for .blur() called." );
});
```
 Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

  `Handler for .blur() called.` 

 To trigger the event programmatically, apply `.blur()` without an argument:

 
```
$( "#other" ).click(function() {
  $( "#target" ).blur();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message.

 The `blur` event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the `blur` event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping `blur` to the `focusout` event in its event delegation methods, [`.live()`](live) and [`.delegate()`](delegate).

  ### Additional Notes:

 * As the `.blur()` method is just a shorthand for `.on( "blur", handler )`, detaching is possible using `.off( "blur" )`.
 Example:
--------


 To trigger the blur event on all paragraphs:

 
```
$( "p" ).blur();
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/blur>

:button Selector
================

  button selector
---------------

  **Description:** Selects all button elements and elements of type button.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":button" )

  An equivalent selector to `$( ":button" )` using valid CSS is `$( "button, input[type='button']" )`.

  ### Additional Notes:

 * Because `:button` is a jQuery extension and not part of the CSS specification, queries using `:button` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:button` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":button")`](filter).
 Example:
--------


 Find all button inputs and mark them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>button demo</title>
  <style>
  textarea {
    height: 35px;
  }
  div {
    color: red;
  }
  fieldset {
    margin: 0;
    padding: 0;
    border-width: 0;
  }
  .marked {
    background-color: yellow;
    border: 3px red solid;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <input type="button" value="Input Button">
    <input type="checkbox">
 
    <input type="file">
    <input type="hidden">
    <input type="image">
 
    <input type="password">
    <input type="radio">
    <input type="reset">
 
    <input type="submit">
    <input type="text">
    <select>
      <option>Option</option>
    </select>
 
    <textarea></textarea>
    <button>Button</button>
  </fieldset>
</form>
 
<div></div>
 
<script>
var input = $( ":button" ).addClass( "marked" );
$( "div" ).text( "For this type jQuery found " + input.length + "." );
// Prevent the form from submitting
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/button-selector>

callbacks.fire()
================

   callbacks.fire( arguments )Returns: [Callbacks](types#Callbacks)
-----------------------------------------------------------------

  **Description:** Call all of the callbacks with the given arguments.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.fire( arguments )](#callbacks-fire-arguments)


	+ **arguments** Type: [Anything](types#Anything)  The argument or list of arguments to pass back to the callback list.

  This method returns the Callbacks object onto which it is attached (`this`).

  Example:
--------


 Use `callbacks.fire()` to invoke the callbacks in a list with any arguments that have been passed:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo:" + value );
};
 
var callbacks = $.Callbacks();
 
// Add the function "foo" to the list
callbacks.add( foo );
 
// Fire the items on the list
callbacks.fire( "hello" ); // Outputs: "foo: hello"
callbacks.fire( "world" ); // Outputs: "foo: world"
 
// Add another function to the list
var bar = function( value ){
  console.log( "bar:" + value );
};
 
// Add this function to the list
callbacks.add( bar );
 
// Fire the items on the list again
callbacks.fire( "hello again" );
// Outputs:
// "foo: hello again"
// "bar: hello again"
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.fire>

callbacks.add()
===============

   callbacks.add( callbacks )Returns: [Callbacks](types#Callbacks)
----------------------------------------------------------------

  **Description:** Add a callback or a collection of callbacks to a callback list.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.add( callbacks )](#callbacks-add-callbacks)


	+ **callbacks** Type: [Function](types#Function)() or [Array](types#Array)  A function, or array of functions, that are to be added to the callback list.

  This method returns the Callbacks object onto which it is attached (`this`).

  Example:
--------


 Use `callbacks.add()` to add new callbacks to a callback list:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo: " + value );
};
 
// Another function to also be added to the list
var bar = function( value ) {
  console.log( "bar: " + value );
};
 
var callbacks = $.Callbacks();
 
// Add the function "foo" to the list
callbacks.add( foo );
 
// Fire the items on the list
callbacks.fire( "hello" );
// Outputs: "foo: hello"
 
// Add the function "bar" to the list
callbacks.add( bar );
 
// Fire the items on the list again
callbacks.fire( "world" );
 
// Outputs:
// "foo: world"
// "bar: world"
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.add>

Category: Callbacks Object
==========================

 
The `jQuery.Callbacks()` function, introduced in version 1.7, returns a multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firing, and disabling callbacks.

    [callbacks.add()](../callbacks.add "Permalink to callbacks.add()")
===================================================================

  Add a callback or a collection of callbacks to a callback list.

     [callbacks.disable()](../callbacks.disable "Permalink to callbacks.disable()")
===============================================================================

  Disable a callback list from doing anything more.

     [callbacks.disabled()](../callbacks.disabled "Permalink to callbacks.disabled()")
==================================================================================

  Determine if the callbacks list has been disabled.

     [callbacks.empty()](../callbacks.empty "Permalink to callbacks.empty()")
=========================================================================

  Remove all of the callbacks from a list.

     [callbacks.fire()](../callbacks.fire "Permalink to callbacks.fire()")
======================================================================

  Call all of the callbacks with the given arguments.

     [callbacks.fired()](../callbacks.fired "Permalink to callbacks.fired()")
=========================================================================

  Determine if the callbacks have already been called at least once.

     [callbacks.fireWith()](../callbacks.firewith "Permalink to callbacks.fireWith()")
==================================================================================

  Call all callbacks in a list with the given context and arguments.

     [callbacks.has()](../callbacks.has "Permalink to callbacks.has()")
===================================================================

  Determine whether or not the list has any callbacks attached. If a callback is provided as an argument, determine whether it is in a list.

     [callbacks.lock()](../callbacks.lock "Permalink to callbacks.lock()")
======================================================================

  Lock a callback list in its current state.

     [callbacks.locked()](../callbacks.locked "Permalink to callbacks.locked()")
============================================================================

  Determine if the callbacks list has been locked.

     [callbacks.remove()](../callbacks.remove "Permalink to callbacks.remove()")
============================================================================

  Remove a callback or a collection of callbacks from a callback list.

     [jQuery.Callbacks()](../jquery.callbacks "Permalink to jQuery.Callbacks()")
============================================================================

  A multi-purpose callbacks list object that provides a powerful way to manage callback lists.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/callbacks-object>

Category: Form Events
=====================

   [.blur()](../../blur "Permalink to .blur()")
=============================================

  Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

     [.change()](../../change "Permalink to .change()")
===================================================

  Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

     [.focus()](../../focus "Permalink to .focus()")
================================================

  Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

     [.focusin()](../../focusin "Permalink to .focusin()")
======================================================

  Bind an event handler to the “focusin” event.

     [.focusout()](../../focusout "Permalink to .focusout()")
=========================================================

  Bind an event handler to the “focusout” JavaScript event.

     [.select()](../../select "Permalink to .select()")
===================================================

  Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

     [.submit()](../../submit "Permalink to .submit()")
===================================================

  Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/form-events>

.bind()
=======

   .bind( eventType [, eventData ], handler )Returns: [jQuery](types#jQuery)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
-------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Attach a handler to an event for the elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.bind( eventType [, eventData ], handler )](#bind-eventType-eventData-handler)


	+ **eventType** Type: [String](types#String)  A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.bind( eventType [, eventData ] [, preventBubble ] )](#bind-eventType-eventData-preventBubble)


	+ **eventType** Type: [String](types#String)  A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **preventBubble** Type: [Boolean](types#Boolean)  Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.bind( events )](#bind-events)


	+ **events** Type: [Object](types#Object)  An object containing one or more DOM event types and functions to execute for them.

  As of jQuery 3.0, `.bind()` has been deprecated. It was superseded by the [`.on()`](on) method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the `.bind()` method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements *must exist* at the point the call to `.bind()` occurs. For more flexible event binding, see the discussion of event delegation in [`.on()`](on).

 Any string is legal for `eventType`; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using `.trigger()` or `.triggerHandler()`.

 If the `eventType` string contains a period (`.`) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call `.bind( "click.name", handler )`, the string `click` is the event type, and the string `name` is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of `.unbind()` for more information.

 There are shorthand methods for some standard browser events such as [`.click()`](click) that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the [events category](category/events).

 When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

 A basic usage of `.bind()` is:

 
```
$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});
```
 This code will cause the element with an ID of `foo` to respond to the `click` event. When a user clicks inside this element thereafter, the alert will be shown.

 #### Multiple Events

 Multiple event types can be bound at once by including each one separated by a space:

 
```
$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});
```
 The effect of this on `<div id="foo">` (when it does not initially have the "entered" class) is to add the "entered" class when the mouse enters the `<div>` and remove the class when the mouse leaves. 

 As of jQuery 1.4 we can bind multiple event handlers simultaneously by passing an object of event type/handler pairs:

 
```
$( "#foo" ).bind({
  click: function() {
    // Do something on click
  },
  mouseenter: function() {
    // Do something on mouseenter
  }
});
```
 #### Event Handlers

 The `handler` parameter takes a callback function, as shown above. Within the handler, the keyword `this` refers to the DOM element to which the handler is bound. To make use of the element in jQuery, it can be passed to the normal `$()` function. For example:

 
```
$( "#foo" ).bind( "click", function() {
  alert( $( this ).text() );
});
```
 After this code is executed, when the user clicks inside the element with an ID of `foo`, its text contents will be shown as an alert. 

 As of jQuery 1.4.2 duplicate event handlers can be bound to an element instead of being discarded. This is useful when the event data feature is being used, or when other unique data resides in a closure around the event handler function.

 In jQuery 1.4.3 you can now pass in `false` in place of an event handler. This will bind an event handler equivalent to: `function(){ return false; }`. This function can be removed at a later time by calling: `.unbind( eventName, false )`.

 ####  [The Event object](category/events/event-object)

 The `handler` callback function can also take parameters. When the function is called, the event object will be passed to the first parameter.

 The event object is often unnecessary and the parameter omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered. However, at times it becomes necessary to gather more information about the user's environment at the time the event was initiated. [View the full Event Object](category/events/event-object).

 Returning `false` from a handler is equivalent to calling both `.preventDefault()` and `.stopPropagation()` on the event object.

 Using the event object in a handler looks like this:

 
```
$( document ).ready(function() {
  $( "#foo" ).bind( "click", function( event ) {
    alert( "The mouse cursor is at (" +
      event.pageX + ", " + event.pageY +
      ")" );
  });
});
```
 Note the parameter added to the anonymous function. This code will cause a click on the element with ID `foo` to report the page coordinates of the mouse cursor at the time of the click.

 #### Passing Event Data

 The optional `eventData` parameter is not commonly used. When provided, this argument allows us to pass additional information to the handler. One handy use of this parameter is to work around issues caused by closures. For example, suppose we have two event handlers that both refer to the same external variable:

 
```
var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
  alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
  alert( message );
});
```
 Because the handlers are closures that both have `message` in their environment, both will display the message `Not in the face!` when triggered. The variable's value has changed. To sidestep this, we can pass the message in using `eventData`: 

 
```
var message = "Spoon!";
$( "#foo" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
```
 This time the variable is not referred to directly within the handlers; instead, the variable is passed in *by value* through `eventData`, which fixes the value at the time the event is bound. The first handler will now display `Spoon!` while the second will alert `Not in the face!` 

  Note that objects are passed to functions *by reference*, which further complicates this scenario.

  If `eventData` is present, it is the second argument to the `.bind()` method; if no additional data needs to be sent to the handler, then the callback is passed as the second and final argument.

  See the `.trigger()` method reference for a way to pass data to a handler at the time the event happens rather than when the handler is bound.

  As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.

 **Note:** Although demonstrated in the next example, it is inadvisable to bind handlers to both the `click` and `dblclick` events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the `dblclick` and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

  Examples:
---------


 Handle click and double-click for the paragraph. Note: the coordinates are window relative, so in this case relative to the demo iframe.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
     background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Click or double click here.</p>
<span></span>
 
<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>
 
</body>
</html>
```
 #### Demo:

   To display each paragraph's text in an alert box whenever it is clicked:

 
```
$( "p" ).bind( "click", function() {
  alert( $( this ).text() );
});
```
   You can pass some extra data before the event handler:

 
```
function handler( event ) {
  alert( event.data.foo );
}
$( "p" ).bind( "click", {
  foo: "bar"
}, handler );
```
   Cancel a default action and prevent it from bubbling up by returning `false`:

 
```
$( "form" ).bind( "submit", function() {
  return false;
})
```
   Cancel only the default action by using the .preventDefault() method.

 
```
$( "form" ).bind( "submit", function( event ) {
  event.preventDefault();
});
```
   Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.

 
```
$( "form" ).bind( "submit", function( event ) {
  event.stopPropagation();
});
```
   Bind custom events.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display: none;"></span>
 
<script>
$( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Bind multiple events simultaneously.

 
```
$( "div.test" ).bind({
  click: function() {
    $( this ).addClass( "active" );
  },
  mouseenter: function() {
    $( this ).addClass( "inside" );
  },
  mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/bind>

Category: Event Handler Attachment
==================================

   [.bind()](../../bind "Permalink to .bind()")
=============================================

  Attach a handler to an event for the elements.

     [.delegate()](../../delegate "Permalink to .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.

     [.die()](../../die "Permalink to .die()")
==========================================

  Remove event handlers previously attached using .live() from the elements.

     [jQuery.proxy()](../../jquery.proxy "Permalink to jQuery.proxy()")
===================================================================

  Takes a function and returns a new one that will always have a particular context.

     [.live()](../../live "Permalink to .live()")
=============================================

  Attach an event handler for all elements which match the current selector, now and in the future.

     [.off()](../../off "Permalink to .off()")
==========================================

  Remove an event handler.

     [.on()](../../on "Permalink to .on()")
=======================================

  Attach an event handler function for one or more events to the selected elements.

     [.one()](../../one "Permalink to .one()")
==========================================

  Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

     [.trigger()](../../trigger "Permalink to .trigger()")
======================================================

  Execute all handlers and behaviors attached to the matched elements for the given event type.

     [.triggerHandler()](../../triggerhandler "Permalink to .triggerHandler()")
===========================================================================

  Execute all handlers attached to an element for an event.

     [.unbind()](../../unbind "Permalink to .unbind()")
===================================================

  Remove a previously-attached event handler from the elements.

     [.undelegate()](../../undelegate "Permalink to .undelegate()")
===============================================================

  Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/event-handler-attachment>

Category: Form
==============

   [:button Selector](../../button-selector "Permalink to :button Selector")
==========================================================================

  Selects all button elements and elements of type button.

     [:checkbox Selector](../../checkbox-selector "Permalink to :checkbox Selector")
================================================================================

  Selects all elements of type checkbox.

     [:checked Selector](../../checked-selector "Permalink to :checked Selector")
=============================================================================

  Matches all elements that are checked or selected.

     [:disabled Selector](../../disabled-selector "Permalink to :disabled Selector")
================================================================================

  Selects all elements that are disabled.

     [:enabled Selector](../../enabled-selector "Permalink to :enabled Selector")
=============================================================================

  Selects all elements that are enabled.

     [:file Selector](../../file-selector "Permalink to :file Selector")
====================================================================

  Selects all elements of type file.

     [:focus Selector](../../focus-selector "Permalink to :focus Selector")
=======================================================================

  Selects element if it is currently focused.

     [:image Selector](../../image-selector "Permalink to :image Selector")
=======================================================================

  Selects all elements of type image.

     [:input Selector](../../input-selector "Permalink to :input Selector")
=======================================================================

  Selects all input, textarea, select and button elements.

     [:password Selector](../../password-selector "Permalink to :password Selector")
================================================================================

  Selects all elements of type password.

     [:radio Selector](../../radio-selector "Permalink to :radio Selector")
=======================================================================

  Selects all elements of type radio.

     [:reset Selector](../../reset-selector "Permalink to :reset Selector")
=======================================================================

  Selects all elements of type reset.

     [:selected Selector](../../selected-selector "Permalink to :selected Selector")
================================================================================

  Selects all elements that are selected.

     [:submit Selector](../../submit-selector "Permalink to :submit Selector")
==========================================================================

  Selects all elements of type submit.

     [:text Selector](../../text-selector "Permalink to :text Selector")
====================================================================

  Selects all input elements of type text.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/form-selectors>

.change()
=========

   .change( handler )Returns: [jQuery](types#jQuery)
--------------------------------------------------

  **Description:** Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.change( handler )](#change-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.change( [eventData ], handler )](#change-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.change()](#change)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "change", handler )` in the first two variations, and `.trigger( "change" )` in the third.

 The `change` event is sent to an element when its value changes. This event is limited to `<input>` elements, `<textarea>` boxes and `<select>` elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

 For example, consider the HTML:

 
```
<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the text input and the select box:

 
```
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});
```
 Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply `.change()` without arguments:

 
```
$( "#other" ).click(function() {
  $( ".target" ).change();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message. The message will display twice, because the handler has been bound to the `change` event on both of the form elements.

 As of jQuery 1.4, the `change` event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.

  **Note:** Changing the value of an input element using JavaScript, using [`.val()`](val) for example, won't fire the event.

   ### Additional Notes:

 * As the `.change()` method is just a shorthand for `.on( "change", handler )`, detaching is possible using `.off( "change" )`.
 Examples:
---------


 Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>
 
</body>
</html>
```
 #### Demo:

   To add a validity test to all text input elements:

 
```
$( "input[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/change>

callbacks.disabled()
====================

   callbacks.disabled()Returns: [Boolean](types#Boolean)
------------------------------------------------------

  **Description:** Determine if the callbacks list has been disabled.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.disabled()](#callbacks-disabled)


	+ This method does not accept any arguments.

 Example:
--------


 Use `callbacks.disabled()` to determine if the callbacks list has been disabled:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo:" + value );
};
 
var callbacks = $.Callbacks();
 
// Add the logging function to the callback list
callbacks.add( foo );
 
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// Outputs "foo: hello"
 
// Disable the callbacks list
callbacks.disable();
 
// Test the disabled state of the list
console.log ( callbacks.disabled() );
// Outputs: true
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.disabled>

callbacks.empty()
=================

   callbacks.empty()Returns: [Callbacks](types#Callbacks)
-------------------------------------------------------

  **Description:** Remove all of the callbacks from a list.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.empty()](#callbacks-empty)


	+ This method does not accept any arguments.

  This method returns the Callbacks object onto which it is attached (`this`).

  Example:
--------


 Use `callbacks.empty()` to empty a list of callbacks:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value1, value2 ) {
  console.log( "foo: " + value1 + "," + value2 );
};
 
// Another function to also be added to the list
var bar = function( value1, value2 ) {
  console.log( "bar: " + value1 + "," + value2 );
};
 
var callbacks = $.Callbacks();
 
// Add the two functions
callbacks.add( foo );
callbacks.add( bar );
 
// Empty the callbacks list
callbacks.empty();
 
// Check to ensure all callbacks have been removed
console.log( callbacks.has( foo ) );
// false
console.log( callbacks.has( bar ) );
// false
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.empty>

Category: Events
================

 
These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.

    [.bind()](../bind "Permalink to .bind()")
==========================================

  Attach a handler to an event for the elements.

     [.blur()](../blur "Permalink to .blur()")
==========================================

  Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

     [.change()](../change "Permalink to .change()")
================================================

  Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

     [.click()](../click "Permalink to .click()")
=============================================

  Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

     [.contextmenu()](../contextmenu "Permalink to .contextmenu()")
===============================================================

  Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

     [.dblclick()](../dblclick "Permalink to .dblclick()")
======================================================

  Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

     [.delegate()](../delegate "Permalink to .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.

     [.die()](../die "Permalink to .die()")
=======================================

  Remove event handlers previously attached using .live() from the elements.

     [.error()](../error "Permalink to .error()")
=============================================

  Bind an event handler to the “error” JavaScript event.

     [event.currentTarget](../event.currenttarget "Permalink to event.currentTarget")
=================================================================================

  The current DOM element within the event bubbling phase.

     [event.data](../event.data "Permalink to event.data")
======================================================

  An optional object of data passed to an event method when the current executing handler is bound.

     [event.delegateTarget](../event.delegatetarget "Permalink to event.delegateTarget")
====================================================================================

  The element where the currently-called jQuery event handler was attached.

     [event.isDefaultPrevented()](../event.isdefaultprevented "Permalink to event.isDefaultPrevented()")
====================================================================================================

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

     [event.isImmediatePropagationStopped()](../event.isimmediatepropagationstopped "Permalink to event.isImmediatePropagationStopped()")
=====================================================================================================================================

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

     [event.isPropagationStopped()](../event.ispropagationstopped "Permalink to event.isPropagationStopped()")
==========================================================================================================

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

     [event.metaKey](../event.metakey "Permalink to event.metaKey")
===============================================================

  Indicates whether the META key was pressed when the event fired.

     [event.namespace](../event.namespace "Permalink to event.namespace")
=====================================================================

  The namespace specified when the event was triggered.

     [event.pageX](../event.pagex "Permalink to event.pageX")
=========================================================

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

     [event.pageY](../event.pagey "Permalink to event.pageY")
=========================================================

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

     [event.preventDefault()](../event.preventdefault "Permalink to event.preventDefault()")
========================================================================================

  If this method is called, the default action of the event will not be triggered.

     [event.relatedTarget](../event.relatedtarget "Permalink to event.relatedTarget")
=================================================================================

  The other DOM element involved in the event, if any.

     [event.result](../event.result "Permalink to event.result")
============================================================

  The last value returned by an event handler that was triggered by this event, unless the value was undefined.

     [event.stopImmediatePropagation()](../event.stopimmediatepropagation "Permalink to event.stopImmediatePropagation()")
======================================================================================================================

  Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

     [event.stopPropagation()](../event.stoppropagation "Permalink to event.stopPropagation()")
===========================================================================================

  Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

     [event.target](../event.target "Permalink to event.target")
============================================================

  The DOM element that initiated the event.

     [event.timeStamp](../event.timestamp "Permalink to event.timeStamp")
=====================================================================

  The difference in milliseconds between the time the browser created the event and January 1, 1970.

     [event.type](../event.type "Permalink to event.type")
======================================================

  Describes the nature of the event.

     [event.which](../event.which "Permalink to event.which")
=========================================================

  For key or mouse events, this property indicates the specific key or button that was pressed.

     [.focus()](../focus "Permalink to .focus()")
=============================================

  Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

     [.focusin()](../focusin "Permalink to .focusin()")
===================================================

  Bind an event handler to the “focusin” event.

     [.focusout()](../focusout "Permalink to .focusout()")
======================================================

  Bind an event handler to the “focusout” JavaScript event.

     [.hover()](../hover "Permalink to .hover()")
=============================================

  Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

     [jQuery.holdReady()](../jquery.holdready "Permalink to jQuery.holdReady()")
============================================================================

  Holds or releases the execution of jQuery’s ready event.

     [jQuery.proxy()](../jquery.proxy "Permalink to jQuery.proxy()")
================================================================

  Takes a function and returns a new one that will always have a particular context.

     [jQuery.ready](../jquery.ready "Permalink to jQuery.ready")
============================================================

  A Promise-like object (or “thenable”) that resolves when the document is ready.

     [.keydown()](../keydown "Permalink to .keydown()")
===================================================

  Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.

     [.keypress()](../keypress "Permalink to .keypress()")
======================================================

  Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

     [.keyup()](../keyup "Permalink to .keyup()")
=============================================

  Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

     [.live()](../live "Permalink to .live()")
==========================================

  Attach an event handler for all elements which match the current selector, now and in the future.

     [.load()](../load-event "Permalink to .load()")
================================================

  Bind an event handler to the “load” JavaScript event.

     [.mousedown()](../mousedown "Permalink to .mousedown()")
=========================================================

  Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.

     [.mouseenter()](../mouseenter "Permalink to .mouseenter()")
============================================================

  Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

     [.mouseleave()](../mouseleave "Permalink to .mouseleave()")
============================================================

  Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

     [.mousemove()](../mousemove "Permalink to .mousemove()")
=========================================================

  Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

     [.mouseout()](../mouseout "Permalink to .mouseout()")
======================================================

  Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

     [.mouseover()](../mouseover "Permalink to .mouseover()")
=========================================================

  Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

     [.mouseup()](../mouseup "Permalink to .mouseup()")
===================================================

  Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.

     [.off()](../off "Permalink to .off()")
=======================================

  Remove an event handler.

     [.on()](../on "Permalink to .on()")
====================================

  Attach an event handler function for one or more events to the selected elements.

     [.one()](../one "Permalink to .one()")
=======================================

  Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

     [.ready()](../ready "Permalink to .ready()")
=============================================

  Specify a function to execute when the DOM is fully loaded.

     [.resize()](../resize "Permalink to .resize()")
================================================

  Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.

     [.scroll()](../scroll "Permalink to .scroll()")
================================================

  Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

     [.select()](../select "Permalink to .select()")
================================================

  Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

     [.submit()](../submit "Permalink to .submit()")
================================================

  Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

     [.toggle()](../toggle-event "Permalink to .toggle()")
======================================================

  Bind two or more handlers to the matched elements, to be executed on alternate clicks.

     [.trigger()](../trigger "Permalink to .trigger()")
===================================================

  Execute all handlers and behaviors attached to the matched elements for the given event type.

     [.triggerHandler()](../triggerhandler "Permalink to .triggerHandler()")
========================================================================

  Execute all handlers attached to an element for an event.

     [.unbind()](../unbind "Permalink to .unbind()")
================================================

  Remove a previously-attached event handler from the elements.

     [.undelegate()](../undelegate "Permalink to .undelegate()")
============================================================

  Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

     [.unload()](../unload "Permalink to .unload()")
================================================

  Bind an event handler to the “unload” JavaScript event.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events>

callbacks.has()
===============

   callbacks.has( [callback ] )Returns: [Boolean](types#Boolean)
--------------------------------------------------------------

  **Description:** Determine whether or not the list has any callbacks attached. If a callback is provided as an argument, determine whether it is in a list.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.has( [callback ] )](#callbacks-has-callback)


	+ **callback** Type: [Function](types#Function)() The callback to search for.

 Example:
--------


 Use `callbacks.has()` to check if a callback list contains a specific callback:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value1, value2 ) {
  console.log( "Received: " + value1 + "," + value2 );
};
 
// A second function which will not be added to the list
var bar = function( value1, value2 ) {
  console.log( "foobar" );
};
 
var callbacks = $.Callbacks();
 
// Add the log method to the callbacks list
callbacks.add( foo );
 
// Determine which callbacks are in the list
console.log( callbacks.has( foo ) );
// true
console.log( callbacks.has( bar ) );
// false
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.has>

callbacks.lock()
================

   callbacks.lock()Returns: [Callbacks](types#Callbacks)
------------------------------------------------------

  **Description:** Lock a callback list in its current state.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.lock()](#callbacks-lock)


	+ This method does not accept any arguments.

  This method returns the Callbacks object onto which it is attached (`this`).

 If the Callbacks object is created with the `"memory"` flag as its argument, additional functions may be added and fired after the callback list is locked.

  Examples:
---------


 Use `callbacks.lock()` to lock a callback list to avoid further changes being made to the list state:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo:" + value );
};
 
var callbacks = $.Callbacks();
 
// Add the logging function to the callback list
callbacks.add( foo );
 
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// Outputs "foo: hello"
 
// Lock the callbacks list
callbacks.lock();
 
// Try firing the items again
callbacks.fire( "world" );
 
// As the list was locked, no items were called,
// so "world" isn't logged
```
   Use `callbacks.lock()` to lock a callback list with "memory," and then resume using the list:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>callbacks.lock demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
// Simple function for logging results
var log = function( value ) {
  $( "#log" ).append( "<p>" + value + "</p>" );
};
 
// Two sample functions to be added to a callbacks list
var foo = function( value ) {
  log( "foo: " + value );
};
var bar = function( value ) {
  log( "bar: " + value );
};
 
// Create the callbacks object with the "memory" flag
var callbacks = $.Callbacks( "memory" );
 
// Add the foo logging function to the callback list
callbacks.add( foo );
 
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// Outputs "foo: hello"
 
// Lock the callbacks list
callbacks.lock();
 
// Try firing the items again
callbacks.fire( "world" );
// As the list was locked, no items were called,
// so "foo: world" isn't logged
 
// Add the foo function to the callback list again
callbacks.add( foo );
 
// Try firing the items again
callbacks.fire( "silentArgument" );
// Outputs "foo: hello" because the argument value was stored in memory
 
// Add the bar function to the callback list
callbacks.add( bar );
 
callbacks.fire( "youHadMeAtHello" );
// Outputs "bar: hello" because the list is still locked,
// and the argument value is still stored in memory
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.lock>

Category: Forms
===============

 
These methods and event handlers handle forms and their various elements.

    [.blur()](../blur "Permalink to .blur()")
==========================================

  Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

     [.change()](../change "Permalink to .change()")
================================================

  Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

     [.focus()](../focus "Permalink to .focus()")
=============================================

  Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

     [.focusin()](../focusin "Permalink to .focusin()")
===================================================

  Bind an event handler to the “focusin” event.

     [.focusout()](../focusout "Permalink to .focusout()")
======================================================

  Bind an event handler to the “focusout” JavaScript event.

     [jQuery.param()](../jquery.param "Permalink to jQuery.param()")
================================================================

  Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

     [.select()](../select "Permalink to .select()")
================================================

  Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

     [.serialize()](../serialize "Permalink to .serialize()")
=========================================================

  Encode a set of form elements as a string for submission.

     [.serializeArray()](../serializearray "Permalink to .serializeArray()")
========================================================================

  Encode a set of form elements as an array of names and values.

     [.submit()](../submit "Permalink to .submit()")
================================================

  Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

     [.val()](../val "Permalink to .val()")
=======================================

  Get the current value of the first element in the set of matched elements or set the value of every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/forms>

:checkbox Selector
==================

  checkbox selector
-----------------

  **Description:** Selects all elements of type checkbox.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":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. 

  ### Additional Notes:

 * Because `:checkbox` is a jQuery extension and not part of the CSS specification, queries using `:checkbox` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="checkbox"]` instead.
 Example:
--------


 Finds all checkbox inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checkbox demo</title>
  <style>
  textarea {
    height: 25px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
 
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
 
  <input type="image">
  <input type="password">
  <input type="radio">
 
  <input type="reset">
  <input type="submit">
  <input type="text">
 
  <select>
    <option>Option</option>
  </select>
 
  <textarea></textarea>
  <button>Button</button>
</form>
 
<div></div>
 
<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" );
 
// Prevent the form from submitting
$( "form" ).submit(function( event ) {
    event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/checkbox-selector>

callbacks.fired()
=================

   callbacks.fired()Returns: [Boolean](types#Boolean)
---------------------------------------------------

  **Description:** Determine if the callbacks have already been called at least once.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.fired()](#callbacks-fired)


	+ This method does not accept any arguments.

 Example:
--------


 Use `callbacks.fired()` to determine if the callbacks in a list have been called at least once:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo:" + value );
};
 
var callbacks = $.Callbacks();
 
// Add the function "foo" to the list
callbacks.add( foo );
 
// Fire the items on the list
callbacks.fire( "hello" ); // Outputs: "foo: hello"
callbacks.fire( "world" ); // Outputs: "foo: world"
 
// Test to establish if the callbacks have been called
console.log( callbacks.fired() );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.fired>

callbacks.locked()
==================

   callbacks.locked()Returns: [Boolean](types#Boolean)
----------------------------------------------------

  **Description:** Determine if the callbacks list has been locked.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.locked()](#callbacks-locked)


	+ This method does not accept any arguments.

 Example:
--------


 Use `callbacks.locked()` to determine the lock-state of a callback list:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo: " + value );
};
 
var callbacks = $.Callbacks();
 
// Add the logging function to the callback list
callbacks.add( foo );
 
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// Outputs "foo: hello"
 
// Lock the callbacks list
callbacks.lock();
 
// Test the lock-state of the list
console.log ( callbacks.locked() );
// true
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.locked>

callbacks.remove()
==================

   callbacks.remove( callbacks )Returns: [Callbacks](types#Callbacks)
-------------------------------------------------------------------

  **Description:** Remove a callback or a collection of callbacks from a callback list.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.remove( callbacks )](#callbacks-remove-callbacks)


	+ **callbacks** Type: [Function](types#Function)() or [Array](types#Array)  A function, or array of functions, that are to be removed from the callback list.

  This method returns the Callbacks object onto which it is attached (`this`).

  Example:
--------


 Use `callbacks.remove()` to remove callbacks from a callback list:

 
```
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
  console.log( "foo: " + value );
};
 
var callbacks = $.Callbacks();
 
// Add the function "foo" to the list
callbacks.add( foo );
 
// Fire the items on the list
callbacks.fire( "hello" );
// Outputs: "foo: hello"
 
// Remove "foo" from the callback list
callbacks.remove( foo );
 
// Fire the items on the list again
callbacks.fire( "world" );
 
// Nothing output as "foo" is no longer in the list
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.remove>

Category: Utilities
===================

   [.clearQueue()](../clearqueue "Permalink to .clearQueue()")
============================================================

  Remove from the queue all items that have not yet been run.

     [.dequeue()](../dequeue "Permalink to .dequeue()")
===================================================

  Execute the next function on the queue for the matched elements.

     [jQuery.boxModel](../jquery.boxmodel "Permalink to jQuery.boxModel")
=====================================================================

  States if the current page, in the user’s browser, is being rendered using the W3C CSS Box Model.

     [jQuery.browser](../jquery.browser "Permalink to jQuery.browser")
==================================================================

  Contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

     [jQuery.contains()](../jquery.contains "Permalink to jQuery.contains()")
=========================================================================

  Check to see if a DOM element is a descendant of another DOM element.

     [jQuery.data()](../jquery.data "Permalink to jQuery.data()")
=============================================================

  Store arbitrary data associated with the specified element and/or return the value that was set.

     [jQuery.dequeue()](../jquery.dequeue "Permalink to jQuery.dequeue()")
======================================================================

  Execute the next function on the queue for the matched element.

     [jQuery.each()](../jquery.each "Permalink to 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.

     [jQuery.extend()](../jquery.extend "Permalink to jQuery.extend()")
===================================================================

  Merge the contents of two or more objects together into the first object.

     [jQuery.fn.extend()](../jquery.fn.extend "Permalink to jQuery.fn.extend()")
============================================================================

  Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

     [jQuery.globalEval()](../jquery.globaleval "Permalink to jQuery.globalEval()")
===============================================================================

  Execute some JavaScript code globally.

     [jQuery.grep()](../jquery.grep "Permalink to jQuery.grep()")
=============================================================

  Finds the elements of an array which satisfy a filter function. The original array is not affected.

     [jQuery.inArray()](../jquery.inarray "Permalink to jQuery.inArray()")
======================================================================

  Search for a specified value within an array and return its index (or -1 if not found).

     [jQuery.isArray()](../jquery.isarray "Permalink to jQuery.isArray()")
======================================================================

  Determine whether the argument is an array.

     [jQuery.isEmptyObject()](../jquery.isemptyobject "Permalink to jQuery.isEmptyObject()")
========================================================================================

  Check to see if an object is empty (contains no enumerable properties).

     [jQuery.isFunction()](../jquery.isfunction "Permalink to jQuery.isFunction()")
===============================================================================

  Determines if its argument is callable as a function.

     [jQuery.isNumeric()](../jquery.isnumeric "Permalink to jQuery.isNumeric()")
============================================================================

  Determines whether its argument represents a JavaScript number.

     [jQuery.isPlainObject()](../jquery.isplainobject "Permalink to jQuery.isPlainObject()")
========================================================================================

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

     [jQuery.isWindow()](../jquery.iswindow "Permalink to jQuery.isWindow()")
=========================================================================

  Determine whether the argument is a window.

     [jQuery.isXMLDoc()](../jquery.isxmldoc "Permalink to jQuery.isXMLDoc()")
=========================================================================

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

     [jQuery.makeArray()](../jquery.makearray "Permalink to jQuery.makeArray()")
============================================================================

  Convert an array-like object into a true JavaScript array.

     [jQuery.map()](../jquery.map "Permalink to jQuery.map()")
==========================================================

  Translate all items in an array or object to new array of items.

     [jQuery.merge()](../jquery.merge "Permalink to jQuery.merge()")
================================================================

  Merge the contents of two arrays together into the first array.

     [jQuery.noop()](../jquery.noop "Permalink to jQuery.noop()")
=============================================================

  An empty function.

     [jQuery.now()](../jquery.now "Permalink to jQuery.now()")
==========================================================

  Return a number representing the current time.

     [jQuery.parseHTML()](../jquery.parsehtml "Permalink to jQuery.parseHTML()")
============================================================================

  Parses a string into an array of DOM nodes.

     [jQuery.parseJSON()](../jquery.parsejson "Permalink to jQuery.parseJSON()")
============================================================================

  Takes a well-formed JSON string and returns the resulting JavaScript value.

     [jQuery.parseXML()](../jquery.parsexml "Permalink to jQuery.parseXML()")
=========================================================================

  Parses a string into an XML document.

     [jQuery.proxy()](../jquery.proxy "Permalink to jQuery.proxy()")
================================================================

  Takes a function and returns a new one that will always have a particular context.

     [jQuery.queue()](../jquery.queue "Permalink to jQuery.queue()")
================================================================

  Show or manipulate the queue of functions to be executed on the matched element.

     [jQuery.removeData()](../jquery.removedata "Permalink to jQuery.removeData()")
===============================================================================

  Remove a previously-stored piece of data.

     [jQuery.support](../jquery.support "Permalink to jQuery.support")
==================================================================

  A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery’s internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project’s feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

     [jQuery.trim()](../jquery.trim "Permalink to jQuery.trim()")
=============================================================

  Remove the whitespace from the beginning and end of a string.

     [jQuery.type()](../jquery.type "Permalink to jQuery.type()")
=============================================================

  Determine the internal JavaScript [[Class]] of an object.

     [jQuery.unique()](../jquery.unique "Permalink to 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.

     [jQuery.uniqueSort()](../jquery.uniquesort "Permalink to jQuery.uniqueSort()")
===============================================================================

  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.

     [.queue()](../queue "Permalink to .queue()")
=============================================

  Show or manipulate the queue of functions to be executed on the matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/utilities>

Category: Tree Traversal
========================

   [.children()](../../children "Permalink to .children()")
=========================================================

  Get the children of each element in the set of matched elements, optionally filtered by a selector.

     [.closest()](../../closest "Permalink to .closest()")
======================================================

  For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

     [.find()](../../find "Permalink to .find()")
=============================================

  Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

     [.next()](../../next "Permalink to .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.

     [.nextAll()](../../nextall "Permalink to .nextAll()")
======================================================

  Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.nextUntil()](../../nextuntil "Permalink to .nextUntil()")
============================================================

  Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

     [.offsetParent()](../../offsetparent "Permalink to .offsetParent()")
=====================================================================

  Get the closest ancestor element that is positioned.

     [.parent()](../../parent "Permalink to .parent()")
===================================================

  Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

     [.parents()](../../parents "Permalink to .parents()")
======================================================

  Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

     [.parentsUntil()](../../parentsuntil "Permalink to .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, DOM node, or jQuery object.

     [.prev()](../../prev "Permalink to .prev()")
=============================================

  Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

     [.prevAll()](../../prevall "Permalink to .prevAll()")
======================================================

  Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

     [.prevUntil()](../../prevuntil "Permalink to .prevUntil()")
============================================================

  Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

     [.siblings()](../../siblings "Permalink to .siblings()")
=========================================================

  Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/traversing/tree-traversal>

callbacks.fireWith()
====================

   callbacks.fireWith( [context ] [, args ] )Returns: [Callbacks](types#Callbacks)
--------------------------------------------------------------------------------

  **Description:** Call all callbacks in a list with the given context and arguments.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[callbacks.fireWith( [context ] [, args ] )](#callbacks-fireWith-context-args)


	+ **context** Type: [Anything](types#Anything)  A reference to the context in which the callbacks in the list should be fired.
	+ **args** Type: [ArrayLikeObject](types#ArrayLikeObject)  An array or array-like object of arguments to pass to the callbacks in the list. If omitted or undefined, no arguments will be passed.

  This method returns the Callbacks object onto which it is attached (`this`).

  Example:
--------


 Use `callbacks.fireWith()` to fire a list of callbacks with a specific context and an array of arguments:

 
```
// A sample logging function to be added to a callbacks list
var log = function( value1, value2 ) {
  console.log( "Received: " + value1 + "," + value2 );
};
 
var callbacks = $.Callbacks();
 
// Add the log method to the callbacks list
callbacks.add( log );
 
// Fire the callbacks on the list using the context "window"
// and an arguments array
 
callbacks.fireWith( window, [ "foo","bar" ] );
// Outputs: "Received: foo, bar"
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/callbacks.fireWith>

:checked Selector
=================

  checked selector
----------------

  **Description:** Matches all elements that are checked or selected.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":checked" )

  The `:checked` selector works for checkboxes, radio buttons, and options of `select` elements.

 To retrieve only the selected options of `select` elements, use the [`:selected`](selected-selector) selector.

  Examples:
---------


 Determine how many input elements are checked.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checked demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
 
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
 
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>
<div></div>
 
<script>
var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();
 
$( "input[type=checkbox]" ).on( "click", countChecked );
</script>
 
</body>
</html>
```
 #### Demo:

   Identify the checked radio input.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checked demo</title>
  <style>
  input, label {
    line-height: 1.5em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>
 
<script>
$( "input" ).on( "click", function() {
  $( "#log" ).html( $( "input:checked" ).val() + " is checked!" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/checked-selector>

Child Selector (“parent > child”)
=================================

  child selector
--------------

  **Description:** Selects all direct child elements specified by "child" of elements specified by "parent".

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "parent > child" )

 **parent:** Any valid selector.

 **child:** A selector to filter the child elements.

  The child combinator (E **>** F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

  Example:
--------


 Places a border around all list items that are children of <ul class="topnav"> .

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>child demo</title>
  <style>
  body {
    font-size: 14px;
  }
  	</style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
 
<script>
$( "ul.topnav > li" ).css( "border", "3px double red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/child-selector>

.click()
========

   .click( handler )Returns: [jQuery](types#jQuery)
-------------------------------------------------

  **Description:** Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.click( handler )](#click-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.click( [eventData ], handler )](#click-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.click()](#click)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "click", handler )` in the first two variations, and `.trigger( "click" )` in the third. The `click` event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. For example, consider the HTML:

 
```
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any `<div>`:

 
```
$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});
```
 Now if we click on this element, the alert is displayed:

  `Handler for .click() called.` 

 We can also trigger the event when a different element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#target" ).click();
});
```
 After this code executes, clicking on `Trigger the handler` will also alert the message.

 The `click` event is only triggered after this exact series of events:

 * The mouse button is depressed while the pointer is inside the element.
* The mouse button is released while the pointer is inside the element.

 This is usually the desired sequence before taking an action. If this is not required, the `mousedown` or `mouseup` event may be more suitable.

  ### Additional Notes:

 * As the `.click()` method is just a shorthand for `.on( "click", handler )`, detaching is possible using `.off( "click" )`.
 Examples:
---------


 Hide paragraphs on a page when they are clicked:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>
  <style>
  p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }
  p:hover {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
 
<script>
$( "p" ).click(function() {
  $( this ).slideUp();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Trigger the click event on all of the paragraphs on the page:

 
```
$( "p" ).click();
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/click>

Category: Hierarchy
===================

   [Child Selector (“parent > child”)](../../child-selector "Permalink to Child Selector (“parent > child”)")
===========================================================================================================

  Selects all direct child elements specified by “child” of elements specified by “parent”.

     [Descendant Selector (“ancestor descendant”)](../../descendant-selector "Permalink to Descendant Selector (“ancestor descendant”)")
====================================================================================================================================

  Selects all elements that are descendants of a given ancestor.

     [Next Adjacent Selector (“prev + next”)](../../next-adjacent-selector "Permalink to Next Adjacent Selector (“prev + next”)")
=============================================================================================================================

  Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

     [Next Siblings Selector (“prev ~ siblings”)](../../next-siblings-selector "Permalink to 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 jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/hierarchy-selectors>

.children()
===========

   .children( [selector ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------

  **Description:** Get the children of each element in the set of matched elements, optionally filtered by a selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.children( [selector ] )](#children-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a jQuery object that represents a set of DOM elements, the `.children()` method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The `.children()` method differs from `[.find()](find)` in that `.children()` only travels a single level down the DOM tree while `.find()` can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, `.children()` does not return text nodes; to get *all* children including text and comment nodes, use `[.contents()](contents)`.

 The `.children()` method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

 Consider a page with a basic nested list on it:

 
```
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
```
 If we begin at the level-2 list, we can find its children:

 
```
$( "ul.level-2" ).children().css( "background-color", "red" );
```
 The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.

  Examples:
---------


 Find all children of the clicked element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
  body {
    font-size: 16px;
    font-weight: bolder;
  }
  div {
    width: 130px;
    height: 82px;
    margin: 10px;
    float: left;
    border: 1px solid blue;
    padding: 4px;
  }
  #container {
    width: auto;
    height: 105px;
    margin: 0;
    float: none;
    border: none;
  }
  .hilite {
    border-color: red;
  }
  #results {
    display: block;
    color: red;
  }
  p, span, em, a, b, button {
    border: 1px solid transparent;
  }
  p {
    margin: 10px;
  }
  span {
    color: blue;
  }
  input {
    width: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="container">
  <div>
    <p>This <span>is the <em>way</em> we</span>
      write <em>the</em> demo,</p>
  </div>
 
  <div>
    <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
    the</button> demo,
  </div>
 
  <div>
    This <span>the way we <em>write</em> the <em>demo</em> so</span>
    <input type="text" value="early"> in
  </div>
 
  <p>
    <span>t</span>he <span>m</span>orning.
    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
  </p>
</div>
 
<script>
$( "#container" ).click(function ( event ) {
  $( "*" ).removeClass( "hilite" );
  var kids = $( event.target ).children();
  var len = kids.addClass( "hilite" ).length;
 
  $( "#results span" ).first().text( len );
  $( "#results span" ).last().text( event.target.tagName );
 
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Find all children of each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
  body {
    font-size: 16px;
    font-weight: bolder;
  }
  span {
    color: blue;
  }
  p {
    margin: 5px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello (this is a paragraph)</p>
 
<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>
 
<div>And One Last <span>Time</span> (most text directly in a div)</div>
 
<script>
$( "div" ).children().css( "border-bottom", "3px double red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Find all children with a class "selected" of each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>children demo</title>
  <style>
  body {
    font-size: 16px;
    font-weight: bolder;
  }
  p {
    margin: 5px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>Hello</span>
  <p class="selected">Hello Again</p>
  <div class="selected">And Again</div>
  <p>And One Last Time</p>
</div>
 
<script>
$( "div" ).children( ".selected" ).css( "color", "blue" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/children>

Category: Data
==============

 
These methods allow us to associate arbitrary data with specific DOM elements.

    [.clearQueue()](../clearqueue "Permalink to .clearQueue()")
============================================================

  Remove from the queue all items that have not yet been run.

     [.data()](../data "Permalink to .data()")
==========================================

  Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

     [.dequeue()](../dequeue "Permalink to .dequeue()")
===================================================

  Execute the next function on the queue for the matched elements.

     [jQuery.data()](../jquery.data "Permalink to jQuery.data()")
=============================================================

  Store arbitrary data associated with the specified element and/or return the value that was set.

     [jQuery.dequeue()](../jquery.dequeue "Permalink to jQuery.dequeue()")
======================================================================

  Execute the next function on the queue for the matched element.

     [jQuery.hasData()](../jquery.hasdata "Permalink to jQuery.hasData()")
======================================================================

  Determine whether an element has any jQuery data associated with it.

     [jQuery.queue()](../jquery.queue "Permalink to jQuery.queue()")
================================================================

  Show or manipulate the queue of functions to be executed on the matched element.

     [jQuery.removeData()](../jquery.removedata "Permalink to jQuery.removeData()")
===============================================================================

  Remove a previously-stored piece of data.

     [.queue()](../queue "Permalink to .queue()")
=============================================

  Show or manipulate the queue of functions to be executed on the matched elements.

     [.removeData()](../removedata "Permalink to .removeData()")
============================================================

  Remove a previously-stored piece of data.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/data>

.clearQueue()
=============

   .clearQueue( [queueName ] )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------

  **Description:** Remove from the queue all items that have not yet been run.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.clearQueue( [queueName ] )](#clearQueue-queueName)


	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.

  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. 

  Example:
--------


 Empty the queue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clearQueue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
 
<script>
$( "#start" ).click(function() {
  var myDiv = $( "div" );
  myDiv.show( "slow" );
  myDiv.animate({
    left:"+=200"
  }, 5000 );
 
  myDiv.queue(function() {
    var that = $( this );
    that.addClass( "newcolor" );
    that.dequeue();
  });
 
  myDiv.animate({
    left:"-=200"
  }, 1500 );
  myDiv.queue(function() {
    var that = $( this );
    that.removeClass( "newcolor" );
    that.dequeue();
  });
  myDiv.slideUp();
});
 
$( "#stop" ).click(function() {
  var myDiv = $( "div" );
  myDiv.clearQueue();
  myDiv.stop();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/clearQueue>

Category: Mouse Events
======================

   [.click()](../../click "Permalink to .click()")
================================================

  Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

     [.contextmenu()](../../contextmenu "Permalink to .contextmenu()")
==================================================================

  Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

     [.dblclick()](../../dblclick "Permalink to .dblclick()")
=========================================================

  Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

     [.hover()](../../hover "Permalink to .hover()")
================================================

  Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

     [.mousedown()](../../mousedown "Permalink to .mousedown()")
============================================================

  Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.

     [.mouseenter()](../../mouseenter "Permalink to .mouseenter()")
===============================================================

  Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

     [.mouseleave()](../../mouseleave "Permalink to .mouseleave()")
===============================================================

  Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

     [.mousemove()](../../mousemove "Permalink to .mousemove()")
============================================================

  Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

     [.mouseout()](../../mouseout "Permalink to .mouseout()")
=========================================================

  Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

     [.mouseover()](../../mouseover "Permalink to .mouseover()")
============================================================

  Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

     [.mouseup()](../../mouseup "Permalink to .mouseup()")
======================================================

  Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.

     [.toggle()](../../toggle-event "Permalink to .toggle()")
=========================================================

  Bind two or more handlers to the matched elements, to be executed on alternate clicks.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/mouse-events>

[.clone()](../../clone "Permalink to .clone()")
================================================

  Create a deep copy of the set of matched elements.

 

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/copying>

Class Selector (“.class”)
=========================

  class selector
--------------

  **Description:** Selects all elements with the given class. 

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ".class" )

 **class:** A class to search for. An element can have multiple classes; only one of them must match.

  For class selectors, jQuery uses JavaScript's native `getElementsByClassName()` function if the browser supports it.

  Examples:
---------


 Finds the element with the class "myClass".

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
 
<script>
$( ".myClass" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Finds the element with both "myclass" and "otherclass" classes.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="myclass">div class="notMe"</div>
<div class="myclass otherclass">div class="myClass"</div>
<span class="myclass otherclass">span class="myClass"</span>
 
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/class-selector>

:contains() Selector
====================

  contains selector
-----------------

  **Description:** Select all elements that contain the specified text.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)jQuery( ":contains(text)" )

 **text:** A string of text to look for. It's case sensitive.

  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 a bare word or surrounded by quotation marks. The text must have matching case to be selected.

  Example:
--------


 Finds all divs containing "John" and underlines them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
 
<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/contains-selector>

.clone()
========

   .clone( [withDataAndEvents ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------

  **Description:** Create a deep copy of the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.clone( [withDataAndEvents ] )](#clone-withDataAndEvents)


	+ **withDataAndEvents** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.
* ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )](#clone-withDataAndEvents-deepWithDataAndEvents)


	+ **withDataAndEvents** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is `false`. *\*In jQuery 1.5.0 the default value was incorrectly `true`; it was changed back to `false` in 1.5.1 and up.*
	+ **deepWithDataAndEvents** (default: `value of withDataAndEvents`) Type: [Boolean](types#Boolean)  A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to `false`).

  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.

  **Note:** For performance reasons, the dynamic state of certain form elements (e.g., user data typed into `textarea` and user selections made to a `select`) is not copied to the cloned elements. When cloning `input` elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.

  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:

 
```
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
```
 As shown in the discussion for `[.append()](append)`, normally when an element is inserted somewhere in the DOM, it is moved from its old location. So, given the code:

 
```
$( ".hello" ).appendTo( ".goodbye" );
```
 The resulting DOM structure would be:

 
```
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
```
 To prevent this and instead create a copy of the element, you could write the following:

 
```
$( ".hello" ).clone().appendTo( ".goodbye" );
```
 This would produce:

 
```
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
```
  **Note:** When using the `.clone()` method, you can modify the cloned elements or their contents before (re-)inserting them into the document.

  Normally, any event handlers bound to the original element are *not* copied to the clone. The optional `withDataAndEvents` parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the `.data()` method) is also copied to the new copy. 

 However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:

 
```
// Original element with attached data
var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
    $clone = $elem.clone( true )
      // Deep copy to prevent data sharing
      .data( "arr", $.extend( [], $elem.data( "arr" ) ) );
```
 As of jQuery 1.5, `withDataAndEvents` can be optionally enhanced with `deepWithDataAndEvents`  to copy the events and data for all children of the cloned element.

  **Note:** Using `.clone()` has the side-effect of producing elements with duplicate `id` attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using `class` attributes as identifiers instead.

   Example:
--------


 Clones all b elements (and selects the clones) and prepends them to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/clone>

.context
========

   contextReturns: [Element](types#Element)version deprecated: [1.10](https://api.jquery.com/category/version/1.10/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** The DOM node context originally passed to `jQuery()`; if none was passed then context will likely be the document.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)context

   Note: This API has been removed in jQuery 3.0.

  The `.live()` method for binding event handlers uses this property to determine the root element to use for its event delegation needs.

 The value of this property is typically equal to `document`, as this is the default context for jQuery objects if none is supplied. The context may differ if, for example, the object was created by searching within an `<iframe>` or XML document.

 Note that the context property may only apply to the elements originally selected by `jQuery()`, as it is possible for the user to add elements to the collection via methods such as `.add()` and these may have a different context.

  Example:
--------


 Determine the exact context used.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/context>

.css()
======

  Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element. #### Contents:

 * [.css( propertyName )](#css1)
	+ [.css( propertyName )](#css-propertyName)
	+ [.css( propertyNames )](#css-propertyNames)
* [.css( propertyName, value )](#css2)
	+ [.css( propertyName, value )](#css-propertyName-value)
	+ [.css( propertyName, function )](#css-propertyName-function)
	+ [.css( properties )](#css-properties)

 
 .css( propertyName )Returns: [String](types#String)
----------------------------------------------------

  **Description:** Get the computed style properties for the first element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.css( propertyName )](#css-propertyName)


	+ **propertyName** Type: [String](types#String)  A CSS property.
* ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)[.css( propertyNames )](#css-propertyNames)


	+ **propertyNames** Type: [Array](types#Array)  An array of one or more CSS properties.

  The `.css()` method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the `getComputedStyle()` method in standards-based browsers versus the `currentStyle` and `runtimeStyle` properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the `float` property as `styleFloat`, while W3C standards-compliant browsers refer to it as `cssFloat`. For consistency, you can simply use `"float"`, and jQuery will translate it to the correct value for each browser.

 Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both `.css( "background-color" )` and `.css( "backgroundColor" )`. This means mixed case has a special meaning, `.css( "WiDtH" )` won't do the same as `.css( "width" )`, for example.

 Note that the *computed style* of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

 Retrieval of shorthand CSS properties (e.g., `margin`, `background`, `border`), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered `border-width`, use: `$( elem ).css( "borderTopWidth" )`, `$( elem ).css( "borderBottomWidth" )`, and so on.

 An element should be connected to the DOM when calling `.css()` on it. If it isn't, jQuery may throw an error.

 **As of jQuery 1.9**, passing an array of style properties to `.css()` will result in an object of property-value pairs. For example, to retrieve all four rendered `border-width` values, you could use `$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])`. 

 **As of jQuery 3.2**, [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (also called CSS Variables) are supported: `$( "p" ).css( "--custom-property" )`. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.

  Examples:
---------


 Get the background color of a clicked div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
 
<script>
$( "div" ).click(function() {
  var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Get the width, height, text color, and background color of a clicked div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    height: 50px;
    margin: 5px;
    padding: 5px;
    float: left;
  }
  #box1 {
    width: 50px;
    color: yellow;
    background-color: blue;
  }
  #box2 {
    width: 80px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 99, 30);
  }
  #box3 {
    width: 40px;
    color: #fcc;
    background-color: #123456;
  }
  #box4 {
    width: 70px;
    background-color: #f11;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
 
<script>
$( "div" ).click(function() {
  var html = [ "The clicked div has the following styles:" ];
 
  var styleProps = $( this ).css([
    "width", "height", "color", "background-color"
  ]);
  $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value );
  });
 
  $( "#result" ).html( html.join( "<br>" ) );
});
</script>
 
</body>
</html>
```
 #### Demo:

   .css( propertyName, value )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------

  **Description:** Set one or more CSS properties for the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.css( propertyName, value )](#css-propertyName-value)


	+ **propertyName** Type: [String](types#String)  A CSS property name.
	+ **value** Type: [String](types#String) or [Number](types#Number)  A value to set for the property.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.css( propertyName, function )](#css-propertyName-function)


	+ **propertyName** Type: [String](types#String)  A CSS property name.
	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) value ) => [String](types#String) or [Number](types#Number)  A function returning the value to set. `this` is the current element. Receives the index position of the element in the set and the old value as arguments.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.css( properties )](#css-properties)


	+ **properties** Type: [PlainObject](types#PlainObject)  An object of property-value pairs to set.

  As with the `.prop()` method, the `.css()` method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.

 Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both `.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })` and `.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })`. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

 When a number is passed as the value, jQuery will convert it to a string and add `px` to the end of that string. If the property requires units other than `px`, convert the value to a string and add the appropriate units before calling the method.

 When using `.css()` as a setter, jQuery modifies the element's `style` property. For example, `$( "#mydiv" ).css( "color", "green" )` is equivalent to `document.getElementById( "mydiv" ).style.color = "green"`. Setting the value of a style property to an empty string — e.g. `$( "#mydiv" ).css( "color", "" )` — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's `.css()` method, or through direct DOM manipulation of the `style` property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or `<style>` element. **Warning:** one notable exception is that, for IE 8 and below, removing a shorthand property such as `border` or `background` will remove that style entirely from the element, regardless of what is set in a stylesheet or `<style>` element.

 **Note:** `.css()` ignores `!important` declarations. So, the statement `$( "p" ).css( "color", "red !important" )` does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

 As of jQuery 1.8, the `.css()` setter will automatically take care of prefixing the property name. For example, take `.css( "user-select", "none" )` in Chrome/Safari will set it as `-webkit-user-select`, Firefox will use `-moz-user-select`, and IE10 will use `-ms-user-select`.

 As of jQuery 1.6, `.css()` accepts relative values similar to `.animate()`. Relative values are a string starting with `+=` or `-=` to increment or decrement the current value. For example, if an element's padding-left was 10px, `.css( "padding-left", "+=15" )` would result in a total padding-left of 25px.

 As of jQuery 1.4, `.css()` allows us to pass a function as the property value:

 
```
$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});
```
 This example sets the widths of the matched elements to incrementally larger values.

 **Note:** If nothing is returned in the setter function (ie. `function( index, style ){} )`, or if `undefined` is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

 **As of jQuery 3.2**, [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (also called CSS Variables) are supported: `$( "p" ).css( "--custom-property", "value" )`. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.

  Examples:
---------


 Change the color of any paragraph to red on mouseover event.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: blue;
    width: 200px;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p>Just roll the mouse over me.</p>
 
  <p>Or me to see a color change.</p>
 
<script>
$( "p" ).on( "mouseover", function() {
  $( this ).css( "color", "red" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Increase the width of #box by 200 pixels the first time it is clicked.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  #box {
    background: black;
    color: snow;
    width: 100px;
    padding: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="box">Click me to grow</div>
 
<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Highlight a clicked word in the paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: blue;
    font-weight: bold;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  Once upon a time there was a man
  who lived in a pizza parlor. This
  man just loved pizza and ate it all
  the time.  He went on to be the
  happiest man in the world.  The end.
</p>
 
<script>
var words = $( "p" ).first().text().split( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
  $( this ).css( "background-color", "yellow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Change the font weight and background color on mouseenter and mouseleave.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  p {
    color: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
 
<script>
$( "p" )
  .on( "mouseenter", function() {
    $( this ).css({
      "background-color": "yellow",
      "font-weight": "bolder"
    });
  })
  .on( "mouseleave", function() {
    var styles = {
      backgroundColor : "#ddd",
      fontWeight: ""
    };
    $( this ).css( styles );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   Increase the size of a div when you click it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    width: 20px;
    height: 15px;
    background-color: #f33;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>click</div>
<div>click</div>
 
<script>
$( "div" ).on( "click", function() {
  $( this ).css({
    width: function( index, value ) {
      return parseFloat( value ) * 1.2;
    },
    height: function( index, value ) {
      return parseFloat( value ) * 1.2;
    }
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/css>

Category: Content Filter
========================

   [:contains() Selector](../../contains-selector "Permalink to :contains() Selector")
====================================================================================

  Select all elements that contain the specified text.

     [:empty Selector](../../empty-selector "Permalink to :empty Selector")
=======================================================================

  Select all elements that have no children (including text nodes).

     [:has() Selector](../../has-selector "Permalink to :has() Selector")
=====================================================================

  Selects elements which contain at least one element that matches the specified selector.

     [:parent Selector](../../parent-selector "Permalink to :parent Selector")
==========================================================================

  Select all elements that have at least one child node (either an element or text).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/content-filter-selector>

.contents()
===========

   .contents()Returns: [jQuery](types#jQuery)
-------------------------------------------

  **Description:** Get the children of each element in the set of matched elements, including text and comment nodes.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.contents()](#contents)


	+ This method does not accept any arguments.

  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 and comment nodes as well as HTML elements in the resulting jQuery object. Please note that most jQuery operations don't support text nodes and comment nodes. The few that do will have an explicit note on their API documentation page.

 The `.contents()` method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

 **As of jQuery 3.2**, `.contents()` returns contents of `<template>` elements as well.

 Consider a simple `<div>` with a number of text nodes, each of which is separated by two line break elements (`<br>`):

 
```
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <br><br>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  <br><br>
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.
</div>
```
 We can employ the `.contents()` method to help convert this blob of text into three well-formed paragraphs:

 
```
$( ".container" )
  .contents()
    .filter(function() {
      return this.nodeType === 3;
    })
      .wrap( "<p></p>" )
      .end()
    .filter( "br" )
    .remove();
```
 This code first retrieves the contents of `<div class="container">` and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the [`.nodeType` property](https://developer.mozilla.org/docs/en/DOM/Node.nodeType) of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for `<br />` elements, and these elements are removed.

  Examples:
---------


 Find all the text nodes inside a paragraph and wrap them with a bold tag.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello <a href="https://johnresig.com/">John</a>, how are you doing?</p>
 
<script>
$( "p" )
  .contents()
  .filter(function(){
    return this.nodeType !== 1;
  })
  .wrap( "<b></b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Change the background color of links inside of an iframe.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<iframe src="https://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
 
<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/contents>

Category: Properties
====================

   [.context](../context "Permalink to .context")
===============================================

  The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

     [.jquery](../jquery-2 "Permalink to .jquery")
==============================================

  A string containing the jQuery version number.

     [jQuery.browser](../jquery.browser "Permalink to jQuery.browser")
==================================================================

  Contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

     [jQuery.fx.interval](../jquery.fx.interval "Permalink to jQuery.fx.interval")
==============================================================================

  The rate (in milliseconds) at which animations fire.

     [jQuery.fx.off](../jquery.fx.off "Permalink to jQuery.fx.off")
===============================================================

  Globally disable all animations.

     [jQuery.holdReady()](../jquery.holdready "Permalink to jQuery.holdReady()")
============================================================================

  Holds or releases the execution of jQuery’s ready event.

     [jQuery.ready](../jquery.ready "Permalink to jQuery.ready")
============================================================

  A Promise-like object (or “thenable”) that resolves when the document is ready.

     [jQuery.support](../jquery.support "Permalink to jQuery.support")
==================================================================

  A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery’s internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project’s feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

     [.length](../length "Permalink to .length")
============================================

  The number of elements in the jQuery object.

     [.selector](../selector "Permalink to .selector")
==================================================

  A selector representing selector passed to jQuery(), if any, when creating the original set.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/properties>

Category: Properties of jQuery Object Instances
===============================================

 
Each jQuery object created with the jQuery() function contains a number of properties alongside its methods. These properties allow us to inspect various attributes of the object.

    [.context](../../context "Permalink to .context")
==================================================

  The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

     [.jquery](../../jquery-2 "Permalink to .jquery")
=================================================

  A string containing the jQuery version number.

     [.length](../../length "Permalink to .length")
===============================================

  The number of elements in the jQuery object.

     [.selector](../../selector "Permalink to .selector")
=====================================================

  A selector representing selector passed to jQuery(), if any, when creating the original set.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/properties/jquery-object-instance-properties>

Category: Internals
===================

 
Although this category is referred to as 'internal', any methods documented within the API site should be considered public and may be freely used.

    [.context](../context "Permalink to .context")
===============================================

  The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.

     [.jquery](../jquery-2 "Permalink to .jquery")
==============================================

  A string containing the jQuery version number.

     [jQuery.error()](../jquery.error "Permalink to jQuery.error()")
================================================================

  Takes a string and throws an exception containing it.

     [.pushStack()](../pushstack "Permalink to .pushStack()")
=========================================================

  Add a collection of DOM elements onto the jQuery stack.

     [.selector](../selector "Permalink to .selector")
==================================================

  A selector representing selector passed to jQuery(), if any, when creating the original set.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/internals>

.contextmenu()
==============

   .contextmenu( handler )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Bind an event handler to the "contextmenu" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.contextmenu( handler )](#contextmenu-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.contextmenu( [eventData ], handler )](#contextmenu-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.contextmenu()](#contextmenu)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "contextmenu", handler )` in the first two variations, and `.trigger( "contextmenu" )` in the third. The `contextmenu` event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed. In case the context menu key is pressed, the event is triggered on the `html` element or the currently focused element. Any HTML element can receive this event. For example, consider the HTML:

 
```
<div id="target">
  Right-click here
</div>
```
 The event handler can be bound to the `<div>` as follows:

 
```
$( "#target" ).contextmenu(function() {
  alert( "Handler for .contextmenu() called." );
});
```
 Now right-clicking on this element displays the alert:

  `Handler for .contextmenu() called.` 

 To trigger the event manually, call `.contextmenu()` without an argument:

 
```
$( "#target" ).contextmenu();
```
  ### Additional Notes:

 * As the `.contextmenu()` method is just a shorthand for `.on( "contextmenu", handler )`, detaching is possible using `.off( "contextmenu" )`.
 Examples:
---------


 To show a "Hello World!" alert box when the contextmenu event is triggered on a paragraph on the page:

 
```
$( "p" ).contextmenu(function() {
  alert( "Hello World!" );
});
```
   Right click to toggle background color.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contextmenu demo</title>
  <style>
  div {
    background: blue;
    color: white;
    height: 100px;
    width: 150px;
 }
  div.contextmenu {
    background: yellow;
    color: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<span>Right click the block</span>
 
<script>
var div = $( "div" ).first();
div.contextmenu(function() {
  div.toggleClass( "contextmenu" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/contextmenu>

.data()
=======

  Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. #### Contents:

 * [.data( key, value )](#data1)
	+ [.data( key, value )](#data-key-value)
	+ [.data( obj )](#data-obj)
* [.data( key )](#data2)
	+ [.data( key )](#data-key)
	+ [.data()](#data)

 
 .data( key, value )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Store arbitrary data associated with the matched elements.

 * ####  version added: [1.2.3](https://api.jquery.com/category/version/1.2.3/)[.data( key, value )](#data-key-value)


	+ **key** Type: [String](types#String)  A string naming the piece of data to set.
	+ **value** Type: [Anything](types#Anything)  The new data value; this can be any Javascript type except `undefined`.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.data( obj )](#data-obj)


	+ **obj** Type: [Object](types#Object)  An object of key-value pairs of data to update.

  The `.data()` method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

 We can set several distinct values for a single element and retrieve them later:

 
```
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }
```
 Using the `data()` method to update data does not affect attributes in the DOM. To set a `data-*` attribute value, use `<attr>`.

 Prior to jQuery 1.4.3, `.data( obj )` completely replaced all data. Since jQuery 1.4.3, data is instead extended by shallow merge.

 Since **jQuery 3**, every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the [HTML dataset API](https://html.spec.whatwg.org/multipage/dom.html#dom-dataset). A statement like `$( "body" ).data( { "my-name": "aValue" } ).data();` will return `{ myName: "aValue" }`.

 Due to the way browsers interact with plugins and external code, the `.data()` method cannot be used on `<object>` (unless it's a Flash plugin), `<applet>` or `<embed>` elements.

  ### Additional Notes:

 * Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
* `undefined` is not recognized as a data value. Calls such as `.data( "name", undefined )` will return the jQuery object that it was called on, allowing for chaining.
 Example:
--------


 Store then retrieve a value from the div element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>
```
 #### Demo:

   .data( key )Returns: [Object](types#Object)
--------------------------------------------

  **Description:** Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 `data-*` attribute.

 * ####  version added: [1.2.3](https://api.jquery.com/category/version/1.2.3/)[.data( key )](#data-key)


	+ **key** Type: [String](types#String)  Name of the data stored.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.data()](#data)


	+ This signature does not accept any arguments.

  The `.data()` method allows us to read data previously associated with DOM elements. We can retrieve several distinct values for a single element one at a time, or as a set:

 
```
var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
 
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }
```
 Calling `.data()` with no parameters returns a JavaScript object containing each stored value as a property. The object can be used directly to get data values (but note that property names originally containing dashes will have been modified as described below).

 Since **jQuery 3**, every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key is replaced by the uppercase version of the letter, in alignment with the [HTML dataset API](https://html.spec.whatwg.org/multipage/dom.html#dom-dataset). A statement like `$( "body" ).data( { "my-name": "aValue" } ).data();` will return `{ myName: "aValue" }`.

 ####  [HTML5 `data-*` Attributes](#data-html5)

 Since jQuery 1.4.3, [`data-*` attributes](https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes) are used to initialize jQuery data. An element's `data-*` attributes are retrieved the first time the `data()` method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery).

 Every attempt is made to convert the attribute's string value to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A string is only converted to a number if doing so doesn't change its representation (for example, the string "100" is converted to the number 100, but "1E02" and "100.000" are left as strings because their numeric value of 100 serializes to "100"). When a string starts with '{' or '[', then `jQuery.parseJSON` is used to parse it; it must follow [valid JSON syntax](https://en.wikipedia.org/wiki/JSON#Data_types.2C_syntax_and_example) *including quoted property names*. A string not parseable as a JavaScript value is not converted.

 To retrieve a `data-*` attribute value as an unconverted string, use the `[attr()](attr)` method.

 Since jQuery 1.6, dashes in `data-*` attribute names have been processed in alignment with the [HTML dataset API](https://html.spec.whatwg.org/multipage/dom.html#dom-dataset).

 For example, given the following HTML:

 
```
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
```
 The following comparisons are all true:

 
```
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
```
  ### Additional Notes:

 * Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
 Example:
--------


 Get the data named "blah" stored at for an element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    margin: 5px;
    background: yellow;
  }
  button {
    margin: 5px;
    font-size: 14px;
  }
  p {
    margin: 5px;
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
 
<script>
$( "button" ).click(function() {
  var value;
 
  switch ( $( "button" ).index( this ) ) {
    case 0 :
      value = $( "div" ).data( "blah" );
      break;
    case 1 :
      $( "div" ).data( "blah", "hello" );
      value = "Stored!";
      break;
    case 2 :
      $( "div" ).data( "blah", 86 );
      value = "Stored!";
      break;
    case 3 :
      $( "div" ).removeData( "blah" );
      value = "Removed!";
      break;
  }
 
  $( "span" ).text( "" + value );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/data>

Category: Style Properties
==========================

 
These methods get and set CSS-related properties of elements.

    [.css()](../../css "Permalink to .css()")
==========================================

  Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

     [.height()](../../height "Permalink to .height()")
===================================================

  Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

     [.innerHeight()](../../innerheight "Permalink to .innerHeight()")
==================================================================

  Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

     [.innerWidth()](../../innerwidth "Permalink to .innerWidth()")
===============================================================

  Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

     [jQuery.cssNumber](../../jquery.cssnumber "Permalink to jQuery.cssNumber")
===========================================================================

  An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

     [.offset()](../../offset "Permalink to .offset()")
===================================================

  Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

     [.outerHeight()](../../outerheight "Permalink to .outerHeight()")
==================================================================

  Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

     [.outerWidth()](../../outerwidth "Permalink to .outerWidth()")
===============================================================

  Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

     [.position()](../../position "Permalink to .position()")
=========================================================

  Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

     [.scrollLeft()](../../scrollleft "Permalink to .scrollLeft()")
===============================================================

  Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

     [.scrollTop()](../../scrolltop "Permalink to .scrollTop()")
============================================================

  Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

     [.width()](../../width "Permalink to .width()")
================================================

  Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/style-properties>

.closest()
==========

   #### Contents:

 * [.closest( selector )](#closest1)
	+ [.closest( selector )](#closest-selector)
	+ [.closest( selector [, context ] )](#closest-selector-context)
	+ [.closest( selection )](#closest-selection)
	+ [.closest( element )](#closest-element)
* [.closest( selectors [, context ] )](#closest2)
	+ [.closest( selectors [, context ] )](#closest-selectors-context)

 
 .closest( selector )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.closest( selector )](#closest-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.closest( selector [, context ] )](#closest-selector-context)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
	+ **context** Type: [Element](types#Element)  A DOM element within which a matching element may be found.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.closest( selection )](#closest-selection)


	+ **selection** Type: [jQuery](types#jQuery)  A jQuery object to match elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.closest( element )](#closest-element)


	+ **element** Type: [Element](types#Element)  An element to match elements against.

  Given a jQuery object that represents a set of DOM elements, the `.closest()` method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. The [`.parents()`](parents) and `.closest()` methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:

 

| `.closest()` |  [`.parents()`](parents)  |
| --- | --- |
| Begins with the current element | Begins with the parent element |
| Travels up the DOM tree until it finds a match for the supplied selector | Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied  |
| The returned jQuery object contains zero or one element for each element in the original set, in document order | The returned jQuery object contains zero or more elements for each element in the original set, in reverse document order |

 
```
<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
```
 Suppose we perform a search for `<ul>` elements starting at item A:

 
```
$( "li.item-a" )
  .closest( "ul" )
  .css( "background-color", "red" );
```
 This will change the color of the level-2 `<ul>`, since it is the first encountered when traveling up the DOM tree.

 Suppose we search for an `<li>` element instead:

 
```
$( "li.item-a" )
  .closest( "li" )
  .css( "background-color", "red" );
```
 This will change the color of list item A. The `.closest()` method begins its search *with the element itself* before progressing up the DOM tree, and stops when item A matches the selector.

 We can pass in a DOM element as the context within which to search for the closest element.

 
```
var listItemII = document.getElementById( "ii" );
$( "li.item-a" )
  .closest( "ul", listItemII )
  .css( "background-color", "red" );
$( "li.item-a" )
  .closest( "#one", listItemII )
  .css( "background-color", "green" );
```
 This will change the color of the level-2 `<ul>`, because it is both the first `<ul>` ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 `<ul>`, however, because it is not a descendant of list item II.

  Examples:
---------


 Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
</ul>
 
<script>
$( document ).on( "click", function( event ) {
  $( event.target ).closest( "li" ).toggleClass( "highlight" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
</ul>
 
<script>
var listElements = $( "li" ).css( "color", "blue" );
$( document ).on( "click", function( event ) {
  $( event.target ).closest( listElements ).toggleClass( "highlight" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   .closest( selectors [, context ] )Returns: [Array](types#Array)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.8](https://api.jquery.com/category/version/1.8/)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Get an array of all the elements and selectors matched against the current element up through the DOM tree.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.closest( selectors [, context ] )](#closest-selectors-context)


	+ **selectors** Type: [Array](types#Array)  An array or string containing a selector expression to match elements against (can also be a jQuery object).
	+ **context** Type: [Element](types#Element)  A DOM element within which a matching element may be found.

   **This signature (only!) is deprecated as of jQuery 1.7 and *removed* in jQuery 1.8**. It was primarily meant to be used internally or by plugin authors.   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/closest>

Category: Data Storage
======================

 
These methods allow us to associate arbitrary data with specific DOM elements.

    [.data()](../../data "Permalink to .data()")
=============================================

  Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

     [.removeData()](../../removedata "Permalink to .removeData()")
===============================================================

  Remove a previously-stored piece of data.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/miscellaneous/data-storage>

Category: Miscellaneous
=======================

   [.data()](../data "Permalink to .data()")
==========================================

  Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

     [.each()](../each "Permalink to .each()")
==========================================

  Iterate over a jQuery object, executing a function for each matched element.

     [.get()](../get "Permalink to .get()")
=======================================

  Retrieve the DOM elements matched by the jQuery object.

     [.index()](https://api.jquery.com/index/ "Permalink to .index()")
==================================================================

  Search for a given element from among the matched elements.

     [jQuery.noConflict()](../jquery.noconflict "Permalink to jQuery.noConflict()")
===============================================================================

  Relinquish jQuery’s control of the $ variable.

     [jQuery.param()](../jquery.param "Permalink to jQuery.param()")
================================================================

  Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

     [.removeData()](../removedata "Permalink to .removeData()")
============================================================

  Remove a previously-stored piece of data.

     [.size()](../size "Permalink to .size()")
==========================================

  Return the number of elements in the jQuery object.

     [.toArray()](../toarray "Permalink to .toArray()")
===================================================

  Retrieve all the elements contained in the jQuery set, as an array.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/miscellaneous>

deferred.resolve()
==================

   deferred.resolve( [args ] )Returns: [Deferred](types#Deferred)
---------------------------------------------------------------

  **Description:**  Resolve a Deferred object and call any doneCallbacks with the given `args`. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.resolve( [args ] )](#deferred-resolve-args)


	+ **args** Type: [Anything](types#Anything)   Optional arguments that are passed to the doneCallbacks.

  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()`](deferred.promise).

 When the Deferred is resolved, any doneCallbacks added by [`deferred.then()`](deferred.then) or [`deferred.done()`](deferred.done) are called. Callbacks are executed in the order they were added. Each callback is passed the `args` from the `deferred.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 `deferred.resolve()` call. For more information, see the documentation for [jQuery.Deferred()](jquery.deferred).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.resolve>

deferred.catch()
================

   deferred.catch( failFilter )Returns: [Promise](types#Promise)
--------------------------------------------------------------

  **Description:** Add handlers to be called when the Deferred object is rejected. 

 * ####  version added: [3.0](https://api.jquery.com/category/version/3.0/)[deferred.catch( failFilter )](#deferred-catch-failFilter)


	+ **failFilter** Type: [Function](types#Function)()  A function that is called when the Deferred is rejected.

  `deferred.catch( fn )` is an alias to [`deferred.then( null, fn )`](deferred.then). Read its page for more information.

  Example:
--------


 Since the [`jQuery.get`](jquery.get) method returns a jqXHR object, which is derived from a Deferred object, we can add rejection handlers using the `.catch` method.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.catch>

.dblclick()
===========

   .dblclick( handler )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.dblclick( handler )](#dblclick-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.dblclick( [eventData ], handler )](#dblclick-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.dblclick()](#dblclick)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "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:

 
```
<div id="target">
  Double-click here
</div>
<div id="other">
  Trigger the handler
</div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any `<div>`:

 
```
$( "#target" ).dblclick(function() {
  alert( "Handler for .dblclick() called." );
});
```
 Now double-clicking on this element displays the alert:

  `Handler for .dblclick() called.` 

 To trigger the event manually, call `.dblclick()` without an argument:

 
```
$( "#other" ).click(function() {
  $( "#target" ).dblclick();
});
```
 After this code executes, (single) clicks on `Trigger the handler` will also alert the message.

 The `dblclick` event is only triggered after this exact series of events:

 * The mouse button is depressed while the pointer is inside the element.
* The mouse button is released while the pointer is inside the element.
* The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.
* The mouse button is released while the pointer is inside the element.

 It is inadvisable to bind handlers to both the `click` and `dblclick` events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two `click` events before the `dblclick` and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable. 

  ### Additional Notes:

 * As the `.dblclick()` method is just a shorthand for `.on( "dblclick", handler )`, detaching is possible using `.off( "dblclick" )`.
 Examples:
---------


 To bind a "Hello World!" alert box to the dblclick event on every paragraph on the page:

 
```
$( "p" ).dblclick(function() {
  alert( "Hello World!" );
});
```
   Double click to toggle background color.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dblclick demo</title>
  <style>
  div {
    background: blue;
    color: white;
    height: 100px;
    width: 150px;
 }
  div.dbl {
    background: yellow;
    color: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<span>Double click the block</span>
 
<script>
var divdbl = $( "div" ).first();
divdbl.dblclick(function() {
  divdbl.toggleClass( "dbl" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/dblclick>

Category: Deferred Object
=========================

 
The Deferred object, introduced in jQuery 1.5, is a chainable utility object created by calling the [`jQuery.Deferred()`](../jquery.deferred) method. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

 The Deferred object is chainable, similar to the way a jQuery object is chainable, but it has its own methods. After creating a Deferred object, you can use any of the methods below by either chaining directly from the object creation or saving the object in a variable and invoking one or more methods on that variable.

    [deferred.always()](../deferred.always "Permalink to deferred.always()")
=========================================================================

  Add handlers to be called when the Deferred object is either resolved or rejected.

     [deferred.catch()](../deferred.catch "Permalink to deferred.catch()")
======================================================================

  Add handlers to be called when the Deferred object is rejected.

     [deferred.done()](../deferred.done "Permalink to deferred.done()")
===================================================================

  Add handlers to be called when the Deferred object is resolved.

     [deferred.fail()](../deferred.fail "Permalink to deferred.fail()")
===================================================================

  Add handlers to be called when the Deferred object is rejected.

     [deferred.isRejected()](../deferred.isrejected "Permalink to deferred.isRejected()")
=====================================================================================

  Determine whether a Deferred object has been rejected.

     [deferred.isResolved()](../deferred.isresolved "Permalink to deferred.isResolved()")
=====================================================================================

  Determine whether a Deferred object has been resolved.

     [deferred.notify()](../deferred.notify "Permalink to deferred.notify()")
=========================================================================

  Call the progressCallbacks on a Deferred object with the given args.

     [deferred.notifyWith()](../deferred.notifywith "Permalink to deferred.notifyWith()")
=====================================================================================

  Call the progressCallbacks on a Deferred object with the given context and args.

     [deferred.pipe()](../deferred.pipe "Permalink to deferred.pipe()")
===================================================================

  Utility method to filter and/or chain Deferreds.

     [deferred.progress()](../deferred.progress "Permalink to deferred.progress()")
===============================================================================

  Add handlers to be called when the Deferred object generates progress notifications.

     [deferred.promise()](../deferred.promise "Permalink to deferred.promise()")
============================================================================

  Return a Deferred’s Promise object.

     [deferred.reject()](../deferred.reject "Permalink to deferred.reject()")
=========================================================================

  Reject a Deferred object and call any failCallbacks with the given args.

     [deferred.rejectWith()](../deferred.rejectwith "Permalink to deferred.rejectWith()")
=====================================================================================

  Reject a Deferred object and call any failCallbacks with the given context and args.

     [deferred.resolve()](../deferred.resolve "Permalink to deferred.resolve()")
============================================================================

  Resolve a Deferred object and call any doneCallbacks with the given args.

     [deferred.resolveWith()](../deferred.resolvewith "Permalink to deferred.resolveWith()")
========================================================================================

  Resolve a Deferred object and call any doneCallbacks with the given context and args.

     [deferred.state()](../deferred.state "Permalink to deferred.state()")
======================================================================

  Determine the current state of a Deferred object.

     [deferred.then()](../deferred.then "Permalink to deferred.then()")
===================================================================

  Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.

     [jQuery.Deferred()](../jquery.deferred "Permalink to jQuery.Deferred()")
=========================================================================

  A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

     [jQuery.when()](../jquery.when "Permalink to jQuery.when()")
=============================================================

  Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

     [.promise()](../promise "Permalink to .promise()")
===================================================

  Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/deferred-object>

deferred.always()
=================

   deferred.always( alwaysCallbacks [, alwaysCallbacks ] )Returns: [Deferred](types#Deferred)
-------------------------------------------------------------------------------------------

  **Description:**  Add handlers to be called when the Deferred object is either resolved or rejected. 

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[deferred.always( alwaysCallbacks [, alwaysCallbacks ] )](#deferred-always-alwaysCallbacks-alwaysCallbacks)


	+ **alwaysCallbacks** Type: [Function](types#Function)()  A function, or array of functions, that is called when the Deferred is resolved or rejected.
	+ **alwaysCallbacks** Type: [Function](types#Function)()  Optional additional functions, or arrays of functions, that are called when the Deferred is resolved or rejected.

  The argument can be either a single function or an array of functions. When the Deferred is resolved or rejected, the `alwaysCallbacks` are called. Since `deferred.always()` returns the Deferred object, other methods of the Deferred object can be chained to this one, including additional `.always()` methods. When the Deferred is resolved or rejected, callbacks are executed in the order they were added, using the arguments provided to the [`resolve`](deferred.resolve), [`reject`](deferred.reject), [`resolveWith`](deferred.resolvewith) or [`rejectWith`](deferred.rejectwith) method calls. For more information, see the documentation for [Deferred object](category/deferred-object).

 **Note:** The `deferred.always()` method receives the arguments that were used to `.resolve()` or `.reject()` the `Deferred` object, which are often very different. For this reason, it's best to use it only for actions that do not require inspecting the arguments. In all other cases, use explicit [`.done()`](deferred.done) or [`.fail()`](deferred.fail) handlers since the arguments will have well-known orders.

  Example:
--------


 Since the [`jQuery.get()`](jquery.get) method returns a `jqXHR` object, which is derived from a Deferred object, we can attach a callback for both success and error using the `deferred.always()` method.

 
```
$.get( "test.php" ).always(function() {
  alert( "$.get completed with success or error callback arguments" );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.always>

deferred.done()
===============

   deferred.done( doneCallbacks [, doneCallbacks ] )Returns: [Deferred](types#Deferred)
-------------------------------------------------------------------------------------

  **Description:**  Add handlers to be called when the Deferred object is resolved. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.done( doneCallbacks [, doneCallbacks ] )](#deferred-done-doneCallbacks-doneCallbacks)


	+ **doneCallbacks** Type: [Function](types#Function)()  A function, or array of functions, that are called when the Deferred is resolved.
	+ **doneCallbacks** Type: [Function](types#Function)()  Optional additional functions, or arrays of functions, that are called when the Deferred is resolved.

  The `deferred.done()` method accepts one or more arguments, all of which 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`](deferred.resolve) or [`resolveWith`](deferred.resolvewith) method call in the order they were added. For more information, see the documentation for [Deferred object](category/deferred-object).

  Examples:
---------


 Since the [`jQuery.get`](jquery.get) method returns a jqXHR object, which is derived from a Deferred object, we can attach a success callback using the `.done()` method.

 
```
$.get( "test.php" ).done(function() {
  alert( "$.get succeeded" );
});
```
   Resolve a Deferred object when the user clicks a button, triggering a number of callback functions:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.done demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Go</button>
<p>Ready...</p>
 
<script>
// 3 functions to call when the Deferred object is resolved
function fn1() {
  $( "p" ).append( " 1 " );
}
function fn2() {
  $( "p" ).append( " 2 " );
}
function fn3( n ) {
  $( "p" ).append( n + " 3 " + n );
}
 
// Create a deferred object
var dfd = $.Deferred();
 
// Add handlers to be called when dfd is resolved
dfd
// .done() can take any number of functions or arrays of functions
  .done( [ fn1, fn2 ], fn3, [ fn2, fn1 ] )
// We can chain done methods, too
  .done(function( n ) {
    $( "p" ).append( n + " we're done." );
  });
 
// Resolve the Deferred object when the button is clicked
$( "button" ).on( "click", function() {
  dfd.resolve( "and" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.done>

deferred.fail()
===============

   deferred.fail( failCallbacks [, failCallbacks ] )Returns: [Deferred](types#Deferred)
-------------------------------------------------------------------------------------

  **Description:**  Add handlers to be called when the Deferred object is rejected. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.fail( failCallbacks [, failCallbacks ] )](#deferred-fail-failCallbacks-failCallbacks)


	+ **failCallbacks** Type: [Function](types#Function)()  A function, or array of functions, that are called when the Deferred is rejected.
	+ **failCallbacks** Type: [Function](types#Function)()  Optional additional functions, or arrays of functions, that are called when the Deferred is rejected.

  The `deferred.fail()` method accepts one or more arguments, all of which 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()`](deferred.reject) or [`deferred.rejectWith()`](deferred.rejectwith) method call in the order they were added. For more information, see the documentation for [Deferred object](category/deferred-object).

  Example:
--------


 Since the [`jQuery.get`](jquery.get) method returns a jqXHR object, which is derived from a Deferred, you can attach a success and failure callback using the `deferred.done()` and `deferred.fail()` methods.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.fail>

deferred.isRejected()
=====================

   deferred.isRejected()Returns: [Boolean](types#Boolean)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.8](https://api.jquery.com/category/version/1.8/)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:**  Determine whether a Deferred object has been rejected. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.isRejected()](#deferred-isRejected)


	+ This method does not accept any arguments.

   Note: This API has been removed in jQuery 1.8; please use [`deferred.state()`](deferred.state) instead.

  Returns `true` if the Deferred object is in the rejected state, meaning that either [`deferred.reject()`](https://api.jquery.com/h/deferred.reject/) or [`deferred.rejectWith()`](deferred.rejectwith) has been called for the object and the failCallbacks have been called (or are in the process of being called).

 Note that a Deferred object can be in one of three states: pending, resolved, or rejected; use [`deferred.isResolved()`](deferred.isresolved) to determine whether the Deferred object is in the resolved state. These methods are primarily useful for debugging, for example to determine whether a Deferred has already been resolved even though you are inside code that intended to reject it.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.isRejected>

deferred.isResolved()
=====================

   deferred.isResolved()Returns: [Boolean](types#Boolean)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.8](https://api.jquery.com/category/version/1.8/)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:**  Determine whether a Deferred object has been resolved. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.isResolved()](#deferred-isResolved)


	+ This method does not accept any arguments.

   Note: This API has been removed in jQuery 1.8; please use [`deferred.state()`](deferred.state) instead.

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

 Note that a Deferred object can be in one of three states: pending, resolved, or rejected; use [`deferred.isRejected()`](deferred.isrejected) to determine whether the Deferred object is in the rejected state. These methods are primarily useful for debugging, for example to determine whether a Deferred has already been resolved even though you are inside code that intended to reject it.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.isResolved>

deferred.notify()
=================

   deferred.notify( args )Returns: [Deferred](types#Deferred)
-----------------------------------------------------------

  **Description:**  Call the progressCallbacks on a Deferred object with the given `args`. 

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[deferred.notify( args )](#deferred-notify-args)


	+ **args** Type: [Object](types#Object)   Optional arguments that are passed to the progressCallbacks.

  Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state or reporting status by returning a restricted Promise object through deferred.promise().

 When `deferred.notify` is called, any progressCallbacks added by [`deferred.then`](deferred.then) or [`deferred.progress`](deferred.progress) are called. Callbacks are executed in the order they were added. Each callback is passed the `args` from the `.notify()`. Any calls to `.notify()` after a Deferred is resolved or rejected (or any progressCallbacks added after that) are ignored. For more information, see the documentation for [Deferred object](category/deferred-object).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.notify>

deferred.notifyWith()
=====================

   deferred.notifyWith( context [, args ] )Returns: [Deferred](types#Deferred)
----------------------------------------------------------------------------

  **Description:**  Call the progressCallbacks on a Deferred object with the given context and `args`. 

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[deferred.notifyWith( context [, args ] )](#deferred-notifyWith-context-args)


	+ **context** Type: [Object](types#Object)   Context passed to the progressCallbacks as the `this` object.
	+ **args** Type: [Array](types#Array)   An optional array of arguments that are passed to the progressCallbacks.

  Normally, only the creator of a Deferred should call this method; you can prevent other code from changing the Deferred's state or reporting status by returning a restricted Promise object through deferred.promise().

 When `deferred.notifyWith` is called, any progressCallbacks added by [`deferred.then`](deferred.then) or [`deferred.progress`](deferred.progress) are called. Callbacks are executed in the order they were added. Each callback is passed the `args` from the `.notifyWith()`. Any calls to `.notifyWith()` after a Deferred is resolved or rejected (or any progressCallbacks added after that) are ignored. For more information, see the documentation for [Deferred object](category/deferred-object).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.notifyWith>

deferred.pipe()
===============

   deferred.pipe( [doneFilter ] [, failFilter ] )Returns: [Promise](types#Promise)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/)
-------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:**  Utility method to filter and/or chain Deferreds. 

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[deferred.pipe( [doneFilter ] [, failFilter ] )](#deferred-pipe-doneFilter-failFilter)


	+ **doneFilter** Type: [Function](types#Function)()  An optional function that is called when the Deferred is resolved.
	+ **failFilter** Type: [Function](types#Function)()  An optional function that is called when the Deferred is rejected.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[deferred.pipe( [doneFilter ] [, failFilter ] [, progressFilter ] )](#deferred-pipe-doneFilter-failFilter-progressFilter)


	+ **doneFilter** Type: [Function](types#Function)()  An optional function that is called when the Deferred is resolved.
	+ **failFilter** Type: [Function](types#Function)()  An optional function that is called when the Deferred is rejected.
	+ **progressFilter** Type: [Function](types#Function)()  An optional function that is called when progress notifications are sent to the Deferred.

  **Deprecation Notice:**As of jQuery 1.8, the deferred.pipe() method is deprecated. The `deferred.then()` method, which replaces it, should be used instead.

 The `deferred.pipe()` method returns a new promise that filters the status and values of a deferred through a function. The `doneFilter` and `failFilter` functions filter the original deferred's resolved / rejected status and values. **As of jQuery 1.7**, the method also accepts a `progressFilter` function to filter any calls to the original deferred's `notify` or `notifyWith` methods. These filter functions can return a new value to be passed along to the piped promise's `done()` or `fail()` callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the piped promise's callbacks. If the filter function used is `null`, or not specified, the piped promise will be resolved or rejected with the same values as the original.

  Examples:
---------


 Filter resolve value:

 
```
var defer = $.Deferred(),
  filtered = defer.pipe(function( value ) {
    return value * 2;
  });
 
defer.resolve( 5 );
filtered.done(function( value ) {
  alert( "Value is ( 2*5 = ) 10: " + value );
});
```
   Filter reject value:

 
```
var defer = $.Deferred(),
  filtered = defer.pipe( null, function( value ) {
    return value * 3;
  });
 
defer.reject( 6 );
filtered.fail(function( value ) {
  alert( "Value is ( 3*6 = ) 18: " + value );
});
```
   Chain tasks:

 
```
var request = $.ajax( url, { dataType: "json" } ),
  chained = request.pipe(function( data ) {
    return $.ajax( url2, { data: { user: data.userId } } );
  });
 
chained.done(function( data ) {
  // data retrieved from url2 as provided by the first request
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.pipe>

deferred.progress()
===================

   deferred.progress( progressCallbacks [, progressCallbacks ] )Returns: [Deferred](types#Deferred)
-------------------------------------------------------------------------------------------------

  **Description:**  Add handlers to be called when the Deferred object generates progress notifications.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[deferred.progress( progressCallbacks [, progressCallbacks ] )](#deferred-progress-progressCallbacks-progressCallbacks)


	+ **progressCallbacks** Type: [Function](types#Function)() or [Array](types#Array)   A function, or array of functions, to be called when the Deferred generates progress notifications.
	+ **progressCallbacks** Type: [Function](types#Function)() or [Array](types#Array)   Optional additional functions, or arrays of functions, to be called when the Deferred generates progress notifications.

  The `deferred.progress()` method accepts one or more arguments, all of which can be either a single function or an array of functions. When the Deferred generates progress notifications by calling `notify` or `notifyWith`, the `progressCallbacks` are called. Since `deferred.progress()` returns the Deferred object, other methods of the Deferred object can be chained to this one. When the Deferred is resolved or rejected, progress callbacks will no longer be called, with the exception that any `progressCallbacks` added after the Deferred enters the resolved or rejected state are executed immediately when they are added, using the arguments that were passed to the `.notify()` or `notifyWith()` call. For more information, see the documentation for [jQuery.Deferred()](jquery.deferred).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.progress>

deferred.promise()
==================

   deferred.promise( [target ] )Returns: [Promise](types#Promise)
---------------------------------------------------------------

  **Description:**  Return a Deferred's Promise object. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.promise( [target ] )](#deferred-promise-target)


	+ **target** Type: [Object](types#Object)  Object onto which the promise methods have to be attached

  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`, `always`, `pipe`, `progress`, `state` and `promise`), but not ones that change the state (`resolve`, `reject`, `notify`, `resolveWith`, `rejectWith`, and `notifyWith`).

 If `target` is provided, `deferred.promise()` will attach the methods onto it and then return this object rather than create a new one. This can be useful to attach the Promise behavior to an object that already exists.

 If you are creating a Deferred, keep a reference to the Deferred so that it can be resolved or rejected at some point. Return *only* the Promise object via `deferred.promise()` so other code can register callbacks or inspect the current state.

 For more information, see the documentation for [Deferred object](category/deferred-object).

  Examples:
---------


 Create a Deferred and set two timer-based functions to either resolve or reject the Deferred after a random interval. Whichever one fires first "wins" and will call one of the callbacks. The second timeout has no effect since the Deferred is already complete (in a resolved or rejected state) from the first timeout action. Also set a timer-based progress notification function, and call a progress handler that adds "working..." to the document body.

 
```
function asyncEvent() {
  var dfd = jQuery.Deferred();
 
  // Resolve after a random interval
  setTimeout(function() {
    dfd.resolve( "hurray" );
  }, Math.floor( 400 + Math.random() * 2000 ) );
 
  // Reject after a random interval
  setTimeout(function() {
    dfd.reject( "sorry" );
  }, Math.floor( 400 + Math.random() * 2000 ) );
 
  // Show a "working..." message every half-second
  setTimeout(function working() {
    if ( dfd.state() === "pending" ) {
      dfd.notify( "working... " );
      setTimeout( working, 500 );
    }
  }, 1 );
 
  // Return the Promise so caller can't change the Deferred
  return dfd.promise();
}
 
// Attach a done, fail, and progress handler for the asyncEvent
$.when( asyncEvent() ).then(
  function( status ) {
    alert( status + ", things are going well" );
  },
  function( status ) {
    alert( status + ", you fail this time" );
  },
  function( status ) {
    $( "body" ).append( status );
  }
);
```
   Use the target argument to promote an existing object to a Promise:

 
```
// Existing object
var obj = {
    hello: function( name ) {
      alert( "Hello " + name );
    }
  },
  // Create a Deferred
  defer = $.Deferred();
 
// Set object as a promise
defer.promise( obj );
 
// Resolve the deferred
defer.resolve( "John" );
 
// Use the object as a Promise
obj.done(function( name ) {
  obj.hello( name ); // Will alert "Hello John"
}).hello( "Karl" ); // Will alert "Hello Karl"
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.promise>

deferred.reject()
=================

   deferred.reject( [args ] )Returns: [Deferred](types#Deferred)
--------------------------------------------------------------

  **Description:**  Reject a Deferred object and call any failCallbacks with the given `args`. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.reject( [args ] )](#deferred-reject-args)


	+ **args** Type: [Anything](types#Anything)   Optional arguments that are passed to the failCallbacks.

  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()`](deferred.promise).

 When the Deferred is rejected, any failCallbacks added by [`deferred.then()`](deferred.then) or [`deferred.fail()`](deferred.fail) are called. Callbacks are executed in the order they were added. Each callback is passed the `args` from the `deferred.reject()` call. Any failCallbacks added after the Deferred enters the rejected state are executed immediately when they are added, using the arguments that were passed to the `deferred.reject()` call. For more information, see the documentation for [jQuery.Deferred()](jquery.deferred).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.reject>

deferred.rejectWith()
=====================

   deferred.rejectWith( context [, args ] )Returns: [Deferred](types#Deferred)
----------------------------------------------------------------------------

  **Description:**  Reject a Deferred object and call any failCallbacks with the given `context` and `args`. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.rejectWith( context [, args ] )](#deferred-rejectWith-context-args)


	+ **context** Type: [Object](types#Object)   Context passed to the failCallbacks as the `this` object.
	+ **args** Type: [Array](types#Array)   An optional array of arguments that are passed to the failCallbacks.

  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()`](deferred.promise).

 When the Deferred is rejected, any failCallbacks added by [`deferred.then`](deferred.then) or [`deferred.fail`](deferred.fail) are called. Callbacks are executed in the order they were added. Each callback is passed the `args` from the `deferred.reject()` call. Any failCallbacks added after the Deferred enters the rejected state are executed immediately when they are added, using the arguments that were passed to the `.reject()` call. For more information, see the documentation for [Deferred object](category/deferred-object).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.rejectWith>

deferred.resolveWith()
======================

   deferred.resolveWith( context [, args ] )Returns: [Deferred](types#Deferred)
-----------------------------------------------------------------------------

  **Description:**  Resolve a Deferred object and call any doneCallbacks with the given `context` and `args`. 

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[deferred.resolveWith( context [, args ] )](#deferred-resolveWith-context-args)


	+ **context** Type: [Object](types#Object)   Context passed to the doneCallbacks as the `this` object.
	+ **args** Type: [Array](types#Array)   An optional array of arguments that are passed to the doneCallbacks.

  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()`](deferred.promise).

 When the Deferred is resolved, any doneCallbacks added by [`deferred.then`](deferred.then) or [`deferred.done`](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](category/deferred-object).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.resolveWith>

deferred.state()
================

   deferred.state()Returns: [String](types#String)
------------------------------------------------

  **Description:** Determine the current state of a Deferred object. 

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[deferred.state()](#deferred-state)


	+ This method does not accept any arguments.

  The deferred.state() method returns a string representing the current state of the Deferred object. The Deferred object can be in one of three states:

 * **"pending"**: The Deferred object is not yet in a completed state (neither "rejected" nor "resolved").
* **"resolved"**: The Deferred object is in the resolved state, meaning that either [`deferred.resolve()`](deferred.resolve) or [`deferred.resolveWith()`](deferred.resolvewith) has been called for the object and the doneCallbacks have been called (or are in the process of being called).
* **"rejected"**: The Deferred object is in the rejected state, meaning that either [`deferred.reject()`](deferred.reject) or [`deferred.rejectWith()`](deferred.rejectwith) has been called for the object and the failCallbacks have been called (or are in the process of being called).

 This method is primarily useful for debugging to determine, for example, whether a Deferred has already been resolved even though you are inside code that intended to reject it.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.state>

.delay()
========

   .delay( duration [, queueName ] )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------------

  **Description:** Set a timer to delay execution of subsequent items in the queue.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.delay( duration [, queueName ] )](#delay-duration-queueName)


	+ **duration** Type: [Integer](types#Integer)  An integer indicating the number of milliseconds to delay execution of the next item in the queue.
	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects 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.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

 Using the standard effects queue, we can, for example, set an 800-millisecond delay between the `.slideUp()` and `.fadeIn()` of `<div id="foo">`:

 
```
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
```
 When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.

   **The `.delay()` method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—`.delay()` is not a replacement for JavaScript's native [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout) function, which may be more appropriate for certain use cases.** 

   Example:
--------


 Animate the hiding and showing of two divs, delaying the first before showing it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delay demo</title>
  <style>
  div {
    position: absolute;
    width: 60px;
    height: 60px;
    float: left;
  }
  .first {
    background-color: #3f3;
    left: 0;
  }
  .second {
    background-color: #33f;
    left: 80px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
 
<script>
$( "button" ).click(function() {
  $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
  $( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/delay>

deferred.then()
===============

   deferred.then( doneFilter [, failFilter ] [, progressFilter ] )Returns: [Promise](types#Promise)
-------------------------------------------------------------------------------------------------

  **Description:** Add handlers to be called when the Deferred object is resolved, rejected, or still in progress. 

 * ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)[deferred.then( doneFilter [, failFilter ] [, progressFilter ] )](#deferred-then-doneFilter-failFilter-progressFilter)


	+ **doneFilter** Type: [Function](types#Function)()  A function that is called when the Deferred is resolved.
	+ **failFilter** Type: [Function](types#Function)()  An optional function that is called when the Deferred is rejected.
	+ **progressFilter** Type: [Function](types#Function)()  An optional function that is called when progress notifications are sent to the Deferred.
* ####  version added: [1.5](https://api.jquery.com/category/version/1.5/), removed: [1.8](https://api.jquery.com/category/version/1.8/)[deferred.then( doneCallbacks, failCallbacks )](#deferred-then-doneCallbacks-failCallbacks)


	+ **doneCallbacks** Type: [Function](types#Function)()  A function, or array of functions, called when the Deferred is resolved.
	+ **failCallbacks** Type: [Function](types#Function)()  A function, or array of functions, called when the Deferred is rejected.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.8](https://api.jquery.com/category/version/1.8/)[deferred.then( doneCallbacks, failCallbacks [, progressCallbacks ] )](#deferred-then-doneCallbacks-failCallbacks-progressCallbacks)


	+ **doneCallbacks** Type: [Function](types#Function)()  A function, or array of functions, called when the Deferred is resolved.
	+ **failCallbacks** Type: [Function](types#Function)()  A function, or array of functions, called when the Deferred is rejected.
	+ **progressCallbacks** Type: [Function](types#Function)()  A function, or array of functions, called when the Deferred notifies progress.

  **Prior to jQuery 1.8**, the arguments could be a function or an array of functions.

 For all signatures, the arguments can be `null` if no callback of that type is desired. Alternatively, use `.done()`, `.fail()` or `.progress()` to set only one type of callback without filtering status or values. 

 **As of jQuery 1.8**, the `deferred.then()` method returns a new promise that can filter the status and values of a deferred through a function, replacing the now-deprecated `deferred.pipe()` method. The `doneFilter` and `failFilter` functions filter the original deferred's resolved / rejected status and values. The `progressFilter` function filters any calls to the original deferred's `notify` or `notifyWith` methods. These filter functions can return a new value to be passed along to the promise's `.done()` or `.fail()` callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the promise's callbacks. If the filter function used is `null`, or not specified, the promise will be resolved or rejected with the same values as the original.

 Callbacks are executed in the order they were added. Since `deferred.then` returns a Promise, other methods of the Promise object can be chained to this one, including additional `.then()` methods. 

  Examples:
---------


 Since the [`jQuery.get`](jquery.get) method returns a jqXHR object, which is derived from a Deferred object, we can attach handlers using the `.then` method.

 
```
$.get( "test.php" ).then(
  function() {
    alert( "$.get succeeded" );
  }, function() {
    alert( "$.get failed!" );
  }
);
```
   Filter the resolve value:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.then demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Filter Resolve</button>
<p></p>
 
<script>
var filterResolve = function() {
  var defer = $.Deferred(),
    filtered = defer.then(function( value ) {
      return value * 2;
    });
 
  defer.resolve( 5 );
  filtered.done(function( value ) {
    $( "p" ).html( "Value is ( 2*5 = ) 10: " + value );
  });
};
 
$( "button" ).on( "click", filterResolve );
</script>
 
</body>
</html>
```
 #### Demo:

   Filter reject value:

 
```
var defer = $.Deferred(),
  filtered = defer.then( null, function( value ) {
    return value * 3;
  });
 
defer.reject( 6 );
filtered.fail(function( value ) {
  alert( "Value is ( 3*6 = ) 18: " + value );
});
```
   Chain tasks:

 
```
var request = $.ajax( url, { dataType: "json" } ),
  chained = request.then(function( data ) {
    return $.ajax( url2, { data: { user: data.userId } } );
  });
 
chained.done(function( data ) {
  // data retrieved from url2 as provided by the first request
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/deferred.then>

.delegate()
===========

   .delegate( selector, eventType, handler )Returns: [jQuery](types#jQuery)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** 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.

 * ####  version added: [1.4.2](https://api.jquery.com/category/version/1.4.2/)[.delegate( selector, eventType, handler )](#delegate-selector-eventType-handler)


	+ **selector** Type: [String](types#String)  A selector to filter the elements that trigger the event.
	+ **eventType** Type: [String](types#String)  A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute at the time the event is triggered.
* ####  version added: [1.4.2](https://api.jquery.com/category/version/1.4.2/)[.delegate( selector, eventType, eventData, handler )](#delegate-selector-eventType-eventData-handler)


	+ **selector** Type: [String](types#String)  A selector to filter the elements that trigger the event.
	+ **eventType** Type: [String](types#String)  A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute at the time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.delegate( selector, events )](#delegate-selector-events)


	+ **selector** Type: [String](types#String)  A selector to filter the elements that trigger the event.
	+ **events** Type: [PlainObject](types#PlainObject)  A plain object of one or more event types and functions to execute for them.

  As of jQuery 3.0, `.delegate()` has been deprecated. It was superseded by the [`.on()`](on) method since jQuery 1.7, so its use was already discouraged. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the [`.on()`](on) method. In general, these are the equivalent templates for the two methods:

 
```
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
```
 For example, the following `.delegate()` code:

 
```
$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});
```
 is equivalent to the following code written using `.on()`:

 
```
$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});
```
 To remove events attached with `delegate()`, see the [.undelegate()](undelegate) method.

 Passing and handling event data works the same way as it does for `.on()`.

  ### Additional Notes:

 * Since the [`.live()`](live) method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by `[.delegate()](delegate)` will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling `[event.stopPropagation()](event.stoppropagation)` or returning `false`.
 Examples:
---------


 Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Click me!</p>
 
<span></span>
 
<script>
$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph!</p>" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   To display each paragraph's text in an alert box whenever it is clicked:

 
```
$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});
```
   To cancel a default action and prevent it from bubbling up, return false:

 
```
$( "body" ).delegate( "a", "click", function() {
  return false;
});
```
   To cancel only the default action by using the preventDefault method.

 
```
$( "body" ).delegate( "a", "click", function( event ) {
  event.preventDefault();
});
```
   Can bind custom events too.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
 
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/delegate>

.empty()
========

   .empty()Returns: [jQuery](types#jQuery)
----------------------------------------

  **Description:** Remove all child nodes of the set of matched elements from the DOM.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.empty()](#empty)


	+ This method does not accept any arguments.

  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:

 
```
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
```
 We can target any element for removal:

 
```
$( ".hello" ).empty();
```
 This will result in a DOM structure with the `Hello` text deleted:

 
```
<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>
```
 If we had any number of nested elements inside `<div class="hello">`, they would be removed, too.

 To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

 If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use [`.detach()`](detach) instead.

  Example:
--------


 Removes all child nodes (including text nodes) from all paragraphs

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>empty demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  Hello, <span>Person</span> <em>and person</em>.
</p>
 
<button>Call empty() on above paragraph</button>
 
<script>
$( "button" ).click(function() {
  $( "p" ).empty();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/empty>

.dequeue()
==========

   .dequeue( [queueName ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------

  **Description:** Execute the next function on the queue for the matched elements.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.dequeue( [queueName ] )](#dequeue-queueName)


	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.

  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.

  Example:
--------


 Use dequeue to end a custom queue function which allows the queue to keep going.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dequeue demo</title>
  <style>
  div {
    margin: 3px;
    width: 50px;
    position: absolute;
    height: 50px;
    left: 10px;
    top: 30px;
    background-color: yellow;
  }
  div.red {
    background-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Start</button>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" )
    .animate({ left:"+=200px" }, 2000 )
    .animate({ top:"0px" }, 600 )
    .queue(function() {
      $( this ).toggleClass( "red" ).dequeue();
    })
    .animate({ left:"10px", top:"30px" }, 700 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/dequeue>

.end()
======

   .end()Returns: [jQuery](types#jQuery)
--------------------------------------

  **Description:** End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.end()](#end)


	+ This method does not accept any arguments.

  Most of jQuery's [DOM traversal](category/traversing) 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.

 Suppose we have a couple short lists on a page:

 
```
<ul class="first">
  <li class="foo">list item 1</li>
  <li>list item 2</li>
  <li class="bar">list item 3</li>
</ul>
<ul class="second">
  <li class="foo">list item 1</li>
  <li>list item 2</li>
  <li class="bar">list item 3</li>
</ul>
```
 The `end()` method is useful primarily when exploiting jQuery's chaining properties. When not using chaining, we can usually just call up a previous object by variable name, so we don't need to manipulate the stack. With `end()`, though, we can string all the method calls together:

 
```
$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end()
  .find( ".bar" )
    .css( "background-color", "green" );
```
 This chain searches for items with the class `foo` within the first list only and turns their backgrounds red. Then `end()` returns the object to its state before the call to `find()`, so the second `find()` looks for '.bar' inside `<ul class="first">`, not just inside that list's `<li class="foo">`, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.

 A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and `end()` methods closing them:

 
```
$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end()
  .find( ".bar" )
    .css( "background-color", "green" )
  .end();
```
 The last `end()` is unnecessary, as we are discarding the jQuery object immediately thereafter. However, when the code is written in this form, the `end()` provides visual symmetry and a sense of completion —making the program, at least to the eyes of some developers, more readable, at the cost of a slight hit to performance as it is an additional function call.

  Examples:
---------


 Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>end demo</title>
  <style>
  p, div {
    margin: 1px;
    padding: 1px;
    font-weight: bold;
    font-size: 16px;
  }
  div {
    color: blue;
  }
  b {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  Hi there <span>how</span> are you <span>doing</span>?
</p>
 
<p>
  This <span>span</span> is one of
  several <span>spans</span> in this
  <span>sentence</span>.
</p>
 
<div>
  Tags in jQuery object initially: <b></b>
</div>
 
<div>
  Tags in jQuery object after find: <b></b>
</div>
 
<div>
  Tags in jQuery object after end: <b></b>
</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>end demo</title>
  <style>
  p {
    margin: 10px;
    padding: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><span>Hello</span>, how are you?</p>
 
<script>
$( "p" )
  .find( "span" )
  .end()
  .css( "border", "2px red solid" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/end>

.each()
=======

   .each( function )Returns: [jQuery](types#jQuery)
-------------------------------------------------

  **Description:** Iterate over a jQuery object, executing a function for each matched element. 

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.each( function )](#each-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Element](types#Element) element ) A function to execute 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.

 Suppose you have a simple unordered list on the page:

 
```
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
```
 You can select the list items and iterate across them:

 
```
$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});
```
 A message is thus logged for each item in the list:

  `0: foo`   
 `1: bar` 

 You can stop the loop from within the callback function by returning `false`.

 Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as *implicit iteration*. When this occurs, it is often unnecessary to *explicitly* iterate with the `.each()` method:

 
```
// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );
```
  Examples:
---------


 Iterate over three divs and sets their color property.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  div {
    color: red;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
    width: 300px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
 
<script>
$( document.body ).click(function() {
  $( "div" ).each(function( i ) {
    if ( this.style.color !== "blue" ) {
      this.style.color = "blue";
    } else {
      this.style.color = "";
    }
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   To access a jQuery object instead of the regular DOM element, use `$( this )`. For example:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  ul {
    font-size: 18px;
    margin: 0;
  }
  span {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
  .example {
    font-style: italic;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
To do list: <span>(click here to change)</span>
<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Be merry</li>
</ul>
 
<script>
$( "span" ).click(function() {
  $( "li" ).each(function() {
    $( this ).toggleClass( "example" );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   Use `return false` to break out of each() loops early.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 5px;
    float: left;
    border: 2px blue solid;
    text-align: center;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" ).each(function( index, element ) {
    // element == this
    $( element ).css( "backgroundColor", "yellow" );
    if ( $( this ).is( "#stop" ) ) {
      $( "span" ).text( "Stopped at div index #" + index );
      return false;
    }
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/each>

:eq() Selector
==============

   eq selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
-----------------------------------------------------------------------------------

  **Description:** Select the element at index `n` within the matched set.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":eq(index)" )

 **index:** Zero-based index of the element to match.
* ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)jQuery( ":eq(-index)" )

 **indexFromEnd:** Zero-based index of the element to match, counting backwards from the last element.

   **As of jQuery 3.4**, the `:eq` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.eq()`](eq).

  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.

 Note that since JavaScript arrays use *0-based indexing*, these selectors reflect that fact. This is why `$( ".myclass:eq(1)" )` selects the second element in the document with the class myclass, rather than the first. In contrast, `:nth-child(n)` uses *1-based indexing* to conform to the CSS specification.

 Prior to jQuery 1.8, the `:eq(index)` selector did *not* accept a negative value for `index` (though the [`.eq(index)`](eq) method did).

  ### Additional Notes:

 * Because `:eq()` is a jQuery extension and not part of the CSS specification, queries using `:eq()` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `$("your-pure-css-selector").eq(index)` instead.
 Examples:
---------


 Find the third td.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:eq( 2 )" ).css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Apply three different styles to list items to demonstrate that `:eq()` is designed to select a single element while `:nth-child()` or `:eq()` within a looping construct such as `.each()` can select multiple elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="nav">
  <li>List 1, item 1</li>
  <li>List 1, item 2</li>
  <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>
 
<script>
// Applies yellow background color to a single <li>
$( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
 
// Applies italics to text of the second <li> within each <ul class="nav">
$( "ul.nav" ).each(function( index ) {
  $( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
});
 
// Applies red text color to descendants of <ul class="nav">
// for each <li> that is the second child of its parent
$( "ul.nav li:nth-child(2)" ).css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Add a class to List 2, item 2 by targeting the second to last <li> 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <style>
  .foo {
    color: blue;
    background-color: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="nav">
  <li>List 1, item 1</li>
  <li>List 1, item 2</li>
  <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>
 
<script>
$( "li:eq(-2)" ).addClass( "foo" )
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/eq-selector>

Category: Collection Manipulation
=================================

   [.each()](../../each "Permalink to .each()")
=============================================

  Iterate over a jQuery object, executing a function for each matched element.

     [jQuery.param()](../../jquery.param "Permalink to jQuery.param()")
===================================================================

  Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/miscellaneous/collection-manipulation>

Descendant Selector (“ancestor descendant”)
===========================================

  descendant selector
-------------------

  **Description:** Selects all elements that are descendants of a given ancestor.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "ancestor descendant" )

 **ancestor:** Any valid selector.

 **descendant:** A selector to filter the descendant elements.

  A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

  Example:
--------


 Mark all inputs that are descendants of a form with a dotted blue border. Give a yellow background to inputs that are descendants of a fieldset that is a descendant of a form.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>descendant demo</title>
  <style>
  form {
    border: 2px green solid;
    padding: 2px;
    margin: 0;
    background: #efe;
  }
  div {
    color: red;
  }
  fieldset {
    margin: 1px;
    padding: 3px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <div>Form is surrounded by the green border.</div>
 
  <label for="name">Child of form:</label>
  <input name="name" id="name">
 
  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
Sibling to form: <input name="none">
 
<script>
$( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/descendant-selector>

Element Selector (“element”)
============================

  element selector
----------------

  **Description:** Selects all elements with the given tag name.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "element" )

 **element:** An element to search for. Refers to the tagName of DOM nodes.

  JavaScript's `getElementsByTagName()` function is called to return the appropriate elements when this expression is used.

  Example:
--------


 Finds every DIV element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>element demo</title>
  <style>
  div, span {
    width: 60px;
    height: 60px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
 
<script>
$( "div" ).css( "border", "9px solid red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/element-selector>

:enabled Selector
=================

  enabled selector
----------------

  **Description:** Selects all elements that are enabled.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":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" )` or similar should be used instead. 

 Although their resulting selections are usually the same, `:enabled` selector is subtly different from `:not([disabled])`; `:enabled` selects elements that have their boolean disabled property strictly equal to false, while `:not([disabled])` selects elements that do not have a disabled *attribute* set (regardless of its value).

 The `:enabled` selector should only be used for selecting HTML elements that support the `disabled` attribute (`<button>`, `<input>`, `<optgroup>`, `<option>`, `<select>`, and `<textarea>`).

  Example:
--------


 Find all input elements that are enabled.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>enabled demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
 
<script>
$( "input:enabled" ).val( "this is it" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/enabled-selector>

:disabled Selector
==================

  disabled selector
-----------------

  **Description:** Selects all elements that are disabled.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":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')` or similar should be used instead. 

 Although their resulting selections are usually the same, the `:disabled` selector is subtly different from the `[disabled]` attribute selector;`:disabled` matches elements that are [actually disabled](https://html.spec.whatwg.org/multipage/scripting.html#disabled-elements) while `[disabled]` only checks for the existence of the disabled attribute.

 The `:disabled` selector should only be used for selecting HTML elements that support the `disabled` attribute (`<button>`, `<input>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>`, `<menuitem>`, and `<fieldset>`).

  Example:
--------


 Finds all input elements that are disabled.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>disabled demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input name="email" disabled="disabled">
  <input name="id">
</form>
 
<script>
$( "input:disabled" ).val( "this is it" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/disabled-selector>

event.currentTarget
===================

   event.currentTargetReturns: [Element](types#Element)
-----------------------------------------------------

  **Description:**  The current DOM element within the event bubbling phase. 

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)event.currentTarget

  This property will typically be equal to the `this` of the function.

  *If you are using [jQuery.proxy](jquery.proxy) or another form of scope manipulation, `this` will be equal to whatever context you have provided, not `event.currentTarget`* 

  Example:
--------


 Alert that currentTarget matches the `this` keyword.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.currentTarget>

.die()
======

   .die()Returns: [jQuery](types#jQuery)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.9](https://api.jquery.com/category/version/1.9/)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Remove event handlers previously attached using `.live()` from the elements.

 * ####  version added: [1.4.1](https://api.jquery.com/category/version/1.4.1/)[.die()](#die)


	+ This signature does not accept any arguments.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.die( eventType [, handler ] )](#die-eventType-handler)


	+ **eventType** Type: [String](types#String)  A string containing a JavaScript event type, such as `click` or `keydown`.
	+ **handler** Type: [String](types#String)  The function that is no longer to be executed.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.die( events )](#die-events)


	+ **events** Type: [PlainObject](types#PlainObject)  A plain object of one or more event types, such as `click` or `keydown` and their corresponding functions that are no longer to be executed.

   Note: This API has been removed in jQuery 1.9; please use [`on()`](on) instead.

  Any handler that has been attached with `.live()` can be removed with `.die()`. This method is analogous to calling `.off()` with no arguments, which is used to remove all handlers attached with `.on()`. See the discussions of `.live()` and `.off()` for further details.

 If used without an argument, .die() removes *all* event handlers previously attached using `.live()` from the elements.

 **As of jQuery 1.7**, use of `.die()` (and its complementary method, `.live()`) is not recommended. Instead, use [`.off()`](off) to remove event handlers bound with [`.on()`](on)

 **Note:** In order for .die() to function correctly, the selector used with it must match exactly the selector initially used with .live().

  Examples:
---------


 To unbind all live events from all paragraphs, write:

 
```
$( "p" ).die();
```
   To unbind all live click events from all paragraphs, write:

 
```
$( "p" ).die( "click" );
```
   To unbind just one previously bound handler, pass the function in as the second argument:

 
```
var foo = function() {
  // Code to handle some kind of event
};
 
// Now foo will be called when paragraphs are clicked
$( "p" ).live( "click", foo );
 
// Now foo will no longer be called
$( "p" ).die( "click", foo );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/die>

.detach()
=========

   .detach( [selector ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Remove the set of matched elements from the DOM.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.detach( [selector ] )](#detach-selector)


	+ **selector** Type: [Selector](types#Selector)  A selector expression that filters the set of matched elements to be removed.

  The `.detach()` method is the same as `[.remove()](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.

  Example:
--------


 Detach all paragraphs from the DOM

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>detach demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  p.off {
    background: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
 
<script>
$( "p" ).click(function() {
  $( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/detach>

.eq()
=====

   .eq( index )Returns: [jQuery](types#jQuery)
--------------------------------------------

  **Description:** Reduce the set of matched elements to the one at the specified index.

 * ####  version added: [1.1.2](https://api.jquery.com/category/version/1.1.2/)[.eq( index )](#eq-index)


	+ **index** Type: [Integer](types#Integer)  An integer indicating the 0-based position of the element.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.eq( indexFromEnd )](#eq-indexFromEnd)


	+ **indexFromEnd** Type: [Integer](types#Integer)  An integer indicating the position of the element, counting backwards from the last element in the set.

  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. 

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).eq( 2 ).css( "background-color", "red" );
```
 The result of this call is a red background for item 3. Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not within the DOM tree.

 Providing a negative number indicates a position starting from the end of the set, rather than the beginning. For example:

 
```
$( "li" ).eq( -2 ).css( "background-color", "red" );
```
 This time list item 4 is turned red, since it is two from the end of the set.

 If an element cannot be found at the specified zero-based index, the method constructs a new jQuery object with an empty set and a `length` property of 0. 

 
```
$( "li" ).eq( 5 ).css( "background-color", "red" );
```
 Here, none of the list items is turned red, since `.eq( 5 )` indicates the sixth of five list items.

  Example:
--------


 Turn the div with index 2 blue by adding an appropriate class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
  }
  .blue {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/eq>

:even Selector
==============

   even selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
-------------------------------------------------------------------------------------

  **Description:** Selects even elements, zero-indexed. See also [`:odd`](odd-selector).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":even" )

   **As of jQuery 3.4**, the `:even` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.even()`](even) (available in jQuery 3.5.0 or newer).

  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.

  ### Additional Notes:

 * Because `:even` is a jQuery extension and not part of the CSS specification, queries using `:even` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:even` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":even")`](filter).
* Selected elements are in the order of their appearance in the document.
 Example:
--------


 Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>even demo</title>
  <style>
  table {
    background: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>
 
<script>
$( "tr:even" ).css( "background-color", "#bbf" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/even-selector>

:empty Selector
===============

  empty selector
--------------

  **Description:** Select all elements that have no children (including text nodes).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":empty" )

  This is the inverse of `:parent`. 

 One important thing to note with :empty (and :parent) is that child elements include text nodes.

 The W3C recommends that the `<p>` element have at least one child node, even if that child is merely text (see https://www.w3.org/TR/html401/struct/text.html#edef-P). Some other elements, on the other hand, are empty (i.e. have no children) by definition: <input>, <img>, <br>, and <hr>, for example.

  Example:
--------


 Finds all elements that are empty - they don't have child elements or text.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>empty demo</title>
  <style>
  td {
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>
 
<script>
$( "td:empty" )
  .text( "Was empty!" )
  .css( "background", "rgb(255,220,200)" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/empty-selector>

.error()
========

   .error( handler )Returns: [jQuery](types#jQuery)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Bind an event handler to the "error" JavaScript event.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.error( handler )](#error-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.error( [eventData ], handler )](#error-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.

   Note: This API has been removed in jQuery 3.0; please use `.on( "error", handler )` instead of `.error( handler )` and `.trigger( "error" )` instead of `.error()`.

  The `error` event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

 For example, consider a page with a simple image element:

 
```
<img alt="Book" id="book">
```
 The event handler can be bound to the image:

 
```
$( "#book" )
  .error(function() {
    alert( "Handler for .error() called." )
  })
  .attr( "src", "missing.png" );
```
 If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:

  `Handler for .error() called.` 

  The event handler *must* be attached before the browser fires the `error` event, which is why the example sets the `src` attribute after attaching the handler. Also, the `error` event may not be correctly fired when the page is served locally; `error` relies on HTTP status codes and will generally not be triggered if the URL uses the `file:` protocol.

  Note: A jQuery `error` event handler should not be attached to the `window` object. The browser fires the `window`'s `error` event when a script error occurs. However, the window `error` event receives different arguments and has different return value requirements than conventional event handlers. Use `window.onerror` instead.

  ### Additional Notes:

 * As the `.error()` method is just a shorthand for `.on( "error", handler )`, detaching is possible using `.off( "error" )`.
 Example:
--------


 To replace all the missing images with another, you can update the `src` attribute inside the callback passed to `.error()`. Be sure that the replacement image exists; otherwise the `error` event will be triggered indefinitely.

 
```
// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/error>

.even()
=======

   .even()Returns: [jQuery](types#jQuery)
---------------------------------------

  **Description:** Reduce the set of matched elements to the even ones in the set, numbered from zero.

 * ####  version added: [3.5](https://api.jquery.com/category/version/3.5/)[.even()](#even)


	+ This method does not accept any arguments.

  Given a jQuery object that represents a set of DOM elements, the `.even()` method constructs a new jQuery object from the even elements in that set. Counting starts from zero!

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).even().css( "background-color", "red" );
```
 The result of this call is a red background for the first, third & 5th items.

  Example:
--------


 Highlight the even items in a list.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>even demo</title>
  <style>
  .highlight {
    background-color: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>Look:</li>
  <li>This is some text in a list.</li>
  <li>This is a note about it.</li>
  <li>This is another note about it.</li>
</ul>
 
<script>
$( "ul li" ).even().addClass( "highlight" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/even>

Category: Filtering
===================

   [.eq()](../../eq "Permalink to .eq()")
=======================================

  Reduce the set of matched elements to the one at the specified index.

     [.even()](../../even "Permalink to .even()")
=============================================

  Reduce the set of matched elements to the even ones in the set, numbered from zero.

     [.filter()](../../filter "Permalink to .filter()")
===================================================

  Reduce the set of matched elements to those that match the selector or pass the function’s test.

     [.first()](../../first "Permalink to .first()")
================================================

  Reduce the set of matched elements to the first in the set.

     [.has()](../../has "Permalink to .has()")
==========================================

  Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

     [.is()](../../is "Permalink to .is()")
=======================================

  Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

     [.last()](../../last "Permalink to .last()")
=============================================

  Reduce the set of matched elements to the final one in the set.

     [.map()](../../map "Permalink to .map()")
==========================================

  Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

     [.not()](../../not "Permalink to .not()")
==========================================

  Remove elements from the set of matched elements.

     [.odd()](../../odd "Permalink to .odd()")
==========================================

  Reduce the set of matched elements to the odd ones in the set, numbered from zero.

     [.slice()](../../slice "Permalink to .slice()")
================================================

  Reduce the set of matched elements to a subset specified by a range of indices.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/traversing/filtering>

Category: DOM Removal
=====================

 
These methods allow us to delete elements from the DOM.

    [.detach()](../../detach "Permalink to .detach()")
===================================================

  Remove the set of matched elements from the DOM.

     [.empty()](../../empty "Permalink to .empty()")
================================================

  Remove all child nodes of the set of matched elements from the DOM.

     [.remove()](../../remove "Permalink to .remove()")
===================================================

  Remove the set of matched elements from the DOM.

     [.unwrap()](../../unwrap "Permalink to .unwrap()")
===================================================

  Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/dom-removal>

Category: Browser Events
========================

   [.error()](../../error "Permalink to .error()")
================================================

  Bind an event handler to the “error” JavaScript event.

     [.resize()](../../resize "Permalink to .resize()")
===================================================

  Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.

     [.scroll()](../../scroll "Permalink to .scroll()")
===================================================

  Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/browser-events>

event.data
==========

   event.dataReturns: [Object](types#Object)
------------------------------------------

  **Description:** An optional object of data passed to an event method when the current executing handler is bound. 

 * ####  version added: [1.1](https://api.jquery.com/category/version/1.1/)event.data

 Example:
--------


 Within a `for` loop, pass the value of `i` to the `.on()` method so that the current iteration's value is preserved. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.data demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button>
 
<div id="log"></div>
 
<script>
var logDiv = $( "#log" );
 
for ( var i = 0; i < 5; i++ ) {
  $( "button" ).eq( i ).on( "click", { value: i }, function( event ) {
    var msgs = [
      "button = " + $( this ).index(),
      "event.data.value = " + event.data.value,
      "i = " + i
    ];
    logDiv.append( msgs.join( ", " ) + "<br>" );
  });
}
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.data>

event.isDefaultPrevented()
==========================

   event.isDefaultPrevented()Returns: [Boolean](types#Boolean)
------------------------------------------------------------

  **Description:** Returns whether [event.preventDefault()](event.preventdefault) was ever called on this event object. 

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[event.isDefaultPrevented()](#event-isDefaultPrevented)


	+ This method does not accept any arguments.

 Example:
--------


 Checks whether event.preventDefault() was called.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.isDefaultPrevented>

Category: Event Object
======================

 
jQuery's event system normalizes the event object according to [W3C standards](https://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html). The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.

  #### jQuery.Event Constructor

 The `jQuery.Event` constructor is exposed and can be used when calling [trigger](../../trigger). The `new` operator is optional.

 Check [trigger](../../trigger)'s documentation to see how to combine it with your own event object.

 Example:

 
```
//Create a new jQuery.Event object without the "new" operator.
var e = jQuery.Event( "click" );
 
// trigger an artificial click event
jQuery( "body" ).trigger( e );
```
 As of jQuery 1.6, you can also pass an object to `jQuery.Event()` and its properties will be set on the newly created Event object.

 Example:

 
```
// Create a new jQuery.Event object with specified event properties.
var e = jQuery.Event( "keydown", { keyCode: 64 } );
 
// trigger an artificial keydown event with keyCode 64
jQuery( "body" ).trigger( e );
```
 #### Common Event Properties

 jQuery normalizes the following properties for cross-browser consistency:

 * `target`
* `relatedTarget`
* `pageX`
* `pageY`
* `which`
* `metaKey`

 The following properties are also copied to the event object, though some of their values may be undefined depending on the event:

 altKey, bubbles, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, key, keyCode, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, toElement, view, which

 #### Other Properties

 To access event properties not listed above, use the `event.originalEvent` object:

 
```
// Access the `dataTransfer` property from the `drop` event which
// holds the files dropped into the browser window.
var files = event.originalEvent.dataTransfer.files;
```

    [event.currentTarget](../../event.currenttarget "Permalink to event.currentTarget")
====================================================================================

  The current DOM element within the event bubbling phase.

     [event.data](../../event.data "Permalink to event.data")
=========================================================

  An optional object of data passed to an event method when the current executing handler is bound.

     [event.delegateTarget](../../event.delegatetarget "Permalink to event.delegateTarget")
=======================================================================================

  The element where the currently-called jQuery event handler was attached.

     [event.isDefaultPrevented()](../../event.isdefaultprevented "Permalink to event.isDefaultPrevented()")
=======================================================================================================

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

     [event.isImmediatePropagationStopped()](../../event.isimmediatepropagationstopped "Permalink to event.isImmediatePropagationStopped()")
========================================================================================================================================

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

     [event.isPropagationStopped()](../../event.ispropagationstopped "Permalink to event.isPropagationStopped()")
=============================================================================================================

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

     [event.metaKey](../../event.metakey "Permalink to event.metaKey")
==================================================================

  Indicates whether the META key was pressed when the event fired.

     [event.namespace](../../event.namespace "Permalink to event.namespace")
========================================================================

  The namespace specified when the event was triggered.

     [event.pageX](../../event.pagex "Permalink to event.pageX")
============================================================

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

     [event.pageY](../../event.pagey "Permalink to event.pageY")
============================================================

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

     [event.preventDefault()](../../event.preventdefault "Permalink to event.preventDefault()")
===========================================================================================

  If this method is called, the default action of the event will not be triggered.

     [event.relatedTarget](../../event.relatedtarget "Permalink to event.relatedTarget")
====================================================================================

  The other DOM element involved in the event, if any.

     [event.result](../../event.result "Permalink to event.result")
===============================================================

  The last value returned by an event handler that was triggered by this event, unless the value was undefined.

     [event.stopImmediatePropagation()](../../event.stopimmediatepropagation "Permalink to event.stopImmediatePropagation()")
=========================================================================================================================

  Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

     [event.stopPropagation()](../../event.stoppropagation "Permalink to event.stopPropagation()")
==============================================================================================

  Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

     [event.target](../../event.target "Permalink to event.target")
===============================================================

  The DOM element that initiated the event.

     [event.timeStamp](../../event.timestamp "Permalink to event.timeStamp")
========================================================================

  The difference in milliseconds between the time the browser created the event and January 1, 1970.

     [event.type](../../event.type "Permalink to event.type")
=========================================================

  Describes the nature of the event.

     [event.which](../../event.which "Permalink to event.which")
============================================================

  For key or mouse events, this property indicates the specific key or button that was pressed.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/event-object>

event.type
==========

   event.typeReturns: [String](types#String)
------------------------------------------

  **Description:** Describes the nature of the event.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)event.type

 Example:
--------


 On all anchor clicks, alert the event type.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.type>

event.which
===========

   event.whichReturns: [Number](types#Number)
-------------------------------------------

  **Description:** For key or mouse events, this property indicates the specific key or button that was pressed.

 * ####  version added: [1.1.3](https://api.jquery.com/category/version/1.1.3/)event.which

  The `event.which` property 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 MDN](https://developer.mozilla.org/en/DOM/event.charCode#Notes). 

 `event.which` also normalizes button presses (`mousedown` and `mouseup`events), reporting `1` for left button, `2` for middle, and `3` for right. Use `event.which` instead of `event.button`. 

  Examples:
---------


 Log which key was depressed.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.which demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input id="whichkey" value="type something">
<div id="log"></div>
 
<script>
$( "#whichkey" ).on( "keydown", function( event ) {
  $( "#log" ).html( event.type + ": " +  event.which );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Log which mouse button was depressed.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.which demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input id="whichkey" value="click here">
<div id="log"></div>
 
<script>
$( "#whichkey" ).on( "mousedown", function( event ) {
  $( "#log" ).html( event.type + ": " +  event.which );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.which>

event.isPropagationStopped()
============================

   event.isPropagationStopped()Returns: [Boolean](types#Boolean)
--------------------------------------------------------------

  **Description:**  Returns whether [event.stopPropagation()](event.stoppropagation) was ever called on this event object. 

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[event.isPropagationStopped()](#event-isPropagationStopped)


	+ This method does not accept any arguments.

  This event method is described in the [W3C DOM Level 3 specification](https://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Events-Event-isPropagationStopped).

  Example:
--------


 Checks whether event.stopPropagation() was called

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.isPropagationStopped demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>click me</button>
<div id="stop-log"></div>
 
<script>
function propStopped( event ) {
  var msg = "";
  if ( event.isPropagationStopped() ) {
    msg = "called";
  } else {
    msg = "not called";
  }
  $( "#stop-log" ).append( "<div>" + msg + "</div>" );
}
 
$( "button" ).click(function(event) {
  propStopped( event );
  event.stopPropagation();
  propStopped( event );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.isPropagationStopped>

event.namespace
===============

   event.namespaceReturns: [String](types#String)
-----------------------------------------------

  **Description:** The namespace specified when the event was triggered.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)event.namespace

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

  Example:
--------


 Determine the event namespace used.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.namespace demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>display event.namespace</button>
<p></p>
 
<script>
$( "p" ).on( "test.something", function( event ) {
  alert( event.namespace );
});
$( "button" ).click(function( event ) {
  $( "p" ).trigger( "test.something" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.namespace>

event.metaKey
=============

   event.metaKeyReturns: [Boolean](types#Boolean)
-----------------------------------------------

  **Description:** Indicates whether the META key was pressed when the event fired.

 * ####  version added: [1.0.4](https://api.jquery.com/category/version/1.0.4/)event.metaKey

  Returns a boolean value (`true` or `false`) that indicates whether or not the `META` key was pressed at the time the event fired. This key might map to an alternative key name on some platforms.

 On Macintosh keyboards, the `META` key maps to the [Command key (⌘)](https://en.wikipedia.org/wiki/Command_key).

 On Windows keyboards, the `META` key maps to the [Windows key](https://en.wikipedia.org/wiki/Windows_key).

  Example:
--------


 Determine whether the META key was pressed when the event fired.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.metaKey demo</title>
  <style>
  body {
    background-color: #eef;
  }
  div {
    padding: 20px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button value="Test" name="Test" id="checkMetaKey">Click me!</button>
<div id="display"></div>
 
<script>
$( "#checkMetaKey" ).click(function( event ) {
  $( "#display" ).text( event.metaKey );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.metaKey>

event.pageY
===========

   event.pageYReturns: [Number](types#Number)
-------------------------------------------

  **Description:** The mouse position relative to the top edge of the document.

 * ####  version added: [1.0.4](https://api.jquery.com/category/version/1.0.4/)event.pageY

 Example:
--------


 Show the mouse position relative to the left and top edges of the document (within this iframe).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.pageY demo</title>
  <style>
  body {
    background-color: #eef;
  }
  div {
    padding: 20px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.pageY>

event.isImmediatePropagationStopped()
=====================================

   event.isImmediatePropagationStopped()Returns: [Boolean](types#Boolean)
-----------------------------------------------------------------------

  **Description:**  Returns whether event.stopImmediatePropagation() was ever called on this event object. 

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[event.isImmediatePropagationStopped()](#event-isImmediatePropagationStopped)


	+ This method does not accept any arguments.

  This property was introduced in [DOM level 3](https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event-isImmediatePropagationStopped).

  Example:
--------


 Checks whether event.stopImmediatePropagation() was called.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.isImmediatePropagationStopped demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>click me</button>
<div id="stop-log"></div>
 
<script>
function immediatePropStopped( event ) {
  var msg = "";
  if ( event.isImmediatePropagationStopped() ) {
    msg = "called";
  } else {
    msg = "not called";
  }
  $( "#stop-log" ).append( "<div>" + msg + "</div>" );
}
 
$( "button" ).click(function( event ) {
  immediatePropStopped( event );
  event.stopImmediatePropagation();
  immediatePropStopped( event );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.isImmediatePropagationStopped>

event.pageX
===========

   event.pageXReturns: [Number](types#Number)
-------------------------------------------

  **Description:** The mouse position relative to the left edge of the document.

 * ####  version added: [1.0.4](https://api.jquery.com/category/version/1.0.4/)event.pageX

 Example:
--------


 Show the mouse position relative to the left and top edges of the document (within this iframe).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.pageX demo</title>
  <style>
  body {
    background-color: #eef;
  }
  div {
    padding: 20px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.pageX>

event.delegateTarget
====================

   event.delegateTargetReturns: [Element](types#Element)
------------------------------------------------------

  **Description:** The element where the currently-called jQuery event handler was attached.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)event.delegateTarget

  This property is most often useful in delegated events attached by [`.delegate()`](delegate) or [`.on()`](on), where the event handler is attached at an ancestor of the element being processed. It can be used, for example, to identify and remove event handlers at the delegation point.

 For non-delegated event handlers attached directly to an element, `event.delegateTarget` will always be equal to `event.currentTarget`.

  Example:
--------


 When a button in any box class is clicked, change the box's background color to red.

 
```
$( ".box" ).on( "click", "button", function( event ) {
  $( event.delegateTarget ).css( "background-color", "red" );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.delegateTarget>

event.relatedTarget
===================

   event.relatedTargetReturns: [Element](types#Element)
-----------------------------------------------------

  **Description:** The other DOM element involved in the event, if any.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)event.relatedTarget

  For `mouseout`, indicates the element being entered; for `mouseover`, indicates the element being exited. 

  Example:
--------


 On mouseout of anchors, alert the element type being entered.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.relatedTarget>

event.result
============

   event.resultReturns: [Object](types#Object)
--------------------------------------------

  **Description:** The last value returned by an event handler that was triggered by this event, unless the value was `undefined`.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)event.result

  This property can be useful for getting previous return values of custom events. 

  Example:
--------


 Display previous handler's return value

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.result demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>display event.result</button>
<p></p>
 
<script>
$( "button" ).click(function( event ) {
  return "hey";
});
$( "button" ).click(function( event ) {
  $( "p" ).html( event.result );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.result>

event.stopImmediatePropagation()
================================

   event.stopImmediatePropagation()Returns: [undefined](types#undefined)
----------------------------------------------------------------------

  **Description:** Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[event.stopImmediatePropagation()](#event-stopImmediatePropagation)


	+ This method does not accept any arguments.

  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()](event.stoppropagation)` instead.

 Use `[event.isImmediatePropagationStopped()](event.isimmediatepropagationstopped)` to know whether this method was ever called (on that event object).

  ### Additional Notes:

 * Since the [`.live()`](live) method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by `[.delegate()](delegate)` will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling `[event.stopPropagation()](event.stoppropagation)` or returning `false`.
 Example:
--------


 Prevents other event handlers from being called.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.stopImmediatePropagation demo</title>
  <style>
  p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
  }
  div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>paragraph</p>
<div>division</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.stopImmediatePropagation>

event.timeStamp
===============

   event.timeStampReturns: [Number](types#Number)
-----------------------------------------------

  **Description:** The difference in milliseconds between the time the browser created the event and January 1, 1970.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)event.timeStamp

  This property can be useful for profiling event performance by getting the `event.timeStamp` value at two points in the code and noting the difference. To simply determine the current time inside an event handler, use `(new Date).getTime()` instead.

 Note: Due to a [bug open since 2004](https://bugzilla.mozilla.org/show_bug.cgi?id=238041), this value is not populated correctly in Firefox and it is not possible to know the time the event was created in that browser.

  Example:
--------


 Display the time since the click handler last executed.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.timeStamp demo</title>
  <style>
  div {
    height: 100px;
    width: 300px;
    margin: 10px;
    background-color: #ffd;
    overflow: auto;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>Click.</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.timeStamp>

event.target
============

   event.targetReturns: [Element](types#Element)
----------------------------------------------

  **Description:**  The DOM element that initiated the event. 

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)event.target

  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.

  Examples:
---------


 Display the tag's name on click

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.target demo</title>
  <style>
  span, strong, p {
    padding: 8px;
    display: block;
    border: 1px solid #999;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
 
<script>
$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Implements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.target demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>
 
<script>
function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.target>

event.preventDefault()
======================

   event.preventDefault()Returns: [undefined](types#undefined)
------------------------------------------------------------

  **Description:** If this method is called, the default action of the event will not be triggered.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[event.preventDefault()](#event-preventDefault)


	+ This method does not accept any arguments.

  For example, clicked anchors will not take the browser to a new URL. We can use [`event.isDefaultPrevented()`](event.isdefaultprevented) to determine if this method has been called by an event handler that was triggered by this event.

  Example:
--------


 Cancel the default action (navigation) of the click.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.preventDefault demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<a href="https://jquery.com">default click action is prevented</a>
<div id="log"></div>
 
<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( "<div>" )
    .append( "default " + event.type + " prevented" )
    .appendTo( "#log" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.preventDefault>

Category: Fading
================

 
These methods adjust the opacity of elements.

    [.fadeIn()](../../fadein "Permalink to .fadeIn()")
===================================================

  Display the matched elements by fading them to opaque.

     [.fadeOut()](../../fadeout "Permalink to .fadeOut()")
======================================================

  Hide the matched elements by fading them to transparent.

     [.fadeTo()](../../fadeto "Permalink to .fadeTo()")
===================================================

  Adjust the opacity of the matched elements.

     [.fadeToggle()](../../fadetoggle "Permalink to .fadeToggle()")
===============================================================

  Display or hide the matched elements by animating their opacity.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/effects/fading>

event.stopPropagation()
=======================

   event.stopPropagation()Returns: [undefined](types#undefined)
-------------------------------------------------------------

  **Description:** Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[event.stopPropagation()](#event-stopPropagation)


	+ This method does not accept any arguments.

  We can use `[event.isPropagationStopped()](event.ispropagationstopped)` to determine if this method was ever called (on that event object). 

 This method works for custom events triggered with [trigger()](trigger) as well.

 Note that this will not prevent other handlers *on the same element* from running. 

  ### Additional Notes:

 * Since the [`.live()`](live) method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by `[.delegate()](delegate)` will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling `[event.stopPropagation()](event.stoppropagation)` or returning `false`.
 Example:
--------


 Kill the bubbling on the click event.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/event.stopPropagation>

.find()
=======

   .find( selector )Returns: [jQuery](types#jQuery)
-------------------------------------------------

  **Description:** Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.find( selector )](#find-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.find( element )](#find-element)


	+ **element** Type: [Element](types#Element) or [jQuery](types#jQuery)  An element or a jQuery object to match elements against.

  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.

 The first signature for the `.find()`method accepts a selector expression of the same type that we can pass to the `$()` function. The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. The expressions allowed include selectors like `> p` which will find all the paragraphs that are children of the elements in the jQuery object.

 Consider a page with a basic nested list on it:

 
```
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
```
 If we begin at item II, we can find list items within it:

 
```
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );
```
 The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.

  Unlike most of the tree traversal methods, the selector expression is required in a call to `.find()`. If we need to retrieve all of the descendant elements, we can pass in the universal selector `'*'` to accomplish this.

  [Selector context](jquery#selector-context) is implemented with the `.find()` `method;` therefore, `$( "li.item-ii" ).find( "li" )` is equivalent to `$( "li", "li.item-ii" )`.

 **As of jQuery 1.6**, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:

 
```
var allListElements = $( "li" );
```
 And then pass this jQuery object to find:

 
```
$( "li.item-ii" ).find( allListElements );
```
 This will return a jQuery collection which contains only the list elements that are descendants of item II.

 Similarly, an element may also be passed to find:

 
```
var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );
```
 The result of this call would be a red background on item 1.

  Examples:
---------


 Starts with all paragraphs and searches for descendant span elements, same as `$( "p span" )`

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>find demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
 
<script>
$( "p" ).find( "span" ).css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>find demo</title>
  <style>
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
 
<script>
var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Add spans around each word then add a hover and italicize words with the letter **t**.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>find demo</title>
  <style>
  p {
    font-size: 20px;
    width: 200px;
    color: blue;
    font-weight: bold;
    margin: 0 10px;
  }
  .hilite {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  When the day is short
  find that which matters to you
  or stop believing
</p>
 
<script>
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
newText = "<span>" + newText + "</span>";
 
$( "p" )
  .html( newText )
  .find( "span" )
    .hover(function() {
      $( this ).addClass( "hilite" );
    }, function() {
      $( this ).removeClass( "hilite" );
    })
  .end()
  .find( ":contains('t')" )
    .css({
      "font-style": "italic",
      "font-weight": "bolder"
    });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/find>

.first()
========

   .first()Returns: [jQuery](types#jQuery)
----------------------------------------

  **Description:** Reduce the set of matched elements to the first in the set.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.first()](#first)


	+ This method does not accept any arguments.

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

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).first().css( "background-color", "red" );
```
 The result of this call is a red background for the first item.

  Example:
--------


 Highlight the first item in a list.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first demo</title>
  <style>
  .highlight {
    background-color: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>Look:</li>
  <li>This is some text in a list.</li>
  <li>This is a note about it.</li>
  <li>This is another note about it.</li>
</ul>
 
<script>
$( "ul li" ).first().addClass( "highlight" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/first>

Category: Child Filter
======================

   [:first-child Selector](../../first-child-selector "Permalink to :first-child Selector")
=========================================================================================

  Selects all elements that are the first child of their parent.

     [:first-of-type Selector](../../first-of-type-selector "Permalink to :first-of-type Selector")
===============================================================================================

  Selects all elements that are the first among siblings of the same element name.

     [:last-child Selector](../../last-child-selector "Permalink to :last-child Selector")
======================================================================================

  Selects all elements that are the last child of their parent.

     [:last-of-type Selector](../../last-of-type-selector "Permalink to :last-of-type Selector")
============================================================================================

  Selects all elements that are the last among siblings of the same element name.

     [:nth-child() Selector](../../nth-child-selector "Permalink to :nth-child() Selector")
=======================================================================================

  Selects all elements that are the nth-child of their parent.

     [:nth-last-child() Selector](../../nth-last-child-selector "Permalink to :nth-last-child() Selector")
======================================================================================================

  Selects all elements that are the nth-child of their parent, counting from the last element to the first.

     [:nth-last-of-type() Selector](../../nth-last-of-type-selector "Permalink to :nth-last-of-type() Selector")
============================================================================================================

  Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

     [:nth-of-type() Selector](../../nth-of-type-selector "Permalink to :nth-of-type() Selector")
=============================================================================================

  Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

     [:only-child Selector](../../only-child-selector "Permalink to :only-child Selector")
======================================================================================

  Selects all elements that are the only child of their parent.

     [:only-of-type Selector](../../only-of-type-selector "Permalink to :only-of-type Selector")
============================================================================================

  Selects all elements that have no siblings with the same element name.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/child-filter-selectors>

.fadeIn()
=========

   .fadeIn( [duration ] [, complete ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------------

  **Description:** Display the matched elements by fading them to opaque.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.fadeIn( [duration ] [, complete ] )](#fadeIn-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.fadeIn( options )](#fadeIn-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.fadeIn( [duration ] [, easing ] [, complete ] )](#fadeIn-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

  The `.fadeIn()` method animates the opacity of the matched elements. It is similar to the `[.fadeTo()](fadeto)` method but that method does not unhide the element and can specify the final opacity level.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively. If any other string is supplied, or if the `duration` parameter is omitted, the default duration of `400` milliseconds is used.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
 
// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
  });
});
```
  ![]` effect  #### Easing

 **As of jQuery 1.4.3**, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 #### Callback Function

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole. 

 **As of jQuery 1.6**, the `[.promise()](promise)` method can be used in conjunction with the `[deferred.done()](deferred.done)` method to execute a single callback for the animation as a whole when *all* matching elements have completed their animations ( See the [example for .promise()](promise#example-1) ). 

  ### Additional Notes:

 * All jQuery effects, including `.fadeIn()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  span {
    color: red;
    cursor: pointer;
  }
  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( document.body ).click(function() {
  $( "div:hidden" ).first().fadeIn( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn demo</title>
  <style>
  p {
    position: relative;
    width: 400px;
    height: 90px;
  }
  div {
    position: absolute;
    width: 400px;
    height: 65px;
    font-size: 36px;
    text-align: center;
    color: yellow;
    background: red;
    padding-top: 25px;
    top: 0;
    left: 0;
    display: none;
  }
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  Let it be known that the party of the first part
  and the party of the second part are henceforth
  and hereto directed to assess the allegations
  for factual correctness... (<a href="#">click!</a>)
  <div><span>CENSORED!</span></div>
</p>
 
<script>
$( "a" ).click(function() {
  $( "div" ).fadeIn( 3000, function() {
    $( "span" ).fadeIn( 100 );
  });
  return false;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/fadeIn>

.fadeOut()
==========

   .fadeOut( [duration ] [, complete ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------------

  **Description:** Hide the matched elements by fading them to transparent.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.fadeOut( [duration ] [, complete ] )](#fadeOut-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.fadeOut( options )](#fadeOut-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.fadeOut( [duration ] [, easing ] [, complete ] )](#fadeOut-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

  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.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively. If any other string is supplied, or if the `duration` parameter is omitted, the default duration of `400` milliseconds is used.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
```
 With the element initially shown, we can hide it slowly:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});
```
  ![].

  #### Easing

 **As of jQuery 1.4.3**, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 #### Callback Function

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 **As of jQuery 1.6**, the `[.promise()](promise)` method can be used in conjunction with the `[deferred.done()](deferred.done)` method to execute a single callback for the animation as a whole when *all* matching elements have completed their animations ( See the [example for .promise()](promise#example-1) ). 

  ### Additional Notes:

 * All jQuery effects, including `.fadeOut()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Animates all paragraphs to fade out, completing the animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  p {
    font-size: 150%;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  If you click on this paragraph
  you'll see it just fade away.
</p>
 
<script>
$( "p" ).click(function() {
  $( "p" ).fadeOut( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Fades out spans in one section that you click on.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  span {
    cursor: pointer;
  }
  span.hilite {
    background: yellow;
  }
  div {
    display: inline;
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<h3>Find the modifiers - <div></div></h3>
<p>
  If you <span>really</span> want to go outside
  <span>in the cold</span> then make sure to wear
  your <span>warm</span> jacket given to you by
  your <span>favorite</span> teacher.
</p>
 
<script>
$( "span" ).click(function() {
  $( this ).fadeOut( 1000, function() {
    $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
    $( this ).remove();
  });
});
$( "span" ).hover(function() {
  $( this ).addClass( "hilite" );
}, function() {
  $( this ).removeClass( "hilite" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Fades out two divs, one with a "linear" easing and one with the default, "swing," easing.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  .box,
  button {
    float: left;
    margin: 5px 10px 5px 0;
  }
  .box {
    height: 80px;
    width: 80px;
    background: #090;
  }
  #log {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="btn1">fade out</button>
<button id="btn2">show</button>
 
<div id="log"></div>
 
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
 
<script>
$( "#btn1" ).click(function() {
  function complete() {
    $( "<div>" ).text( this.id ).appendTo( "#log" );
  }
  $( "#box1" ).fadeOut( 1600, "linear", complete );
  $( "#box2" ).fadeOut( 1600, complete );
});
 
$( "#btn2" ).click(function() {
  $( "div" ).show();
  $( "#log" ).empty();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/fadeOut>

.fadeTo()
=========

   .fadeTo( duration, opacity [, complete ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------------------

  **Description:** Adjust the opacity of the matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.fadeTo( duration, opacity [, complete ] )](#fadeTo-duration-opacity-complete)


	+ **duration** Type: [String](types#String) or [Number](types#Number)  A string or number determining how long the animation will run.
	+ **opacity** Type: [Number](types#Number)  A number between 0 and 1 denoting the target opacity.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.fadeTo( duration, opacity [, easing ] [, complete ] )](#fadeTo-duration-opacity-easing-complete)


	+ **duration** Type: [String](types#String) or [Number](types#Number)  A string or number determining how long the animation will run.
	+ **opacity** Type: [Number](types#Number)  A number between 0 and 1 denoting the target opacity.
	+ **easing** Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete.

  The `.fadeTo()` method animates the opacity of the matched elements. It is similar to the `[.fadeIn()](fadein)` method but that method unhides the element and always fades to 100% opacity.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively. If any other string is supplied, the default duration of `400` milliseconds is used. Unlike the other effect methods, `.fadeTo()` requires that `duration` be explicitly specified.

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially shown, we can dim it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).fadeTo( "slow" , 0.5, function() {
    // Animation complete.
  });
});
```
  ![]`.

  ### Additional Notes:

 * All jQuery effects, including `.fadeTo()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
Click this paragraph to see it fade.
</p>
 
<p>
Compare to this one that won't fade.
</p>
 
<script>
$( "p" ).first().click(function() {
  $( this ).fadeTo( "slow", 0.33 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Fade div to a random opacity on each click, completing the animation within 200 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo demo</title>
  <style>
  p {
    width: 80px;
    margin: 0;
    padding: 5px;
  }
  div {
    width: 40px;
    height: 40px;
    position: absolute;
  }
  #one {
    top: 0;
    left: 0;
    background: #f00;
  }
  #two {
    top: 20px;
    left: 20px;
    background: #0f0;
  }
  #three {
    top: 40px;
    left:40px;
    background:#00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>And this is the library that John built...</p>
 
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( "div" ).click(function() {
  $( this ).fadeTo( "fast", Math.random() );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo demo</title>
  <style>
  div, p {
    width: 80px;
    height: 40px;
    top: 0;
    margin: 0;
    position: absolute;
    padding-top: 8px;
  }
  p {
    background: #fcc;
    text-align: center;
  }
  div {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Wrong</p>
<div></div>
<p>Wrong</p>
<div></div>
<p>Right!</p>
<div></div>
 
<script>
var getPos = function( n ) {
  return (Math.floor( n ) * 90) + "px";
};
$( "p" ).each(function( n ) {
  var r = Math.floor( Math.random() * 3 );
  var tmp = $( this ).text();
  $( this ).text( $( "p" ).eq( r ).text() );
  $( "p" ).eq( r ).text( tmp );
  $( this ).css( "left", getPos( n ) );
});
$( "div" )
  .each(function( n ) {
    $( this ).css( "left", getPos( n ) );
  })
  .css( "cursor", "pointer" )
  .click( function() {
    $( this ).fadeTo( 250, 0.25, function() {
      $( this )
        .css( "cursor", "" )
        .prev()
          .css({
            "font-weight": "bolder",
            "font-style": "italic"
          });
    });
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/fadeTo>

.fadeToggle()
=============

   .fadeToggle( [duration ] [, easing ] [, complete ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------------------------------------

  **Description:** Display or hide the matched elements by animating their opacity.

 * ####  version added: [1.4.4](https://api.jquery.com/category/version/1.4.4/)[.fadeToggle( [duration ] [, easing ] [, complete ] )](#fadeToggle-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.4.4](https://api.jquery.com/category/version/1.4.4/)[.fadeToggle( options )](#fadeToggle-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))

  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.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively.

 #### Easing

 The string representing an easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 #### Callback Function

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 **As of jQuery 1.6**, the `[.promise()](promise)` method can be used in conjunction with the `[deferred.done()](deferred.done)` method to execute a single callback for the animation as a whole when *all* matching elements have completed their animations ( See the [example for .promise()](promise#example-1) ). 

  ### Additional Notes:

 * All jQuery effects, including `.fadeToggle()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Example:
--------


 Fades first paragraph in or out, completing the animation within 600 milliseconds and using a linear easing. Fades last paragraph in or out for 200 milliseconds, inserting a "finished" message upon completion. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeToggle demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/fadeToggle>

:file Selector
==============

  file selector
-------------

  **Description:** Selects all elements of type file.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":file" )

  `:file` is equivalent to `[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. 

  ### Additional Notes:

 * Because `:file` is a jQuery extension and not part of the CSS specification, queries using `:file` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="file"]` instead.
 Example:
--------


 Finds all file inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>file demo</title>
  <style>
  textarea {
    height: 45px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select><option>Option</option></select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>
 
<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( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/file-selector>

.filter()
=========

   .filter( selector )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Reduce the set of matched elements to those that match the selector or pass the function's test. 

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.filter( selector )](#filter-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match the current set of elements against.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.filter( function )](#filter-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Element](types#Element) element ) => [Boolean](types#Boolean)  A function used as a test for each element in the set. `this` is the current DOM element.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.filter( elements )](#filter-elements)


	+ **elements** Type: [Element](types#Element)  One or more DOM elements to match the current set of elements against.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.filter( selection )](#filter-selection)


	+ **selection** Type: [jQuery](types#jQuery)  An existing jQuery object to match the current set of elements against.

  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.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );
```
 The result of this call is a red background for items 2, 4, and 6, as they match the selector.

 #### Using a Filter Function

 The second form of this method allows us to filter elements against a function rather than a selector. For each element, if the function returns `true` (or a "truthy" value), the element will be included in the filtered set; otherwise, it will be excluded. Suppose we have a somewhat more involved HTML snippet:

 
```
<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
```
 We can select the list items, then filter them based on their contents:

 
```
$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );
```
 This code will alter the first list item only, as it contains exactly one `<strong>` tag. Within the filter function, `this` refers to each DOM element in turn. The parameter passed to the function tells us the index of that DOM element within the set matched by the jQuery object.

 We can also take advantage of the `index` passed through the function, which indicates the 0-based position of the element within the unfiltered set of matched elements:

 
```
$( "li" )
  .filter(function( index ) {
    return index % 3 === 2;
  })
    .css( "background-color", "red" );
```
 This alteration to the code will cause the third and sixth list items to be highlighted, as it uses the modulus operator (`%`) to select every item with an `index` value that, when divided by 3, has a remainder of `2`.

 **Note:** When a CSS selector string is passed to `.filter()`, text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When a specific node or array of nodes are provided, a text or comment node will be included in the resulting jQuery object only if it matches one of the nodes in the filtering array.

  Examples:
---------


 Change the color of all divs; then add a border to those with a "middle" class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 2px white solid;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
 
<script>
$( "div" )
  .css( "background", "#c8ebcc" )
  .filter( ".middle" )
    .css( "border-color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Change the color of all divs; then add a border to the second one (index == 1) and the div with an id of "fourth."

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 3px white solid;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
 
<script>
$( "div" )
  .css( "background", "#b4b0da" )
  .filter(function( index ) {
    return index === 1 || $( this ).attr( "id" ) === "fourth";
  })
    .css( "border", "3px double red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Select all divs and filter the selection with a DOM element, keeping only the one with an id of "unique".

 
```
$( "div" ).filter( document.getElementById( "unique" ) );
```
   Select all divs and filter the selection with a jQuery object, keeping only the one with an id of "unique".

 
```
$( "div" ).filter( $( "#unique" ) );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/filter>

.finish()
=========

   .finish( [queue ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)[.finish( [queue ] )](#finish-queue)


	+ **queue** (default: `'fx'`) Type: [String](types#String)  The name of the queue in which to stop animations.

  When `.finish()` is called on an element, the currently-running animation and all queued animations (if any) immediately stop and their CSS properties set to their target values. All queued animations are removed.

 If the first argument is provided, only the animations in the queue represented by that string will be stopped.

 The `.finish()` method is similar to `.stop(true, true)` in that it clears the queue and the current animation jumps to its end value. It differs, however, in that `.finish()` also causes the CSS property of all *queued* animations to jump to their end values, as well.

  Animations may be stopped globally by setting the property `$.fx.off` to `true`. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

   Example:
--------


 Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>finish demo</title>
  <style>
  .box {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: black;
  }
  #path {
    height: 244px;
    font-size: 70%;
    border-left: 2px dashed red;
    border-bottom: 2px dashed green;
    border-right: 2px dashed blue;
  }
  button {
    width: 12em;
    display: block;
    text-align: left;
    margin: 0 auto;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="box"></div>
<div id="path">
  <button id="go">Go</button>
  <br>
  <button id="bstt" class="b">.stop( true,true )</button>
  <button id="bcf" class="b">.clearQueue().finish()</button>
  <br>
  <button id="bstf" class="b">.stop( true, false )</button>
  <button id="bcs" class="b">.clearQueue().stop()</button>
  <br>
  <button id="bsff" class="b">.stop( false, false )</button>
  <button id="bs" class="b">.stop()</button>
  <br>
  <button id="bsft" class="b">.stop( false, true )</button>
  <br>
  <button id="bf" class="b">.finish()</button>
</div>
 
<script>
var horiz = $( "#path" ).width() - 20,
  vert = $( "#path" ).height() - 20;
 
var btns = {
  bstt: function() {
    $( "div.box" ).stop( true, true );
  },
  bs: function() {
    $( "div.box" ).stop();
  },
  bsft: function() {
    $( "div.box" ).stop( false, true );
  },
  bf: function() {
    $( "div.box" ).finish();
  },
  bcf: function() {
    $( "div.box" ).clearQueue().finish();
  },
  bsff: function() {
    $( "div.box" ).stop( false, false );
  },
  bstf: function() {
    $( "div.box" ).stop( true, false );
  },
  bcs: function() {
    $( "div.box" ).clearQueue().stop();
  }
};
 
$( "button.b" ).on( "click", function() {
  btns[ this.id ]();
});
 
$( "#go" ).on( "click", function() {
  $( ".box" )
    .clearQueue()
    .stop()
    .css({
      left: 10,
      top: 10
    })
    .animate({
      top: vert
    }, 3000 )
    .animate({
      left: horiz
    }, 3000 )
    .animate({
      top: 10
    }, 3000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/finish>

:first-child Selector
=====================

  first-child selector
--------------------

  **Description:** Selects all elements that are the first child of their parent.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)jQuery( ":first-child" )

  While [.first()](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)`.

  Example:
--------


 Finds the first span in each matched div to underline and add a hover state.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first-child demo</title>
  <style>
  span {
    color: #008;
  }
  span.sogreen {
    color: green;
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>
 
<script>
$( "div span:first-child" )
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/first-child-selector>

:first Selector
===============

   first selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
--------------------------------------------------------------------------------------

  **Description:** Selects the first matched DOM element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":first" )

   **As of jQuery 3.4**, the `:first` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.first()`](first).

  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](first-child-selector) can match more than one: One for each parent.

  ### Additional Notes:

 * Because `:first` is a jQuery extension and not part of the CSS specification, queries using `:first` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:first` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":first")`](filter).
* Selected elements are in the order of their appearance in the document.
 Example:
--------


 Finds the first table row.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first demo</title>
  <style>
  td {
    color: blue;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>
 
<script>
$( "tr:first" ).css( "font-style", "italic" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/first-selector>

.focus()
========

   .focus( handler )Returns: [jQuery](types#jQuery)
-------------------------------------------------

  **Description:** Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.focus( handler )](#focus-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.focus( [eventData ], handler )](#focus-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.focus()](#focus)


	+ This signature does not accept any arguments.

  * This method is a shortcut for `.on( "focus", handler )` in the first and second variations, and `.trigger( "focus" )` in the third.
* The `focus` event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (`<input>`, `<select>`, etc.) and links (`<a href>`). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's `tabindex` property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
* Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.

  Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use `.focus()` on elements that are visible. To run an element's focus event handlers without setting focus to the element, use `.triggerHandler( "focus" )` instead of `.focus()`.

  For example, consider the HTML:

 
```
<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the first input field:

 
```
$( "#target" ).focus(function() {
  alert( "Handler for .focus() called." );
});
```
 Now clicking on the first field, or tabbing to it from another field, displays the alert:

  `Handler for .focus() called.` 

 We can trigger the event when another element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#target" ).focus();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message.

 The `focus` event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the `focus` event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping `focus` to the `focusin` event in its event delegation methods, [`.live()`](live) and [`.delegate()`](delegate).

  ### Additional Notes:

 * As the `.focus()` method is just a shorthand for `.on( "focus", handler )`, detaching is possible using `.off( "focus" )`.
 Examples:
---------


 Fire focus.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <style>
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><input type="text"> <span>focus fire</span></p>
<p><input type="password"> <span>focus fire</span></p>
 
<script>
$( "input" ).focus(function() {
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   To stop people from writing in text input boxes, try:

 
```
$( "input[type=text]" ).focus(function() {
  $( this ).blur();
});
```
   To focus on a login input box with id 'login' on page startup, try:

 
```
$( document ).ready(function() {
  $( "#login" ).focus();
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/focus>

:focus Selector
===============

  focus selector
--------------

  **Description:** Selects element if it is currently focused.

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)jQuery( ":focus" )

  As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede `:focus` with a tag name or some other selector; otherwise, the universal selector ( "\*" ) is implied. In other words, the bare `$( ":focus" )` is equivalent to `$( "*:focus" )`. If you are looking for the currently focused element, `$( document.activeElement )` will retrieve it without having to search the whole DOM tree.

  Example:
--------


 Adds the focused class to whatever element has focus

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <style>
  .focused {
    background: #abcdef;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="content">
  <input tabIndex="1">
  <input tabIndex="2">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <div tabIndex="4">
    a div
  </div>
</div>
 
<script>
$( "#content" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/focus-selector>

:first-of-type Selector
=======================

  first-of-type selector
----------------------

  **Description:** Selects all elements that are the first among siblings of the same element name.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":first-of-type" )

  The `:first-of-type` selector matches elements that have no other element with both the same parent and the same element name coming before it in the document tree.

  Example:
--------


 Find the first span in each matched div and add a class to it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first-of-type demo</title>
  <style>
  span.fot {
    color: red;
    font-size: 120%;
    font-style: italic;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <b>Nobody,</b>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo</span>
</div>
 
<script>
$( "span:first-of-type" ).addClass( "fot" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/first-of-type-selector>

.focusin()
==========

   .focusin( handler )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Bind an event handler to the "focusin" event.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.focusin( handler )](#focusin-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.focusin( [eventData ], handler )](#focusin-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.focusin()](#focusin)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "focusin", handler )` in the first two variations, and `.trigger( "focusin" )` in the third.

 The `focusin` event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the <focus> event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

 This event will likely be used together with the <focusout> event.

  ### Additional Notes:

 * As the `.focusin()` method is just a shorthand for `.on( "focusin", handler )`, detaching is possible using `.off( "focusin" )`.
 Example:
--------


 Watch for a focus to occur within the paragraphs on the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focusin demo</title>
  <style>
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><input type="text"> <span>focusin fire</span></p>
<p><input type="password"> <span>focusin fire</span></p>
 
<script>
$( "p" ).focusin(function() {
  $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/focusin>

.focusout()
===========

   .focusout( handler )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Bind an event handler to the "focusout" JavaScript event.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.focusout( handler )](#focusout-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.focusout( [eventData ], handler )](#focusout-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.focusout()](#focusout)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "focusout", handler )` when passed arguments, and `.trigger( "focusout" )` when no arguments are passed.

 The `focusout` event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the <blur> event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

 This event will likely be used together with the <focusin> event.

  ### Additional Notes:

 * As the `.focusout()` method is just a shorthand for `.on( "focusout", handler )`, detaching is possible using `.off( "focusout" )`.
 Example:
--------


 Watch for a loss of focus to occur inside paragraphs and note the difference between the `focusout` count and the `blur` count. (The `blur` count does not change because those events do not bubble.)

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focusout demo</title>
  <style>
  .inputs {
    float: left;
    margin-right: 1em;
  }
  .inputs p {
    margin-top: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="inputs">
  <p>
    <input type="text"><br>
    <input type="text">
  </p>
  <p>
    <input type="password">
  </p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
 
<script>
var focus = 0,
  blur = 0;
$( "p" )
  .focusout(function() {
    focus++;
    $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
  })
  .blur(function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/focusout>

Category: DOM Element Methods
=============================

   [.get()](../../get "Permalink to .get()")
==========================================

  Retrieve the DOM elements matched by the jQuery object.

     [.index()](https://api.jquery.com/index/ "Permalink to .index()")
==================================================================

  Search for a given element from among the matched elements.

     [.size()](../../size "Permalink to .size()")
=============================================

  Return the number of elements in the jQuery object.

     [.toArray()](../../toarray "Permalink to .toArray()")
======================================================

  Retrieve all the elements contained in the jQuery set, as an array.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/miscellaneous/dom-element-methods>

.get()
======

  Retrieve the DOM elements matched by the jQuery object. #### Contents:

 * [.get( index )](#get1)
	+ [.get( index )](#get-index)
* [.get()](#get2)
	+ [.get()](#get)

 
 .get( index )Returns: [Element](types#Element)
-----------------------------------------------

  **Description:** Retrieve one of the elements matched by the jQuery object.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.get( index )](#get-index)


	+ **index** Type: [Integer](types#Integer)  A zero-based integer indicating which element to retrieve.

  The `.get()` method grants access to the DOM nodes underlying each jQuery object. If the value of `index` is out of bounds — less than the negative number of elements or equal to or greater than the number of elements — it returns `undefined`. Consider a simple unordered list:

 
```
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>
```
 With an index specified, `.get( index )` retrieves a single element:

 
```
console.log( $( "li" ).get( 0 ) );
```
 Since the index is zero-based, the first list item is returned:

  `<li id="foo">` 

 Each jQuery object also masquerades as an array, so we can use the array dereferencing operator to get at the list item instead:

 
```
console.log( $( "li" )[ 0 ] );
```
 However, this syntax lacks some of the additional capabilities of .get(), such as specifying a negative index:

 
```
console.log( $( "li" ).get( -1 ) );
```
 A negative index is counted from the end of the matched set, so this example returns the last item in the list:

  `<li id="bar">` 

  Example:
--------


 Display the tag name of the click element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>get demo</title>
  <style>
  span {
    color: red;
  }
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>&nbsp;</span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text"></div>
 
<script>
$( "*", document.body ).click(function( event ) {
  event.stopPropagation();
  var domElement = $( this ).get( 0 );
  $( "span" ).first().text( "Clicked on - " + domElement.nodeName );
});
</script>
 
</body>
</html>
```
 #### Demo:

   .get()Returns: [Array](types#Array)
------------------------------------

  **Description:** Retrieve the elements matched by the jQuery object.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.get()](#get)


	+ This method does not accept any arguments.

  Consider a simple unordered list:

 
```
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>
```
 Without a parameter, `.get()` returns an array of all of the elements:

 
```
console.log( $( "li" ).get() );
```
 All of the matched DOM nodes are returned by this call, contained in a standard array:

  [<li id="foo">, <li id="bar">] 

  Example:
--------


 Select all divs in the document and return the DOM Elements as an Array; then use the built-in reverse() method to reverse that array.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>get demo</title>
  <style>
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Reversed - <span></span>
 
<div>One</div>
<div>Two</div>
<div>Three</div>
 
<script>
function display( divs ) {
  var a = [];
  for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
  }
  $( "span" ).text( a.join(" ") );
}
display( $( "div" ).get().reverse() );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/get>

:gt() Selector
==============

   gt selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
-----------------------------------------------------------------------------------

  **Description:** Select all elements at an index greater than `index` within the matched set.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":gt(index)" )

 **index:** Zero-based index.
* ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)jQuery( ":gt(-index)" )

 **indexFromEnd:** Zero-based index, counting backwards from the last element.

   **As of jQuery 3.4**, the `:gt` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.slice()`](slice). For example, `:gt(3)` can be replaced with a call to `.slice( 4 )` (the provided index needs to be increased by one).

   **index-related selectors** 

 The index-related selector expressions (including this "greater than" selector) 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.

 Note that since JavaScript arrays use *0-based indexing*, these selectors reflect that fact. This is why `$( ".myclass:gt(1)" )` selects elements after the second element in the document with the class `myclass`, rather than after the first. In contrast, `:nth-child(n)` uses *1-based indexing* to conform to the CSS specification.

 Prior to jQuery 1.8, the `:gt(index)` selector did *not* accept a negative value for `index`

  ### Additional Notes:

 * Because `:gt()` is a jQuery extension and not part of the CSS specification, queries using `:gt()` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `$("your-pure-css-selector").slice(index)` instead.
 Example:
--------


 Give TD #5 and higher a yellow background and TD #8 a red text color.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gt demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/gt-selector>

.has()
======

   .has( selector )Returns: [jQuery](types#jQuery)
------------------------------------------------

  **Description:** Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.has( selector )](#has-selector)


	+ **selector** Type: [String](types#String)  A string containing a selector expression to match elements against.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.has( contained )](#has-contained)


	+ **contained** Type: [Element](types#Element)  A DOM element to match elements against.

  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.

 Consider a page with a nested list as follows:

 
```
 <ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
```
 We can apply this method to the set of list items as follows:

 
```
$( "li" ).has( "ul" ).css( "background-color", "red" );
```
 The result of this call is a red background for item 2, as it is the only `<li>` that has a `<ul>` among its descendants.

  Example:
--------


 Check if an element is inside another.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has demo</title>
  <style>
  .full {
    border: 1px solid red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul><li>Does the UL contain an LI?</li></ul>
 
<script>
$( "ul" ).append( "<li>" +
  ( $( "ul" ).has( "li" ).length ? "Yes" : "No" ) +
  "</li>" );
$( "ul" ).has( "li" ).addClass( "full" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/has>

Has Attribute Selector [name]
=============================

  attributeHas selector
---------------------

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

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attribute]" )

 **attribute:** An attribute name.

 Example:
--------


 Bind a single click to divs with an id that adds the id to the div's text.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeHas demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
 
<script>
// Using .one() so the handler is executed at most once
// per element per event type
$( "div[id]" ).one( "click", function() {
  var idString = $( this ).text() + " = " + $( this ).attr( "id" );
  $( this ).text( idString );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/has-attribute-selector>

:has() Selector
===============

  has selector
------------

  **Description:** Selects elements which contain at least one element that matches the specified selector.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)jQuery( ":has(selector)" )

 **selector:** Any selector.

  The expression `$( "div:has(p)" )` matches a `<div>` if a `<p>` exists anywhere among its descendants, not just as a direct child.

  ### Additional Notes:

 * Because `:has()` is a jQuery extension and not part of the CSS specification, queries using `:has()` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `$( "your-pure-css-selector" ).has( selector/DOMElement )` instead.
 Example:
--------


 Adds the class "test" to all divs that have a paragraph inside of them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has demo</title>
  <style>
  .test {
    border: 3px inset red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
 
<script>
$( "div:has(p)" ).addClass( "test" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/has-selector>

ID Selector (“#id”)
===================

  id selector
-----------

  **Description:** Selects a single element with the given id attribute. 

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "#id" )

 **id:** An ID to search for, specified via the id attribute of an element.

  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.

 Calling `jQuery()` (or `$()`) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

 Each `id` value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

 If the id contains characters like periods or colons you have to [escape those characters with backslashes](https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/).

  Examples:
---------


 Select the element with the id "myDiv" and give it a red border.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id demo</title>
  <style>
  div {
    width: 90px;
    height: 90px;
    float: left;
    padding: 5px;
    margin: 5px;
    background-color: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
 
<script>
$( "#myDiv" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Select the element with the id "myID.entry[1]" and give it a red border. Note how certain characters must be escaped with backslashes.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id demo</title>
  <style>
  div {
    width: 300px;
    float: left;
    padding: 2px;
    margin: 3px;
    background-color: #eee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>
 
<script>
$( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/id-selector>

Category: Basics
================

   [.hide()](../../hide "Permalink to .hide()")
=============================================

  Hide the matched elements.

     [.show()](../../show "Permalink to .show()")
=============================================

  Display the matched elements.

     [.toggle()](../../toggle "Permalink to .toggle()")
===================================================

  Display or hide the matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/effects/basics>

.hover()
========

  Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. #### Contents:

 * [.hover( handlerIn, handlerOut )](#hover1)
	+ [.hover( handlerIn, handlerOut )](#hover-handlerIn-handlerOut)
* [.hover( handlerInOut )](#hover2)
	+ [.hover( handlerInOut )](#hover-handlerInOut)

 
 .hover( handlerIn, handlerOut )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------

  **Description:** Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.hover( handlerIn, handlerOut )](#hover-handlerIn-handlerOut)


	+ **handlerIn** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the mouse pointer enters the element.
	+ **handlerOut** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the mouse pointer leaves the element.

  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.

 Calling `$( selector ).hover( handlerIn, handlerOut )` is shorthand for:

 
```
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
```
 See the discussions for `[.mouseenter()](mouseenter)` and `[.mouseleave()](mouseleave)` for more details.

  Examples:
---------


 To add a special style to list items that are being hovered over, try:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li class="fade">Chips</li>
  <li class="fade">Socks</li>
</ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   To add a special style to table cells that are being hovered over, try:

 
```
$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);
```
   To unbind the above example use:

 
```
$( "td" ).off( "mouseenter mouseleave" );
```
   .hover( handlerInOut )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.hover( handlerInOut )](#hover-handlerInOut)


	+ **handlerInOut** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the mouse pointer enters or leaves the element.

  The `.hover()` method, when passed a single function, will execute that handler for both `mouseenter` and `mouseleave` events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the `event.type`.

 Calling `$(selector).hover(handlerInOut)` is shorthand for:

 
```
$( selector ).on( "mouseenter mouseleave", handlerInOut );
```
 See the discussions for `[.mouseenter()](mouseenter)` and `[.mouseleave()](mouseleave)` for more details.

  Example:
--------


 Slide the next sibling LI up or down on hover, and toggle a class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  li.active {
    background: black;
    color: white;
  }
  span {
    color:red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>Milk</li>
  <li>White</li>
  <li>Carrots</li>
  <li>Orange</li>
  <li>Broccoli</li>
  <li>Green</li>
</ul>
 
<script>
$( "li" )
  .odd()
    .hide()
  .end()
  .even()
    .hover(function() {
      $( this )
        .toggleClass( "active" )
        .next()
          .stop( true, true )
          .slideToggle();
    });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/hover>

.html()
=======

  Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element. #### Contents:

 * [.html()](#html1)
	+ [.html()](#html)
* [.html( htmlString )](#html2)
	+ [.html( htmlString )](#html-htmlString)
	+ [.html( function )](#html-function)

 
 .html()Returns: [String](types#String)
---------------------------------------

  **Description:** Get the HTML contents of the first element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.html()](#html)


	+ This method does not accept any arguments.

  This method is not available on XML documents.

 In an HTML document, `.html()` can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:

 
```
$( "div.demo-container" ).html();
```
 In order for the following `<div>`'s content to be retrieved, it would have to be the first one with `class="demo-container"` in the document:

 
```
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
```
 The result would look like this:

 
```
<div class="demo-box">Demonstration Box</div>
```
 This method uses the browser's `innerHTML` property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
 Example:
--------


 Click a paragraph to convert it from html to text.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
  }
  b {
    text-decoration: underline;
  }
  button {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  <b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
  to a <span id="text">text</span> node.
</p>
<p>
  This <button name="nada">button</button> does nothing.
</p>
 
<script>
$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});
</script>
 
</body>
</html>
```
 #### Demo:

   .html( htmlString )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Set the HTML contents of each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.html( htmlString )](#html-htmlString)


	+ **htmlString** Type: [htmlString](types#htmlString)  A string of HTML to set as the content of each matched element.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.html( function )](#html-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [htmlString](types#htmlString) oldhtml ) => [htmlString](types#htmlString)  A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, `this` refers to the current element in the set.

  The `.html()` method is not available in XML documents. 

 When `.html()` is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.

 Consider the following HTML:

 
```
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
```
 The content of `<div class="demo-container">` can be set like this:

 
```
$( "div.demo-container" )
  .html( "<p>All new content. <em>You bet!</em></p>" );
```
 That line of code will replace everything inside `<div class="demo-container">`:

 
```
<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>
```
 As of jQuery 1.4, the `.html()` method allows the HTML content to be set by passing in a function.

 
```
$( "div.demo-container" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});
```
 Given a document with six paragraphs, this example will set the HTML of `<div class="demo-container">` to `<p>All new content for <em>6 paragraphs!</em></p>`.

 This method uses the browser's `innerHTML` property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all `href` properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate [compatibility layer](https://code.google.com/p/html5shiv/).

 To set the content of a `<script>` element, which does not contain HTML, use the [`.text()`](text) method and not `.html()`.

 **Note:** In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use `.empty().html( string )` instead of `.html(string)` so that the elements are removed from the document before the new string is assigned to the element.

  Examples:
---------


 Add some html to each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  .red {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>Hello</span>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Add some html to each div then immediately do further manipulations to the inserted html.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  div {
    color: blue;
    font-size: 18px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<b>Wow!</b> Such excitement..." );
$( "div b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/html>

.hasClass()
===========

   .hasClass( className )Returns: [Boolean](types#Boolean)
--------------------------------------------------------

  **Description:** Determine whether any of the matched elements are assigned the given class.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.hasClass( className )](#hasClass-className)


	+ **className** Type: [String](types#String)  The class name to search for.

  Elements may have more than one class assigned to them. In HTML, this is represented by separating the class names with a space:

 
```
<div id="mydiv" class="foo bar"></div>
```
 The `.hasClass()` method will return `true` if the class is assigned to an element, even if other classes also are. For example, given the HTML above, the following will return `true`:

 
```
$( "#mydiv" ).hasClass( "foo" )
```
 As would:

 
```
$( "#mydiv" ).hasClass( "bar" )
```
 While this would return `false`:

 
```
$( "#mydiv" ).hasClass( "quux" )
```
 As of jQuery 1.12/2.2, this method supports XML documents, including SVG.

  Example:
--------


 Looks for the paragraph that contains 'selected' as a class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hasClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
 
<script>
$( "#result1" ).append( $( "p" ).first().hasClass( "selected" ).toString() );
$( "#result2" ).append( $( "p" ).last().hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/hasClass>

.is()
=====

   .is( selector )Returns: [Boolean](types#Boolean)
-------------------------------------------------

  **Description:** Check the current matched set of elements against a selector, element, or jQuery object and return `true` if at least one of these elements matches the given arguments.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.is( selector )](#is-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.is( function )](#is-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Element](types#Element) element ) => [Boolean](types#Boolean)  A function used as a test for every element in the set. It accepts two arguments, `index`, which is the element's index in the jQuery collection, and `element`, which is the DOM element. Within the function, `this` refers to the current DOM element.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.is( selection )](#is-selection)


	+ **selection** Type: [jQuery](types#jQuery)  An existing jQuery object to match the current set of elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.is( elements )](#is-elements)


	+ **elements** Type: [Element](types#Element)  One or more elements to match the current set of elements against.

  Unlike 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.

 Suppose you have a list, with two of its items containing a child element:

 
```
<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>
```
 You can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked:

 
```
$( "ul" ).click(function( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.css( "background-color", "red" );
  }
});
```
 Now, when the user clicks on the word "list" in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be `<strong>` or `<span>`, respectively.

 #### Using a Function

 The second form of this method evaluates expressions related to elements based on a function rather than a selector. For each element, if the function returns `true`, `.is()` returns `true` as well. For example, given a somewhat more involved HTML snippet:

 
```
<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 You can attach a click handler to every `<li>` that evaluates the number of `<strong>` elements within the clicked `<li>` at that time like so:

 
```
$( "li" ).click(function() {
  var li = $( this ),
    isWithTwo = li.is(function() {
      return $( "strong", this ).length === 2;
    });
  if ( isWithTwo ) {
    li.css( "background-color", "green" );
  } else {
    li.css( "background-color", "red" );
  }
});
```
  Examples:
---------


 Shows a few ways is() can be used inside an event handler.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 4px outset;
    background: green;
    text-align: center;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    background: blue;
  }
  .red {
    background: red;
  }
  span {
    color: white;
    font-size: 16px;
  }
  p {
    color: red;
    font-weight: bolder;
    background: yellow;
    margin: 3px;
    clear: left;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p>&nbsp;</p>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Returns true, because the parent of the input is a form element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="checkbox">
</form>
<div></div>
 
<script>
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
$( "div" ).text( "isFormParent = " + isFormParent );
</script>
 
</body>
</html>
```
 #### Demo:

   Returns false, because the parent of the input is a p element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <p><input type="checkbox"></p>
</form>
<div></div>
 
<script>
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );
$( "div" ).text( "isFormParent = " + isFormParent );
</script>
 
</body>
</html>
```
 #### Demo:

   Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
 
<script>
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).click(function() {
  var li = $( this );
  if ( li.is( alt ) ) {
    li.slideUp();
  } else {
    li.css( "background", "red" );
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   An alternate way to achieve the above example using an element rather than a jQuery object. Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
 
<script>
var alt = $( "#browsers li:nth-child(2n)" ).css( "background", "#0ff" );
$( "li" ).click(function() {
  if ( alt.is( this ) ) {
    $( this ).slideUp();
  } else {
    $( this ).css( "background", "red" );
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/is>

jQuery()
========

  Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string. #### Contents:

 * [jQuery( selector [, context ] )](#jQuery1)
	+ [jQuery( selector [, context ] )](#jQuery-selector-context)
	+ [jQuery( element )](#jQuery-element)
	+ [jQuery( elementArray )](#jQuery-elementArray)
	+ [jQuery( object )](#jQuery-object)
	+ [jQuery( selection )](#jQuery-selection)
	+ [jQuery()](#jQuery)
* [jQuery( html [, ownerDocument ] )](#jQuery2)
	+ [jQuery( html [, ownerDocument ] )](#jQuery-html-ownerDocument)
	+ [jQuery( html, attributes )](#jQuery-html-attributes)
* [jQuery( callback )](#jQuery3)
	+ [jQuery( callback )](#jQuery-callback)

 
 jQuery( selector [, context ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------

  **Description:** Accepts a string containing a CSS selector which is then used to match a set of elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( selector [, context ] )](#jQuery-selector-context)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression
	+ **context** Type: [Element](types#Element) or [jQuery](types#jQuery) or [Selector](types#Selector)  A DOM Element, Document, jQuery or selector to use as context
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( element )](#jQuery-element)


	+ **element** Type: [Element](types#Element)  A DOM element to wrap in a jQuery object.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( elementArray )](#jQuery-elementArray)


	+ **elementArray** Type: [Array](types#Array)  An array containing a set of DOM elements to wrap in a jQuery object.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( object )](#jQuery-object)


	+ **object** Type: [PlainObject](types#PlainObject)  A plain object to wrap in a jQuery object.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( selection )](#jQuery-selection)


	+ **selection** Type: [jQuery](types#jQuery)  An existing jQuery object to clone.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery()](#jQuery)


	+ This signature does not accept any arguments.

  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:

 
```
$( "div.foo" );
```
 If no elements match the provided selector, the new jQuery object is "empty"; that is, it contains no elements and has `[.length](length)` property of 0.

 #### Selector Context

 By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the `$()` function. For example, to do a search within an event handler, the search can be restricted like so:

 
```
$( "div.foo" ).click(function() {
  $( "span", this ).addClass( "bar" );
});
```
 When the search for the span selector is restricted to the context of `this`, only spans within the clicked element will get the additional class.

 Internally, selector context is implemented with the `.find()` method, so `$( "span", this )` is equivalent to `$( this ).find( "span" )`.

 #### Using DOM elements

 The second and third formulations of this function create a jQuery object using one or more DOM elements that were already selected in some other way. A jQuery object is created from the array elements in the order they appeared in the array; unlike most other multi-element jQuery operations, the elements are not sorted in DOM order. Elements will be copied from the array as-is and won't be unwrapped if they're already jQuery collections.

 Please note that although you can pass text nodes and comment nodes into a jQuery collection this way, most operations don't support them. The few that do will have an explicit note on their API documentation page.

 A common use of single-DOM-element construction is to call jQuery methods on an element that has been passed to a callback function through the keyword `this`:

 
```
$( "div.foo" ).click(function() {
  $( this ).slideUp();
});
```
 This example causes elements to be hidden with a sliding animation when clicked. Because the handler receives the clicked item in the `this` keyword as a bare DOM element, the element must be passed to the `$()` function before applying jQuery methods to it.

 XML data returned from an Ajax call can be passed to the `$()` function so individual elements of the XML structure can be retrieved using `.find()` and other DOM traversal methods.

 
```
$.post( "url.xml", function( data ) {
  var $child = $( data ).find( "child" );
});
```
 #### Cloning jQuery Objects

 When a jQuery object is passed to the `$()` function, a clone of the object is created. This new jQuery object references the same DOM elements as the initial one.

 #### Returning an Empty Set

 Calling the `jQuery()` method with *no arguments* returns an empty jQuery set (with a `[.length](length)` property of 0). Similarly, if an argument of `null`, `undefined`, an empty array (`[]`), or an empty string (`""`) is passed, the set contains no elements.

 #### Working With Plain Objects

 At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: `.data()`,`.prop()`,`.on()`, `.off()`, `.trigger()` and `.triggerHandler()`. The use of `.data()` (or any method requiring `.data()`) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).

 
```
// Define a plain object
var foo = { foo: "bar", hello: "world" };
 
// Pass it to the jQuery function
var $foo = $( foo );
 
// Test accessing property values
var test1 = $foo.prop( "foo" ); // bar
 
// Test setting property values
$foo.prop( "foo", "foobar" );
var test2 = $foo.prop( "foo" ); // foobar
 
// Test using .data() as summarized above
$foo.data( "keyName", "someValue" );
console.log( $foo ); // will now contain a jQuery{randomNumber} property
 
// Test binding an event name and triggering
$foo.on( "eventName", function () {
  console.log( "eventName was called" );
});
 
$foo.trigger( "eventName" ); // Logs "eventName was called"
```
 Should `.trigger( "eventName" )` be used, it will search for an "eventName" property on the object and attempt to execute it after any attached jQuery handlers are executed. It does not check whether the property is a function or not. To avoid this behavior, `.triggerHandler( "eventName" )` should be used instead.

 
```
$foo.triggerHandler( "eventName" ); // Also logs "eventName was called"
```
  Examples:
---------


 Find all p elements that are children of a div element and apply a border to them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>one</p>
<div><p>two</p></div>
<p>three</p>
 
<script>
$( "div > p" ).css( "border", "1px solid gray" );
</script>
 
</body>
</html>
```
 #### Demo:

   Find all inputs of type radio within the first form in the document.

 
```
$( "input:radio", document.forms[ 0 ] );
```
   Find all div elements within an XML document from an Ajax response.

 
```
$( "div", xml.responseXML );
```
   Set the background color of the page to black.

 
```
$( document.body ).css( "background", "black" );
```
   Hide all the input elements within a form.

 
```
$( myForm.elements ).hide();
```
   jQuery( html [, ownerDocument ] )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------------

  **Description:** Creates DOM elements on the fly from the provided string of raw HTML.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( html [, ownerDocument ] )](#jQuery-html-ownerDocument)


	+ **html** Type: [htmlString](types#htmlString)  A string of HTML to create on the fly. Note that this parses HTML, **not** XML.
	+ **ownerDocument** Type: [Document](types#Document)  A document in which the new elements will be created.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery( html, attributes )](#jQuery-html-attributes)


	+ **html** Type: [htmlString](types#htmlString)  A string defining a single, standalone, HTML element (e.g. <div/> or <div></div>).
	+ **attributes** Type: [PlainObject](types#PlainObject)  An object of attributes, events, and methods to call on the newly-created element.

  #### Creating New Elements

 If a string is passed as the parameter to `$()`, jQuery examines the string to see if it looks like HTML (i.e., it starts with `<tag ... >`). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:

 
```
$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" );
```
 For explicit parsing of a string to HTML, use the [$.parseHTML()](jquery.parsehtml) method.

 By default, elements are created with an `.ownerDocument` matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., `$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)`.

 If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's `.innerHTML` mechanism. In most cases, jQuery creates a new `<div>` element and sets the `innerHTML` property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — `$( "<img />" )` or `$( "<img>" )`, `$( "<a></a>" )` or `$( "<a>" )` — jQuery creates the element using the native JavaScript `.createElement()` function.

 When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's `.innerHTML` property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as `<html>`, `<title>`, or `<head>` elements. As a result, the elements inserted may not be representative of the original string passed.

 Filtering isn't, however, limited to these tags. For example, Internet Explorer prior to version 8 will also convert all `href` properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate [compatibility layer](https://code.google.com/p/html5shiv/).

 To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:

 
```
$( "<a href='https://jquery.com'></a>" );
```
 Tags that cannot contain elements may be quick-closed or not:

 
```
$( "<img>" );
$( "<input>" );
```
 When passing HTML to `jQuery()`, note that text nodes are not treated as DOM elements. With the exception of a few methods (such as `.content()`), they are generally ignored or removed. E.g:

 
```
var el = $( "<br>2<br>3" ); // returns [<br>, "2", <br>]
el = $( "<br>2<br>3 >" ); // returns [<br>, "2", <br>, "3 &gt;"]
```
 This behavior is expected. **As of jQuery 1.9.0** (and unless using the [jQuery Migrate plugin](https://github.com/jquery/jquery-migrate/#readme)), `jQuery()` requires the HTML string to start with a `<` (i.e text nodes cannot appear at the front of the HTML string).

 **As of jQuery 1.4**, the second argument to `jQuery()` can accept a plain object consisting of a superset of the properties that can be passed to the [.attr()](attr) method.

 **Important:** If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. **As of jQuery 1.4**, any [event type](category/events) can be passed in, and the following jQuery methods can be called: <val>, <css>, <html>, <text>, <data>, <width>, <height>, or <offset>.

 **As of jQuery 1.8**, any jQuery instance method (a method of `jQuery.fn`) can be used as a property of the object passed to the second parameter:

 
```
$( "<div></div>", {
  "class": "my-div",
  on: {
    touchstart: function( event ) {
      // Do something
    }
  }
}).appendTo( "body" );
```
 The name `"class"` must be quoted in the object since it is a JavaScript reserved word, and `"className"` cannot be used since it refers to the DOM property, not the attribute. 

 While the second argument is convenient, its flexibility can lead to unintended consequences (e.g. `$( "<input>", {size: "4"} )` calling the `.size()` method instead of setting the size attribute). The previous code block could thus be written instead as:

 
```
$( "<div></div>" )
  .addClass( "my-div" )
  .on({
    touchstart: function( event ) {
      // Do something
    }
  })
    .appendTo( "body" );
```
  Examples:
---------


 Create a div element (and all of its contents) dynamically and append it to the body element. Internally, an element is created and its innerHTML property set to the given markup.

 
```
$( "<div><p>Hello</p></div>" ).appendTo( "body" )
```
   Create some DOM elements.

 
```
$( "<div/>", {
  "class": "test",
  text: "Click me!",
  click: function() {
    $( this ).toggleClass( "test" );
  }
})
  .appendTo( "body" );
```
   jQuery( callback )Returns: [jQuery](types#jQuery)
--------------------------------------------------

  **Description:** Binds a function to be executed when the DOM has finished loading.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery( callback )](#jQuery-callback)


	+ **callback** Type: [Function](types#Function)() The function to execute when the DOM is ready.

  This function behaves just like `$( document ).ready()`, in that it should be used to wrap other `$()` operations on your page that depend on the DOM being ready. While this function is, technically, chainable, there really isn't much use for chaining against it.

  Examples:
---------


 Execute the function when the DOM is ready to be used.

 
```
$(function() {
  // Document is ready
});
```
   Use both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.

 
```
jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery>

:header Selector
================

  header selector
---------------

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

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)jQuery( ":header" )

 ### Additional Notes:

 * Because `:header` is a jQuery extension and not part of the CSS specification, queries using `:header` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:header` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":header")`](filter).
 Example:
--------


 Adds a background and text color to all the headers on the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>header demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
 
<script>
$( ":header" ).css({ background: "#ccc", color: "blue" });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/header-selector>

Category: Visibility Filter
===========================

   [:hidden Selector](../../hidden-selector "Permalink to :hidden Selector")
==========================================================================

  Selects all elements that are hidden.

     [:visible Selector](../../visible-selector "Permalink to :visible Selector")
=============================================================================

  Selects all elements that are visible.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/selectors/visibility-filter-selectors>

.hide()
=======

   .hide()Returns: [jQuery](types#jQuery)
---------------------------------------

  **Description:** Hide the matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.hide()](#hide)


	+ This signature does not accept any arguments.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.hide( [duration ] [, complete ] )](#hide-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.hide( options )](#hide-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.hide( duration [, easing ] [, complete ] )](#hide-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

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

 
```
$( ".target" ).hide();
```
 The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling `.css( "display", "none" )`, except that the value of the `display` property is saved in jQuery's data cache so that `display` can later be restored to its initial value. If an element has a `display` value of `inline` and is hidden then shown, it will once again be displayed `inline`.

 When a duration, a plain object, or a "complete" function is provided, `.hide()` becomes an animation method. The `.hide()` method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the `display` style property is set to `none` to ensure that the element no longer affects the layout of the page.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively.

 Note that `.hide()` is fired immediately and will override the animation queue if no duration or a duration of 0 is specified.

 As of jQuery **1.4.3**, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

  **Note:** This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine whether this method is causing them. Moreover, this method can cause problems with responsive layouts if the display value differs at different viewport sizes.

  We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
```
 
```
// With the element initially shown, we can hide it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).hide( "slow", function() {
    alert( "Animation complete." );
  });
});
```
  ![]` effect   ### Additional Notes:

 * All jQuery effects, including `.hide()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Hides all paragraphs then the link on click.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
 
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
  event.preventDefault();
  $( this ).hide();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).hide( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  span {
    background: #def3ca;
    padding: 3px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="hider">Hide</button>
<button id="shower">Show</button>
<div>
  <span>Once</span> <span>upon</span> <span>a</span>
  <span>time</span> <span>there</span> <span>were</span>
  <span>three</span> <span>programmers...</span>
</div>
 
<script>
$( "#hider" ).click(function() {
  $( "span:last-child" ).hide( "fast", function() {
    // Use arguments.callee so we don't need a named function
    $( this ).prev().hide( "fast", arguments.callee );
  });
});
$( "#shower" ).click(function() {
  $( "span" ).show( 2000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  div {
    background: #ece023;
    width: 30px;
    height: 40px;
    margin: 2px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
 
<script>
for ( var i = 0; i < 5; i++ ) {
  $( "<div>" ).appendTo( document.body );
}
$( "div" ).click(function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/hide>

:input Selector
===============

  input selector
--------------

  **Description:** Selects all input, textarea, select and button elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":input" )

  The `:input` selector basically selects all form controls.

  ### Additional Notes:

 * Because `:input` is a jQuery extension and not part of the CSS specification, queries using `:input` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:input` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":input")`](filter).
 Example:
--------


 Finds all input elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>input demo</title>
  <style>
  textarea {
    height: 25px;
  }
  	</style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div id="messages"></div>
 
<script>
var allInputs = $( ":input" );
var formChildren = $( "form > *" );
$( "#messages" ).text( "Found " + allInputs.length + " inputs and the form has " +
  formChildren.length + " children." );
 
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/input-selector>

Category: Dimensions
====================

 
These methods are used to get and set the CSS dimensions for the various properties.

    [.height()](../height "Permalink to .height()")
================================================

  Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

     [.innerHeight()](../innerheight "Permalink to .innerHeight()")
===============================================================

  Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

     [.innerWidth()](../innerwidth "Permalink to .innerWidth()")
============================================================

  Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

     [.outerHeight()](../outerheight "Permalink to .outerHeight()")
===============================================================

  Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

     [.outerWidth()](../outerwidth "Permalink to .outerWidth()")
============================================================

  Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

     [.width()](../width "Permalink to .width()")
=============================================

  Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/dimensions>

.height()
=========

  Get the current computed height for the first element in the set of matched elements or set the height of every matched element. #### Contents:

 * [.height()](#height1)
	+ [.height()](#height)
* [.height( value )](#height2)
	+ [.height( value )](#height-value)
	+ [.height( function )](#height-function)

 
 .height()Returns: [Number](types#Number)
-----------------------------------------

  **Description:** Get the current computed height for the first element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.height()](#height)


	+ This method does not accept any arguments.

  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.

  ![] Figure 1 - Illustration of the measured height  This method is also able to find the height of the window and document.

 
```
// Returns height of browser viewport
$( window ).height();
 
// Returns height of HTML document
$( document ).height();
```
 Note that `.height()` will always return the content height, regardless of the value of the CSS `box-sizing` property. As of jQuery 1.8, this may require retrieving the CSS height plus `box-sizing` property and then subtracting any potential border and padding on each element when the element has `box-sizing: border-box`. To avoid this penalty, use `.css( "height" )` rather than `.height()`.

  **Note:** Although `style` and `script` tags will report a value for `.width()` or `height()` when absolutely positioned and given `display:block`, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.

   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.height()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
* The value reported by `.height()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.height()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
 Example:
--------


 Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
 
<div>&nbsp;</div>
<p>
  Sample paragraph to test height
</p>
 
<script>
function showHeight( element, height ) {
  $( "div" ).text( "The height for the " + element + " is " + height + "px." );
}
$( "#getp" ).click(function() {
  showHeight( "paragraph", $( "p" ).height() );
});
$( "#getd" ).click(function() {
  showHeight( "document", $( document ).height() );
});
$( "#getw" ).click(function() {
  showHeight( "window", $( window ).height() );
});
</script>
 
</body>
</html>
```
 #### Demo:

   .height( value )Returns: [jQuery](types#jQuery)
------------------------------------------------

  **Description:** Set the CSS height of every matched element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.height( value )](#height-value)


	+ **value** Type: [String](types#String) or [Number](types#Number)  An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).
* ####  version added: [1.4.1](https://api.jquery.com/category/version/1.4.1/)[.height( function )](#height-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Integer](types#Integer) height ) => [String](types#String) or [Number](types#Number)  A function returning the height to set. Receives the index position of the element in the set and the old height as arguments. Within the function, `this` refers to the current element in the set.

  When calling `.height(value)`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, a valid CSS measurement must be provided for the height (such as `100px`, `50%`, or `auto`). Note that in modern browsers, the CSS height property does not include padding, border, or margin.

 If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.

 Note that `.height(value)` sets the content height of the box regardless of the value of the CSS `box-sizing` property.

  Example:
--------


 To set the height of each div on click to 30px plus a color change.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  div {
    width: 50px;
    height: 70px;
    float: left;
    margin: 5px;
    background: rgb(255,140,0);
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).one( "click", function() {
  $( this ).height( 30 ).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/height>

:hidden Selector
================

  hidden selector
---------------

  **Description:** Selects all elements that are hidden.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":hidden" )

  Elements can be considered hidden for several reasons:

 * They have a CSS `display` value of `none`.
* They are form elements with `type="hidden"`.
* Their width and height are explicitly set to 0.
* An ancestor element is hidden, so the element is not shown on the page.

 Elements with `visibility: hidden` or `opacity: 0` are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

 Elements that are not in a document are not considered to be visible; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

 This selector is the opposite of the [`:visible`](visible-selector) selector. So, every element selected by `:hidden` isn't selected by `:visible` and vice versa.

 During animations to show an element, the element is considered to be visible at the start of the animation.

 How `:hidden` is determined was changed in jQuery 1.3.2. An element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn't taken into account (therefore `$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false`). The [release notes](https://blog.jquery.com/2009/02/20/jquery-1-3-2-released/) outline the changes in more detail.

 jQuery 3 slightly modifies the meaning of `:hidden` (and therefore of [`:visible`](visible-selector)). Starting with this version, elements will be considered `:hidden` if they don't have any layout boxes. For example, `br` elements and inline elements with no content will not be selected by the `:hidden` selector.

  ### Additional Notes:

 * Because `:hidden` is a jQuery extension and not part of the CSS specification, queries using `:hidden` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:hidden` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":hidden")`](filter).
* Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.
 Example:
--------


 Shows all hidden divs and counts hidden inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hidden demo</title>
  <style>
  div {
    width: 70px;
    height: 40px;
    background: #e7f;
    margin: 5px;
    float: left;
  }
  span {
    display: block;
    clear: left;
    color: red;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
 
<div class="starthidden">Hider!</div>
<div></div>
 
<form>
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</form>
 
<span></span>
 
<script>
// In some browsers :hidden includes head, title, script, etc...
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
 
$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/hidden-selector>

:image Selector
===============

  image selector
--------------

  **Description:** Selects all elements of type image.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":image" )

  `:image` is equivalent to `[type="image"]`

  ### Additional Notes:

 * Because `:image` is a jQuery extension and not part of the CSS specification, queries using `:image` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="image"]` instead.
 Example:
--------


 Finds all image inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>image demo</title>
  <style>
  textarea {
    height: 45px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>
 
<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( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/image-selector>

.innerHeight()
==============

  Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element. #### Contents:

 * [.innerHeight()](#innerHeight1)
	+ [.innerHeight()](#innerHeight)
* [.innerHeight( value )](#innerHeight2)
	+ [.innerHeight( value )](#innerHeight-value)
	+ [.innerHeight( function )](#innerHeight-function)

 
 .innerHeight()Returns: [Number](types#Number)
----------------------------------------------

  **Description:** Get the current computed height for the first element in the set of matched elements, including padding but not border.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.innerHeight()](#innerHeight)


	+ This method does not accept any arguments.

  This method returns the height of the element, including top and bottom padding, in pixels. If called on an empty set of elements, returns `undefined` (`null` before jQuery 3.0).

 This method is not applicable to `window` and `document` objects; for these, use `[.height()](height)` instead.

  ![] Figure 1 - Illustration of the measured height   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.innerHeight()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
* The value reported by `.innerHeight()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.innerHeight()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
 Example:
--------


 Get the innerHeight of a paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>innerHeight demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text( "innerHeight:" + p.innerHeight() );
</script>
 
</body>
</html>
```
 #### Demo:

   .innerHeight( value )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Set the CSS inner height of each element in the set of matched elements.

 * ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.innerHeight( value )](#innerHeight-value)


	+ **value** Type: [String](types#String) or [Number](types#Number)  A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
* ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.innerHeight( function )](#innerHeight-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Number](types#Number) height ) => [String](types#String) or [Number](types#Number)  A function returning the inner height (including padding but not border) to set. Receives the index position of the element in the set and the old inner height as arguments. Within the function, `this` refers to the current element in the set.

  When calling `.innerHeight("value")`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the height (such as `100px`, `50%`, or `auto`). Note that in modern browsers, the CSS height property does not include padding, border, or margin, unless the `box-sizing` CSS property is used.

 If no explicit unit is specified (like "em" or "%") then "px" is assumed.

  Example:
--------


 Change the inner height of each div the first time it is clicked (and change its color).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>innerHeight demo</title>
  <style>
div {
  width: 60px;
  padding: 10px;
  height: 70px;
  float: left;
  margin: 5px;
  background: red;
  cursor: pointer;
}
.mod {
  background: blue;
  cursor: default;
}
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modHeight = 70;
$( "div" ).one( "click", function() {
  $( this ).innerHeight( modHeight ).addClass( "mod" );
  modHeight -= 8;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/innerHeight>

.innerWidth()
=============

  Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element. #### Contents:

 * [.innerWidth()](#innerWidth1)
	+ [.innerWidth()](#innerWidth)
* [.innerWidth( value )](#innerWidth2)
	+ [.innerWidth( value )](#innerWidth-value)
	+ [.innerWidth( function )](#innerWidth-function)

 
 .innerWidth()Returns: [Number](types#Number)
---------------------------------------------

  **Description:** Get the current computed inner width for the first element in the set of matched elements, including padding but not border.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.innerWidth()](#innerWidth)


	+ This method does not accept any arguments.

  This method returns the width of the element, including left and right padding, in pixels. If called on an empty set of elements, returns `undefined` (`null` before jQuery 3.0).

 This method is not applicable to `window` and `document` objects; for these, use `[.width()](width)` instead.

  ![] Figure 1 - Illustration of the measured width   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.innerWidth()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
* The value reported by `.innerWidth()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.innerWidth()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
 Example:
--------


 Get the innerWidth of a paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>innerWidth demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text( "innerWidth:" + p.innerWidth() );
</script>
 
</body>
</html>
```
 #### Demo:

   .innerWidth( value )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Set the CSS inner width of each element in the set of matched elements.

 * ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.innerWidth( value )](#innerWidth-value)


	+ **value** Type: [String](types#String) or [Number](types#Number)  A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
* ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.innerWidth( function )](#innerWidth-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Number](types#Number) width ) => [String](types#String) or [Number](types#Number)  A function returning the inner width (including padding but not border) to set. Receives the index position of the element in the set and the old inner width as arguments. Within the function, `this` refers to the current element in the set.

  When calling `.innerWidth("value")`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as `100px`, `50%`, or `auto`). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the `box-sizing` CSS property is used.

 If no explicit unit is specified (like "em" or "%") then "px" is assumed.

  Example:
--------


 Change the inner width of each div the first time it is clicked (and change its color).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>innerWidth demo</title>
  <style>
div {
width: 60px;
padding: 10px;
height: 50px;
float: left;
margin: 5px;
background: red;
cursor: pointer;
}
.mod {
background: blue;
cursor: default;
}
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modWidth = 60;
$( "div" ).one( "click", function() {
$( this ).innerWidth( modWidth ).addClass( "mod" );
modWidth -= 8;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/innerWidth>

.insertAfter()
==============

   .insertAfter( target )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Insert every element in the set of matched elements after the target.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.insertAfter( target )](#insertAfter-target)


	+ **target** Type: [Selector](types#Selector) or [htmlString](types#htmlString) or [Element](types#Element) or [Array](types#Array) or [jQuery](types#jQuery)  A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.

  The `[.after()](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.

 Consider the following HTML:

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 We can create content and insert it after several elements at once:

 
```
$( "<p>Test</p>" ).insertAfter( ".inner" );
```
 Each inner `<div>` element gets this new content:

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>
```
 We can also select an element on the page and insert it after another:

 
```
$( "h2" ).insertAfter( $( ".container" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved after the target (not cloned) and a new set consisting of the inserted element is returned:

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
```
 If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.

 **Before jQuery 1.9,** the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the `.end()` method reliably when being used with an unknown number of elements.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
* jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are `addClass` and `removeClass`.
 Example:
--------


 Insert all paragraphs after an element with id of "foo". Same as $( "#foo" ).after( "p" )

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertAfter demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what I said... </p>
<div id="foo">FOO!</div>
 
<script>
$( "p" ).insertAfter( "#foo" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/insertAfter>

.insertBefore()
===============

   .insertBefore( target )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Insert every element in the set of matched elements before the target.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.insertBefore( target )](#insertBefore-target)


	+ **target** Type: [Selector](types#Selector) or [htmlString](types#htmlString) or [Element](types#Element) or [Array](types#Array) or [jQuery](types#jQuery)  A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s) specified by this parameter.

  The `[.before()](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.

 Consider the following HTML:

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 We can create content and insert it before several elements at once:

 
```
$( "<p>Test</p>" ).insertBefore( ".inner" );
```
 Each inner `<div>` element gets this new content:

 
```
<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>
```
 We can also select an element on the page and insert it before another:

 
```
$( "h2" ).insertBefore( $( ".container" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned) and a new set consisting of the inserted element is returned:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.

 **Before jQuery 1.9,** the append-to-single-element case did not create a new set, but instead returned the original set which made it difficult to use the `.end()` method reliably when being used with an unknown number of elements.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
* jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are `addClass` and `removeClass`.
 Example:
--------


 Insert all paragraphs before an element with id of "foo". Same as $( "#foo" ).before( "p" )

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertBefore demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<p>I would like to say: </p>
 
<script>
$( "p" ).insertBefore( "#foo" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/insertBefore>

Category: Core
==============

   [jQuery()](../jquery "Permalink to jQuery()")
==============================================

  Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

     [jQuery.holdReady()](../jquery.holdready "Permalink to jQuery.holdReady()")
============================================================================

  Holds or releases the execution of jQuery’s ready event.

     [jQuery.noConflict()](../jquery.noconflict "Permalink to jQuery.noConflict()")
===============================================================================

  Relinquish jQuery’s control of the $ variable.

     [jQuery.ready](../jquery.ready "Permalink to jQuery.ready")
============================================================

  A Promise-like object (or “thenable”) that resolves when the document is ready.

     [jQuery.readyException()](../jquery.readyexception "Permalink to jQuery.readyException()")
===========================================================================================

  Handles errors thrown synchronously in functions wrapped in jQuery().

     [jQuery.sub()](../jquery.sub "Permalink to jQuery.sub()")
==========================================================

  Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.

     [jQuery.when()](../jquery.when "Permalink to jQuery.when()")
=============================================================

  Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/core>

.jquery
=======

   jqueryReturns: [String](types#String)
--------------------------------------

  **Description:** A string containing the jQuery version number.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jquery

  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".

  Examples:
---------


 Determine if an object is a jQuery object

 
```
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!" );
}
```
   Get the current version of jQuery running on the page

 
```
alert( "You are running jQuery version: " + $.fn.jquery );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jquery-2>

Category: Low-Level Interface
=============================

 
These methods can be used to make arbitrary Ajax requests.

    [jQuery.ajax()](../../jquery.ajax "Permalink to jQuery.ajax()")
================================================================

  Perform an asynchronous HTTP (Ajax) request.

     [jQuery.ajaxPrefilter()](../../jquery.ajaxprefilter "Permalink to jQuery.ajaxPrefilter()")
===========================================================================================

  Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().

     [jQuery.ajaxSetup()](../../jquery.ajaxsetup "Permalink to jQuery.ajaxSetup()")
===============================================================================

  Set default values for future Ajax requests. Its use is not recommended.

     [jQuery.ajaxTransport()](../../jquery.ajaxtransport "Permalink to jQuery.ajaxTransport()")
===========================================================================================

  Creates an object that handles the actual transmission of Ajax data.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/ajax/low-level-interface>

jQuery.ajax()
=============

   jQuery.ajax( url [, settings ] )Returns: [jqXHR](types#jqXHR)
--------------------------------------------------------------

  **Description:** Perform an asynchronous HTTP (Ajax) request.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.ajax( url [, settings ] )](#jQuery-ajax-url-settings)


	+ **url** Type: [String](types#String)  A string containing the URL to which the request is sent.
	+ **settings** Type: [PlainObject](types#PlainObject)  A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with [$.ajaxSetup()](jquery.ajaxsetup). See [jQuery.ajax( settings )](#jQuery-ajax-settings) below for a complete list of all settings.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.ajax( [settings ] )](#jQuery-ajax-settings)


	+ **settings** Type: [PlainObject](types#PlainObject)  A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with [$.ajaxSetup()](jquery.ajaxsetup).
		- **accepts** (default: `depends on dataType`) Type: [PlainObject](types#PlainObject)  A set of key/value pairs that map a given `dataType` to its MIME type, which gets sent in the `Accept` request header. This header tells the server what kind of response it will accept in return. For example, the following defines a custom type `mycustomtype` to be sent with the request: 
		```
		$.ajax({
		  accepts: {
		    mycustomtype: 'application/x-some-custom-type'
		  },
		 
		  // Instructions for how to deserialize a `mycustomtype`
		  converters: {
		    'text mycustomtype': function(result) {
		      // Do Stuff
		      return newresult;
		    }
		  },
		 
		  // Expect a `mycustomtype` back from server
		  dataType: 'mycustomtype'
		});
		```
		 **Note:** You will need to specify a complementary entry for this type in `converters` for this to work properly.
		- **async** (default: `true`) Type: [Boolean](types#Boolean)  By default, all requests are sent asynchronously (i.e. this is set to `true` by default). If you need synchronous requests, set this option to `false`. Cross-domain requests and `dataType: "jsonp"` requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. **As of jQuery 1.8**, the use of `async: false` with jqXHR (`$.Deferred`) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as `jqXHR.done()`.
		- **beforeSend** Type: [Function](types#Function)( [jqXHR](types#jqXHR) jqXHR, [PlainObject](types#PlainObject) settings ) A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc. The jqXHR and settings objects are passed as arguments. This is an [Ajax Event](ajax_events). Returning `false` in the `beforeSend` function will cancel the request. **As of jQuery 1.5**, the `beforeSend` option will be called regardless of the type of request.
		- **cache** (default: `true, false for dataType 'script' and 'jsonp'`) Type: [Boolean](types#Boolean)  If set to `false`, it will force requested pages not to be cached by the browser. **Note:** Setting `cache` to false will only work correctly with HEAD and GET requests. It works by appending "\_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.
		- **complete** Type: [Function](types#Function)( [jqXHR](types#jqXHR) jqXHR, [String](types#String) textStatus ) A function to be called when the request finishes (after `success` and `error` callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request (`"success"`, `"notmodified"`, `"nocontent"`, `"error"`, `"timeout"`, `"abort"`, or `"parsererror"`). **As of jQuery 1.5**, the `complete` setting can accept an array of functions. Each function will be called in turn. This is an [Ajax Event](ajax_events).
		- **contents** Type: [PlainObject](types#PlainObject)  An object of string/regular-expression pairs that determine how jQuery will parse the response, given its content type. (version added: [1.5](https://api.jquery.com/category/version/1.5/))
		- **contentType** (default: `'application/x-www-form-urlencoded; charset=UTF-8'`) Type: [Boolean](types#Boolean) or [String](types#String)  When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to `$.ajax()`, then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass `false` to tell jQuery to not set any content type header. **Note:** The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. **Note:** For cross-domain requests, setting the content type to anything other than `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain` will trigger the browser to send a preflight OPTIONS request to the server.
		- **context** Type: [PlainObject](types#PlainObject)  This object will be the context of all Ajax-related callbacks. By default, the context is an object that represents the Ajax settings used in the call (`$.ajaxSettings` merged with the settings passed to `$.ajax`). For example, specifying a DOM element as the context will make that the context for the `complete` callback of a request, like so: 
		```
		$.ajax({
		  url: "test.html",
		  context: document.body
		}).done(function() {
		  $( this ).addClass( "done" );
		});
		```
		- **converters** (default: `{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}`) Type: [PlainObject](types#PlainObject)  An object containing dataType-to-dataType converters. Each converter's value is a function that returns the transformed value of the response. (version added: [1.5](https://api.jquery.com/category/version/1.5/))
		- **crossDomain** (default: `false for same-domain requests, true for cross-domain requests`) Type: [Boolean](types#Boolean)  If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to `true`. This allows, for example, server-side redirection to another domain. (version added: [1.5](https://api.jquery.com/category/version/1.5/))
		- **data** Type: [PlainObject](types#PlainObject) or [String](types#String) or [Array](types#Array)   Data to be sent to the server. If the HTTP method is one that cannot have an entity body, such as GET, the `data` is appended to the URL.
		
		 When `data` is an object, jQuery generates the data string from the object's key/value pairs unless the `processData` option is set to `false`. For example, `{ a: "bc", d: "e,f" }` is converted to the string `"a=bc&d=e%2Cf"`. If the value is an array, jQuery serializes multiple values with same key based on the value of the `traditional` setting (described below). For example, `{ a: [1,2] }` becomes the string `"a%5B%5D=1&a%5B%5D=2"` with the default `traditional: false` setting.
		
		 When `data` is passed as a string it should **already be encoded** using the correct encoding for `contentType`, which by default is `application/x-www-form-urlencoded`.
		
		 In requests with `dataType: "json"` or `dataType: "jsonp"`, if the string contains a double question mark (`??`) anywhere in the URL or a single question mark (`?`) in the query string, it is replaced with a value generated by jQuery that is unique for each copy of the library on the page (e.g. `jQuery21406515378922229067_1479880736745`).
		- **dataFilter** Type: [Function](types#Function)( [String](types#String) data, [String](types#String) type ) => [Anything](types#Anything)  A function to be used to handle the raw response data of XMLHttpRequest. This is a pre-filtering function to sanitize the response. You should return the sanitized data. The function accepts two arguments: The raw data returned from the server and the 'dataType' parameter.
		- **dataType** (default: `Intelligent Guess (xml, json, script, or html)`) Type: [String](types#String)  The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are: 
			* `"xml"`: Returns a XML document that can be processed via jQuery.
			* `"html"`: Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
			* `"script"`: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, `_=[TIMESTAMP]`, to the URL unless the `cache` option is set to `true`. **Note:** This will turn POSTs into GETs for remote-domain requests. Prior to jQuery 3.5.0, unsuccessful HTTP responses with a script `Content-Type` were still executed.
			* `"json"`: Evaluates the response as JSON and returns a JavaScript object. Cross-domain `"json"` requests that have a callback placeholder, e.g. `?callback=?`, are performed using [JSONP](https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/) unless the request includes `jsonp: false` in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of `null` or `{}` instead. (See [json.org](https://json.org/) for more information on proper JSON formatting.)
			* `"jsonp"`: Loads in a JSON block using [JSONP](https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/). Adds an extra `"?callback=?"` to the end of your URL to specify the callback. Disables caching by appending a query string parameter, `"_=[TIMESTAMP]"`, to the URL unless the `cache` option is set to `true`.
			* `"text"`: A plain text string.
			* multiple, space-separated values: **As of jQuery 1.5**, jQuery can convert a dataType from what it received in the Content-Type header to what you require. For example, if you want a text response to be treated as XML, use `"text xml"` for the dataType. You can also make a JSONP request, have it received as text, and interpreted by jQuery as XML: `"jsonp text xml"`. Similarly, a shorthand string such as `"jsonp xml"` will first attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then from text to xml.
		- **error** Type: [Function](types#Function)( [jqXHR](types#jqXHR) jqXHR, [String](types#String) textStatus, [String](types#String) errorThrown ) A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides `null`) are `"timeout"`, `"error"`, `"abort"`, and `"parsererror"`. When an HTTP error occurs, `errorThrown` receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." (in HTTP/2 it may instead be an empty string) **As of jQuery 1.5**, the `error` setting can accept an array of functions. Each function will be called in turn. **Note:** *This handler is not called for cross-domain script and cross-domain JSONP requests.* This is an [Ajax Event](ajax_events).
		- **global** (default: `true`) Type: [Boolean](types#Boolean)  Whether to trigger global Ajax event handlers for this request. The default is `true`. Set to `false` to prevent the global handlers like `ajaxStart` or `ajaxStop` from being triggered. This can be used to control various [Ajax Events](ajax_events).
		- **headers** (default: `{}`) Type: [PlainObject](types#PlainObject)  An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. The header `X-Requested-With: XMLHttpRequest` is always added, but its default `XMLHttpRequest` value can be changed here. Values in the `headers` setting can also be overwritten from within the `beforeSend` function. (version added: [1.5](https://api.jquery.com/category/version/1.5/))
		- **ifModified** (default: `false`) Type: [Boolean](types#Boolean)  Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is `false`, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.
		- **isLocal** (default: `depends on current location protocol`) Type: [Boolean](types#Boolean)  Allow the current environment to be recognized as "local," (e.g. the filesystem), even if jQuery does not recognize it as such by default. The following protocols are currently recognized as local: `file`, `*-extension`, and `widget`. If the `isLocal` setting needs modification, it is recommended to do so once in the `$.ajaxSetup()` method. (version added: [1.5.1](https://api.jquery.com/category/version/1.5.1/))
		- **jsonp** Type: [String](types#String) or [Boolean](types#Boolean)  Override the callback function name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So `{jsonp:'onJSONPLoad'}` would result in `'onJSONPLoad=?'` passed to the server. **As of jQuery 1.5**, setting the `jsonp` option to `false` prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the `jsonpCallback` setting. For example, `{ jsonp: false, jsonpCallback: "callbackName" }`. If you don't trust the target of your Ajax requests, consider setting the `jsonp` property to `false` for security reasons.
		- **jsonpCallback** Type: [String](types#String) or [Function](types#Function)() Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. **As of jQuery 1.5**, you can also use a function for this setting, in which case the value of `jsonpCallback` is set to the return value of that function.
		- **method** (default: `'GET'`) Type: [String](types#String)  The HTTP method to use for the request (e.g. `"POST"`, `"GET"`, `"PUT"`). (version added: [1.9.0](https://api.jquery.com/category/version/1.9.0/))
		- **mimeType** Type: [String](types#String)  A mime type to override the XHR mime type. (version added: [1.5.1](https://api.jquery.com/category/version/1.5.1/))
		- **password** Type: [String](types#String)  A password to be used with XMLHttpRequest in response to an HTTP access authentication request.
		- **processData** (default: `true`) Type: [Boolean](types#Boolean)  By default, data passed in to the `data` option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to `false`.
		- **scriptAttrs** Type: [PlainObject](types#PlainObject)  Defines an object with additional attributes to be used in a "script" or "jsonp" request. The key represents the name of the attribute and the value is the attribute's value. If this object is provided it will force the use of a script-tag transport. For example, this can be used to set `nonce`, `integrity`, or `crossorigin` attributes to satisfy Content Security Policy requirements. (version added: [3.4.0](https://api.jquery.com/category/version/3.4.0/))
		- **scriptCharset** Type: [String](types#String)  Only applies when the "script" transport is used. Sets the `charset` attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script. Alternatively, the `charset` attribute can be specified in `scriptAttrs` instead, which will also ensure the use of the "script" transport.
		- **statusCode** (default: `{}`) Type: [PlainObject](types#PlainObject)   An object of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:
		
		 
		```
		$.ajax({
		  statusCode: {
		    404: function() {
		      alert( "page not found" );
		    }
		  }
		});
		```
		 If the request is successful, the status code functions take the same parameters as the success callback; if it results in an error (including 3xx redirect), they take the same parameters as the `error` callback.
		
		  (version added: [1.5](https://api.jquery.com/category/version/1.5/))
		- **success** Type: [Function](types#Function)( [Anything](types#Anything) data, [String](types#String) textStatus, [jqXHR](types#jqXHR) jqXHR ) A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the `dataType` parameter or the `dataFilter` callback function, if specified; a string describing the status; and the `jqXHR` (in jQuery 1.4.x, XMLHttpRequest) object. **As of jQuery 1.5**, *the success setting can accept an array of functions. Each function will be called in turn.* This is an [Ajax Event](ajax_events).
		- **timeout** Type: [Number](types#Number)  Set a timeout (in milliseconds) for the request. A value of 0 means there will be no timeout. This will override any global timeout set with [$.ajaxSetup()](jquery.ajaxsetup). The timeout period starts at the point the `$.ajax` call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. **In jQuery 1.4.x and below,** the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. **In Firefox 3.0+ only,** script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.
		- **traditional** Type: [Boolean](types#Boolean)  Set this to `true` if you wish to use the traditional style of [param serialization](jquery.param).
		- **type** (default: `'GET'`) Type: [String](types#String)  An alias for `method`. You should use `type` if you're using versions of jQuery prior to 1.9.0.
		- **url** (default: `The current page`) Type: [String](types#String)   A string containing the URL to which the request is sent.
		- **username** Type: [String](types#String)  A username to be used with XMLHttpRequest in response to an HTTP access authentication request.
		- **xhr** (default: `ActiveXObject when available (IE), the XMLHttpRequest otherwise`) Type: [Function](types#Function)() Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.
		- **xhrFields** Type: [PlainObject](types#PlainObject)   An object of fieldName-fieldValue pairs to set on the native `XHR` object. For example, you can use it to set `withCredentials` to `true` for cross-domain requests if needed.
		
		 
		```
		$.ajax({
		   url: a_cross_domain_url,
		   xhrFields: {
		      withCredentials: true
		   }
		});
		```
		 **In jQuery 1.5**, the `withCredentials` property was not propagated to the native `XHR` and thus CORS requests requiring it would ignore this flag. For this reason, we recommend using jQuery 1.5.1+ should you require the use of it.
		
		  (version added: [1.5.1](https://api.jquery.com/category/version/1.5.1/))

  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()](jquery.get)` and `[.load()](load)` are available and are easier to use. If less common options are required, though, `$.ajax()` can be used more flexibly.

 At its simplest, the `$.ajax()` function can be called with no arguments:

 
```
$.ajax();
```
 **Note:** Default settings can be set globally by using the `[$.ajaxSetup()](jquery.ajaxsetup)` function.

 This example, using no options, loads the contents of the current page, but does nothing with the result. To use the result, you can implement one of the callback functions.

 #### The jqXHR Object

 The jQuery XMLHttpRequest (jqXHR) object returned by `$.ajax()` **as of jQuery 1.5** is a superset of the browser's native XMLHttpRequest object. For example, it contains `responseText` and `responseXML` properties, as well as a `getResponseHeader()` method. When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the `jqXHR` object simulates native XHR functionality where possible. 

 **As of jQuery 1.5.1**, the `jqXHR` object also contains the `overrideMimeType()` method (it was available in jQuery 1.4.x, as well, but was temporarily removed in jQuery 1.5). The `.overrideMimeType()` method may be used in the `beforeSend()` callback function, for example, to modify the response content-type header:

 
```
$.ajax({
  url: "https://fiddle.jshell.net/favicon.png",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
  });
```
 The jqXHR objects returned by `$.ajax()` as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see [Deferred object](category/deferred-object) for more information). These methods take one or more function arguments that are called when the `$.ajax()` request terminates. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.) Available Promise methods of the jqXHR object include: 

 * **jqXHR.done(function( data, textStatus, jqXHR ) {});** An alternative construct to the success callback option, refer to `[deferred.done()](deferred.done)` for implementation details.
* **jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});** An alternative construct to the error callback option, the `.fail()` method replaces the deprecated `.error()` method. Refer to `[deferred.fail()](deferred.fail)` for implementation details.
* **jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });** (added in jQuery 1.6) An alternative construct to the complete callback option, the `.always()` method replaces the deprecated `.complete()` method.

 In response to a successful request, the function's arguments are the same as those of `.done()`: data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of `.fail()`: the jqXHR object, textStatus, and errorThrown. Refer to `[deferred.always()](deferred.always)` for implementation details.
* **jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});** Incorporates the functionality of the `.done()` and `.fail()` methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to [`deferred.then()`](deferred.then) for implementation details.

  **Deprecation Notice:** The `jqXHR.success()`, `jqXHR.error()`, and `jqXHR.complete()` callbacks are removed as of jQuery 3.0. You can use `jqXHR.done()`, `jqXHR.fail()`, and `jqXHR.always()` instead.

  
```
// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second complete" );
});
```
 The `this` reference within all callbacks is the object in the `context` option passed to `$.ajax` in the settings; if `context` is not specified, `this` is a reference to the Ajax settings themselves.

 For backward compatibility with `XMLHttpRequest`, a `jqXHR` object will expose the following properties and methods:

 * `readyState`
* `responseXML` and/or `responseText` when the underlying request responded with xml and/or text, respectively
* `status`
* `statusText` (may be an empty string in HTTP/2)
* `abort( [ statusText ] )`
* `getAllResponseHeaders()` as a string
* `getResponseHeader( name )`
* `overrideMimeType( mimeType )`
* `setRequestHeader( name, value )` which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
* `statusCode( callbacksByStatusCode )`

 No `onreadystatechange` mechanism is provided, however, since `done`, `fail`, `always`, and `statusCode` cover all conceivable requirements.

 #### Callback Function Queues

 The `beforeSend`, `error`, `dataFilter`, `success` and `complete` options all accept callback functions that are invoked at the appropriate times.

 **As of jQuery 1.5**, the `fail` and `done`, and, as of jQuery 1.6, `always` callback hooks are first-in, first-out managed queues, allowing for more than one callback for each hook. See [Deferred object methods](category/deferred-object), which are implemented internally for these `$.ajax()` callback hooks.

 The callback hooks provided by `$.ajax()` are as follows:

 1. `beforeSend` callback option is invoked; it receives the `jqXHR` object and the `settings` object as parameters.
2. `error` callback option is invoked, if the request fails. It receives the `jqXHR`, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".
3. `dataFilter` callback option is invoked immediately upon successful receipt of response data. It receives the returned data and the value of `dataType`, and must return the (possibly altered) data to pass on to `success`.
4. `success` callback option is invoked, if the request succeeds. It receives the returned data, a string containing the success code, and the `jqXHR` object.
5. **Promise callbacks** — `.done()`, `.fail()`, `.always()`, and `.then()` — are invoked, in the order they are registered.
6. `complete` callback option fires, when the request finishes, whether in failure or success. It receives the `jqXHR` object, as well as a string containing the success or error code.

 #### Data Types

 Different types of response to `$.ajax()` call are subjected to different kinds of pre-processing before being passed to the success handler. The type of pre-processing depends by default upon the Content-Type of the response, but can be set explicitly using the `dataType` option. If the `dataType` option is provided, the Content-Type header of the response will be disregarded.

 The available data types are `text`, `html`, `xml`, `json`, `jsonp`, and `script`.

 If `text` or `html` is specified, no pre-processing occurs. The data is simply passed on to the success handler, and made available through the `responseText` property of the `jqXHR` object.

 If `xml` is specified, the response is parsed using [`jQuery.parseXML`](jquery.parsexml) before being passed, as an [`XMLDocument`](types#XMLDocument), to the success handler. The XML document is made available through the `responseXML` property of the `jqXHR` object.

 If `json` is specified, the response is parsed using [`jQuery.parseJSON`](jquery.parsejson) before being passed, as an object, to the success handler. The parsed JSON object is made available through the `responseJSON` property of the `jqXHR` object.

 If `script` is specified, `$.ajax()` will execute the JavaScript that is received from the server before passing it on to the success handler as a string.

 If `jsonp` is specified, `$.ajax()` will automatically append a query string parameter of (by default) `callback=?` to the URL. The `jsonp` and `jsonpCallback` properties of the settings passed to `$.ajax()` can be used to specify, respectively, the name of the query string parameter and the name of the JSONP callback function. The server should return valid JavaScript that passes the JSON response into the callback function. `$.ajax()` will execute the returned JavaScript, calling the JSONP callback function, before passing the JSON object contained in the response to the `$.ajax()` success handler.

 For more information on JSONP, see the [original post detailing its use](https://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/).

 #### Sending Data to the Server

 By default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the `type` option. This option affects how the contents of the `data` option are sent to the server. POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard.

 The `data` option can contain either a query string of the form `key1=value1&key2=value2`, or an object of the form `{key1: 'value1', key2: 'value2'}`. If the latter form is used, the data is converted into a query string using `[jQuery.param()](jquery.param)` before it is sent. This processing can be circumvented by setting `processData` to `false`. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the `contentType` option from `application/x-www-form-urlencoded` to a more appropriate MIME type.

 #### Advanced Options

 The `global` option prevents handlers registered using `[.ajaxSend()](ajaxsend)`, `[.ajaxError()](ajaxerror)`, and similar methods from firing when this request would trigger them. This can be useful to, for example, suppress a loading indicator that was implemented with `[.ajaxSend()](ajaxsend)` if the requests are frequent and brief. With cross-domain script and JSONP requests, the global option is automatically set to `false`. See the descriptions of these methods below for more details.

 If the server performs HTTP authentication before providing a response, the user name and password pair can be sent via the `username` and `password` options.

 Ajax requests are time-limited, so errors can be caught and handled to provide a better user experience. Request timeouts are usually either left at their default or set as a global default using `[$.ajaxSetup()](jquery.ajaxsetup)` rather than being overridden for specific requests with the `timeout` option.

 By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set `cache` to `false`. To cause the request to report failure if the asset has not been modified since the last request, set `ifModified` to `true`.

 The `scriptCharset` allows the character set to be explicitly specified for requests that use a `<script>` tag (that is, a type of `script` or `jsonp`). This is useful if the script and host page have differing character sets.

 The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The `async` option to `$.ajax()` defaults to `true`, indicating that code execution can continue after the request is made. Setting this option to `false` (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

 The `$.ajax()` function returns the `XMLHttpRequest` object that it creates. Normally jQuery handles the creation of this object internally, but a custom function for manufacturing one can be specified using the `xhr` option. The returned object can generally be discarded, but does provide a lower-level interface for observing and manipulating the request. In particular, calling `.abort()` on the object will halt the request before it completes.

 #### Extending Ajax

 **As of jQuery 1.5**, jQuery's Ajax implementation includes [prefilters](jquery.ajaxprefilter), [transports](jquery.ajaxtransport), and converters that allow you to extend Ajax with a great deal of flexibility.

 #### Using Converters

 `$.ajax()` converters support mapping data types to other data types. If, however, you want to map a custom data type to a known type (e.g `json`), you must add a correspondence between the response Content-Type and the actual data type using the `contents` option:

 
```
$.ajaxSetup({
  contents: {
    mycustomtype: /mycustomtype/
  },
  converters: {
    "mycustomtype json": function( result ) {
      // Do stuff
      return newresult;
    }
  }
});
```
 This extra object is necessary because the response Content-Types and data types never have a strict one-to-one correspondence (hence the regular expression).

 To convert from a supported type (e.g `text`, `json`) to a custom data type and back again, use another pass-through converter:

 
```
$.ajaxSetup({
  contents: {
    mycustomtype: /mycustomtype/
  },
  converters: {
    "text mycustomtype": true,
    "mycustomtype json": function( result ) {
      // Do stuff
      return newresult;
    }
  }
});
```
 The above now allows passing from `text` to `mycustomtype` and then `mycustomtype` to `json`.

  ### Additional Notes:

 * Due to browser security restrictions, most "Ajax" requests are subject to the [same origin policy](https://en.wikipedia.org/wiki/Same_origin_policy "Same Origin Policy on Wikipedia"); the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
* Script and JSONP requests are not subject to the same origin policy restrictions.
 Examples:
---------


 Save some data to the server and notify the user once it's complete.

 
```
$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
```
   Retrieve the latest version of an HTML page.

 
```
$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });
```
   Send an xml document as data to the server. By setting the processData option to `false`, the automatic conversion of data to strings is prevented.

 
```
var xmlDocument = [create xml document];
var xmlRequest = $.ajax({
  url: "page.php",
  processData: false,
  data: xmlDocument
});
 
xmlRequest.done( handleResponse );
```
   Send an id as data to the server, save some data to the server, and notify the user once it's complete. If the request fails, alert the user.

 
```
var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});
 
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
 
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});
```
   Load and execute a JavaScript file.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.ajax>

jQuery.ajaxPrefilter()
======================

   jQuery.ajaxPrefilter( [dataTypes ], handler )Returns: [undefined](types#undefined)
-----------------------------------------------------------------------------------

  **Description:** Handle custom Ajax options or modify existing options before each request is sent and before they are processed by `$.ajax()`.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.ajaxPrefilter( [dataTypes ], handler )](#jQuery-ajaxPrefilter-dataTypes-handler)


	+ **dataTypes** Type: [String](types#String)  An optional string containing one or more space-separated dataTypes
	+ **handler** Type: [Function](types#Function)( [PlainObject](types#PlainObject) options, [PlainObject](types#PlainObject) originalOptions, [jqXHR](types#jqXHR) jqXHR ) A handler to set default values for future Ajax requests.

  A typical prefilter registration using `$.ajaxPrefilter()` looks like this:

 
```
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  // Modify options, control originalOptions, store jqXHR, etc
});
```
 where:

 * `options` are the request options
* `originalOptions` are the options as provided to the `$.ajax()` method, unmodified and, thus, without defaults from `ajaxSettings`
* `jqXHR` is the jqXHR object of the request

 Prefilters are a perfect fit when custom options need to be handled. Given the following code, for example, a call to `$.ajax()` would automatically abort a request to the same URL if the custom `abortOnRetry` option is set to `true`:

 
```
var currentRequests = {};
 
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  if ( options.abortOnRetry ) {
    if ( currentRequests[ options.url ] ) {
      currentRequests[ options.url ].abort();
    }
    currentRequests[ options.url ] = jqXHR;
  }
});
```
 Prefilters can also be used to modify existing options. For example, the following proxies cross-domain requests through https://mydomain.net/proxy/:

 
```
$.ajaxPrefilter(function( options ) {
  if ( options.crossDomain ) {
    options.url = "https://mydomain.net/proxy/" + encodeURIComponent( options.url );
    options.crossDomain = false;
  }
});
```
 If the optional `dataTypes` argument is supplied, the prefilter will be only be applied to requests with the indicated dataTypes. For example, the following only applies the given prefilter to JSON and script requests:

 
```
$.ajaxPrefilter( "json script", function( options, originalOptions, jqXHR ) {
  // Modify options, control originalOptions, store jqXHR, etc
});
```
 The `$.ajaxPrefilter()` method can also redirect a request to another dataType by returning that dataType. For example, the following sets a request as "script" if the URL has some specific properties defined in a custom `isActuallyScript()` function:

 
```
$.ajaxPrefilter(function( options ) {
  if ( isActuallyScript( options.url ) ) {
    return "script";
  }
});
```
 This would ensure not only that the request is considered "script" but also that all the prefilters specifically attached to the script dataType would be applied to it.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.ajaxPrefilter>

jQuery.ajaxSetup()
==================

   jQuery.ajaxSetup( options )Returns: [PlainObject](types#PlainObject)
---------------------------------------------------------------------

  **Description:** Set default values for future Ajax requests. Its use is not recommended.

 * ####  version added: [1.1](https://api.jquery.com/category/version/1.1/)[jQuery.ajaxSetup( options )](#jQuery-ajaxSetup-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A set of key/value pairs that configure the default Ajax request. All options are optional.

  For details on the settings available for `$.ajaxSetup()`, see `[$.ajax()](jquery.ajax)`. 

 All subsequent Ajax calls using any function will use the new settings, unless overridden by the individual calls, until the next invocation of `$.ajaxSetup()`.

 **Note:** The settings specified here will affect *all* calls to `$.ajax` or Ajax-based derivatives such as `$.get()`. This can cause undesirable behavior since other callers (for example, plugins) may be expecting the normal default settings. For that reason we *strongly recommend against using this API*. Instead, set the options explicitly in the call or define a simple plugin to do so.

 For example, the following sets a default for the `url` parameter before pinging the server repeatedly:

 
```
$.ajaxSetup({
  url: "ping.php"
});
```
 Now each time an Ajax request is made, the "ping.php" URL will be used automatically:

 
```
$.ajax({
  // url not set here; uses ping.php
  data: { "name": "Dan" }
});
```
  Note: Global callback functions should be set with their respective global Ajax event handler methods—`[.ajaxStart()](ajaxstart)`, `[.ajaxStop()](ajaxstop)`, `[.ajaxComplete()](ajaxcomplete)`, `[.ajaxError()](ajaxerror)`, `[.ajaxSuccess()](ajaxsuccess)`, `[.ajaxSend()](ajaxsend)`—rather than within the `options` object for `$.ajaxSetup()`.

   Example:
--------


 Sets the defaults for Ajax requests to the url "/xmlhttp/", disables global handlers and uses POST instead of GET. The following Ajax requests then sends some data without having to set anything else.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.ajaxSetup>

jQuery.ajaxTransport()
======================

   jQuery.ajaxTransport( dataType, handler )Returns: [undefined](types#undefined)
-------------------------------------------------------------------------------

  **Description:** Creates an object that handles the actual transmission of Ajax data.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.ajaxTransport( dataType, handler )](#jQuery-ajaxTransport-dataType-handler)


	+ **dataType** Type: [String](types#String)  A string identifying the data type to use
	+ **handler** Type: [Function](types#Function)( [PlainObject](types#PlainObject) options, [PlainObject](types#PlainObject) originalOptions, [jqXHR](types#jqXHR) jqXHR ) A handler to return the new transport object to use with the data type provided in the first argument.

  A transport is an object that provides two methods, `send` and `abort`, that are used internally by `$.ajax()` to issue requests. A transport is the most advanced way to enhance `$.ajax()` and should be used only as a last resort when prefilters and converters are insufficient.

 Since each request requires its own transport object instance, transports cannot be registered directly. Therefore, you should provide a function that returns a transport instead.

 Transports factories are registered using `$.ajaxTransport()`. A typical registration looks like this:

 
```
$.ajaxTransport( dataType, function( options, originalOptions, jqXHR ) {
  if( /* transportCanHandleRequest */ ) {
    return {
      send: function( headers, completeCallback ) {
        // Send code
      },
      abort: function() {
        // Abort code
      }
    };
  }
});
```
 where:

 * `options` are the request options
* `originalOptions` are the options as provided to the `$.ajax()` method, unmodified and, thus, without defaults from ajaxSettings
* `jqXHR` is the jqXHR object of the request
* `headers` is an object of (key-value) request headers that the transport can transmit if it supports it
* `completeCallback` is the callback used to notify Ajax of the completion of the request

 `completeCallback` has the following signature:

 
```
function( status, statusText, responses, headers ) {}
```
 where:

 * `status` is the HTTP status code of the response, like 200 for a typical success, or 404 for when the resource is not found.
* `statusText` is the statusText of the response.
* `responses` (Optional) is An object containing dataType/value that contains the response in all the formats the transport could provide (for instance, a native XMLHttpRequest object would set responses to `{ xml: XMLData, text: textData }` for a response that is an XML document)
* `headers` (Optional) is a string containing all the response headers if the transport has access to them (akin to what `XMLHttpRequest.getAllResponseHeaders()` would provide).

 Just like prefilters, a transport's factory function can be attached to a specific dataType:

 
```
$.ajaxTransport( "script", function( options, originalOptions, jqXHR ) {
  // Will only be called for script requests
});
```
 The following example shows how a minimal image transport could be implemented:

 
```
$.ajaxTransport( "image", function( s ) {
  if ( s.type === "GET" && s.async ) {
    var image;
    return {
      send: function( _ , callback ) {
        image = new Image();
        function done( status ) {
          if ( image ) {
            var statusText = ( status === 200 ) ? "success" : "error",
              tmp = image;
            image = image.onreadystatechange = image.onerror = image.onload = null;
            callback( status, statusText, { image: tmp } );
          }
        }
        image.onreadystatechange = image.onload = function() {
          done( 200 );
        };
        image.onerror = function() {
          done( 404 );
        };
        image.src = s.url;
      },
      abort: function() {
        if ( image ) {
          image = image.onreadystatechange = image.onerror = image.onload = null;
        }
      }
    };
  }
});
```
 #### Handling Custom Data Types

 The jQuery Ajax implementation comes with a set of standard dataTypes, such as text, json, xml, and html.

 Use the `converters` option in `[$.ajaxSetup()](jquery.ajaxsetup)` to augment or modify the data type conversion strategies used by `$.ajax()`.

  The unminified jQuery source itself includes a list of default converters, which effectively illustrates how they can be used: 

 
```
// List of data converters
// 1) Key format is "source_type destination_type"
//    (a single space in-between)
// 2) The catchall symbol "*" can be used for source_type
converters: {
  // Convert anything to text
  "* text": window.String,
  // Text to html (true = no transformation)
  "text html": true,
  // Evaluate text as a json expression
  "text json": jQuery.parseJSON,
  // Parse text as xml
  "text xml": jQuery.parseXML
}
```
 When you specify a `converters` option globally in `$.ajaxSetup()` or per call in `$.ajax()`, the object will map onto the default converters, overwriting those you specify and leaving the others intact.

 For example, the jQuery source uses `$.ajaxSetup()` to add a converter for "text script":

 
```
jQuery.ajaxSetup({
  accepts: {
    script: "text/javascript, application/javascript"
  },
  contents: {
    script: /javascript/
  },
  converters: {
    "text script": jQuery.globalEval
  }
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.ajaxTransport>

jQuery.boxModel
===============

   jQuery.boxModelReturns: [Boolean](types#Boolean)version deprecated: [1.3](https://api.jquery.com/category/version/1.3/), removed: [1.8](https://api.jquery.com/category/version/1.8/)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** States if the current page, in the user's browser, is being rendered using the [W3C CSS Box Model](https://www.w3.org/TR/REC-CSS2/box.html).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery.boxModel

   Note: This API has been removed in jQuery 3.0; check if `.document.compatMode` is equal to `"CSS1Compat"` instead. Or, even better - always specify a DOCTYPE and avoid using quirks mode which jQuery doesn't support.

    

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.boxModel>

jQuery.browser
==============

   #### Contents:

 * [jQuery.browser](#jQuery-browser1)
* [jQuery.browser.version](#jQuery-browser-version2)

 
 jQuery.browserReturns: [PlainObject](types#PlainObject)version deprecated: [1.3](https://api.jquery.com/category/version/1.3/), removed: [1.9](https://api.jquery.com/category/version/1.9/)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Contains flags for the useragent, read from navigator.userAgent. **This property was removed in jQuery 1.9** and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery.browser

   Note: This API has been removed in jQuery 1.9; please rely on feature detection instead.

  The `$.browser` property provides information about the web browser that 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.

 Available flags are:

 * webkit (as of jQuery 1.4)
* safari (deprecated)
* opera
* msie
* mozilla

 This property is available immediately. It is therefore safe to use it to determine whether or not to call `$(document).ready()`. The `$.browser` property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery.

 Because `$.browser` uses `navigator.userAgent` to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. Instead of relying on `$.browser` it's better to use libraries like [Modernizr](https://modernizr.com/).

  Examples:
---------


 Show the browser info.

 
```
jQuery.each( jQuery.browser, function( i, val ) {
  $( "<div>" + i + " : <span>" + val + "</span>" )
  .appendTo( document.body );
});
```
   Return true if the current useragent is some version of Microsoft's Internet Explorer. **Will not work in jQuery 1.9 or later** unless the [jQuery Migrate](https://github.com/jquery/jquery-migrate/#readme) plugin is included.

 
```
$.browser.msie;
```
   Alert "this is WebKit!" only for WebKit browsers. **Will not work in jQuery 1.9 or later** unless the [jQuery Migrate](https://github.com/jquery/jquery-migrate/#readme) plugin is included.

 
```
  if ( $.browser.webkit ) {
    alert( "This is WebKit!" );
  }
```
   jQuery.browser.versionReturns: [String](types#String)version deprecated: [1.3](https://api.jquery.com/category/version/1.3/), removed: [1.9](https://api.jquery.com/category/version/1.9/)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** The version number of the rendering engine for the user's browser. **This property was removed in jQuery 1.9** and is available only through the jQuery.migrate plugin.

 * ####  version added: [1.1.3](https://api.jquery.com/category/version/1.1.3/)jQuery.browser.version

   Note: This API has been removed in jQuery 1.9; please rely on feature detection instead.

  Here are some typical results:

 * Internet Explorer: 6.0, 7.0, 8.0
* Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9
* Opera: 10.06, 11.01
* Safari/Webkit: 312.8, 418.9

 Note that IE8 claims to be 7 in Compatibility View.

  Examples:
---------


 Return the version number of the rendering engine used by the user's current browser. For example, FireFox 4 returns 2.0 (the version of the Gecko rendering engine it utilizes). **Will not work in jQuery 1.9 or later** unless the [jQuery Migrate](https://github.com/jquery/jquery-migrate/#readme) plugin is included.

 
```
$( "p" ).html( "The version # of the browser's rendering engine is: <span>" +
  $.browser.version + "</span>" );
```
   Alert the version of IE's rendering engine that is being used. **Will not work in jQuery 1.9 or later** unless the [jQuery Migrate](https://github.com/jquery/jquery-migrate/#readme) plugin is included.

 
```
if ( $.browser.msie ) {
  alert( $.browser.version );
}
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.browser>

jQuery.Callbacks()
==================

   jQuery.Callbacks( flags )Returns: [Callbacks](types#Callbacks)
---------------------------------------------------------------

  **Description:** A multi-purpose callbacks list object that provides a powerful way to manage callback lists.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[jQuery.Callbacks( flags )](#jQuery-Callbacks-flags)


	+ **flags** Type: [String](types#String)  An optional list of space-separated flags that change how the callback list behaves.

  The `$.Callbacks()` function is internally used to provide the base functionality behind the jQuery `$.ajax()` and `$.Deferred()` components. It can be used as a similar base to define functionality for new components.

 `$.Callbacks()` supports a number of methods including `[callbacks.add()](callbacks.add)`,`[callbacks.remove()](callbacks.remove)`, `[callbacks.fire()](callbacks.fire)` and `[callbacks.disable()](callbacks.disable)`.

 ### Getting started

 The following are two sample methods named `fn1` and `fn2`:

 
```
function fn1( value ) {
  console.log( value );
}
 
function fn2( value ) {
  console.log( "fn2 says: " + value );
  return false;
}
```
 These can be added as callbacks to a `$.Callbacks` list and invoked as follows:

 
```
var callbacks = $.Callbacks();
callbacks.add( fn1 );
 
// Outputs: foo!
callbacks.fire( "foo!" );
 
callbacks.add( fn2 );
 
// Outputs: bar!, fn2 says: bar!
callbacks.fire( "bar!" );
```
 The result of this is that it becomes simple to construct complex lists of callbacks where input values can be passed through to as many functions as needed with ease.

 Two specific methods were being used above: `.add()` and `.fire()`. The `.add()` method supports adding new callbacks to the callback list, while the `.fire()` method executes the added functions and provides a way to pass arguments to be processed by the callbacks in the same list.

 Another method supported by `$.Callbacks` is `.remove()`, which has the ability to remove a particular callback from the callback list. Here's a practical example of `.remove()` being used:

 
```
var callbacks = $.Callbacks();
callbacks.add( fn1 );
 
// Outputs: foo!
callbacks.fire( "foo!" );
 
callbacks.add( fn2 );
 
// Outputs: bar!, fn2 says: bar!
callbacks.fire( "bar!" );
 
callbacks.remove( fn2 );
 
// Only outputs foobar, as fn2 has been removed.
callbacks.fire( "foobar" );
```
 ### Supported Flags

 The `flags` argument is an optional argument to `$.Callbacks()`, structured as a list of space-separated strings that change how the callback list behaves (eg. `$.Callbacks( "unique stopOnFalse" )`).

 Possible flags:
---------------

 * `once`: Ensures the callback list can only be fired once (like a Deferred).
* `memory`: Keeps track of previous values and will call any callback added after the list has been fired right away with the latest "memorized" values (like a Deferred).
* `unique`: Ensures a callback can only be added once (so there are no duplicates in the list).
* `stopOnFalse`: Interrupts callings when a callback returns false.

 By default a callback list will act like an event callback list and can be "fired" multiple times.

 For examples of how `flags` should ideally be used, see below:

  `$.Callbacks( "once" )`:
-------------------------

 
```
var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
*/
```
  `$.Callbacks( "memory" )`:
---------------------------

 
```
var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
foobar
*/
```
  `$.Callbacks( "unique" )`:
---------------------------

 
```
var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // Repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
bar
fn2 says:bar
foobar
*/
```
  `$.Callbacks( "stopOnFalse" )`:
--------------------------------

 
```
function fn1( value ) {
  console.log( value );
  return false;
}
 
function fn2( value ) {
  fn1( "fn2 says: " + value );
  return false;
}
 
var callbacks = $.Callbacks( "stopOnFalse" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
bar
foobar
*/
```
 Because `$.Callbacks()` supports a list of flags rather than just one, setting several flags has a cumulative effect similar to "&&". This means it's possible to combine flags to create callback lists that, say, both are *unique* and *ensure if list was already fired, adding more callbacks will have it called with the latest fired value* (i.e. `$.Callbacks("unique memory")`).

  `$.Callbacks( 'unique memory' )`:
----------------------------------

 
```
function fn1( value ) {
  console.log( value );
  return false;
}
 
function fn2( value ) {
  fn1( "fn2 says: " + value );
  return false;
}
 
var callbacks = $.Callbacks( "unique memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // Repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.add( fn2 );
callbacks.fire( "baz" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
baz
fn2 says:baz
foobar
*/
```
 Flag combinations with `$.Callbacks()` are internally in jQuery for the `.done()` and `.fail()` functions on a Deferred — both of which use `$.Callbacks('memory once')`.

 The methods of `$.Callbacks` can also be detached, should there be a need to define short-hand versions for convenience:

 
```
var callbacks = $.Callbacks(),
  add = callbacks.add,
  remove = callbacks.remove,
  fire = callbacks.fire;
 
add( fn1 );
fire( "hello world" );
remove( fn1 );
```
 ### $.Callbacks, $.Deferred and Pub/Sub

 The general idea behind pub/sub (Publish/Subscribe, or, the Observer pattern) is the promotion of loose coupling in applications. Rather than single objects calling on the methods of other objects, an object instead subscribes to a specific task or activity of another object and is notified when it occurs. Observers are also called Subscribers, and we refer to the object being observed as the Publisher (or the subject). Publishers notify subscribers when events occur.

 To demonstrate the component-creation capabilities of `$.Callbacks()`, it's possible to implement a Pub/Sub system using only callback lists. Using `$.Callbacks` as a topics queue, a system for publishing and subscribing to topics can be implemented as follows:

 
```
var topics = {};
 
jQuery.Topic = function( id ) {
  var callbacks, method,
    topic = id && topics[ id ];
 
  if ( !topic ) {
    callbacks = jQuery.Callbacks();
    topic = {
      publish: callbacks.fire,
      subscribe: callbacks.add,
      unsubscribe: callbacks.remove
    };
    if ( id ) {
      topics[ id ] = topic;
    }
  }
  return topic;
};
```
 This can then be used by parts of your application to publish and subscribe to events of interest quite easily:

 
```
// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );
 
// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );
 
// Here, "hello world!" gets pushed to fn1 and fn2
// when the "mailArrived" notification is published
// with "woo! mail!" also being pushed to fn1 when
// the "mailSent" notification is published.
 
/*
output:
hello world!
fn2 says: hello world!
woo! mail!
*/
```
 While this is useful, the implementation can be taken further. Using `$.Deferreds`, it's possible to ensure publishers only publish notifications for subscribers once particular tasks have been completed (resolved). See the below code sample for some further comments on how this could be used in practice:

 
```
// Subscribe to the mailArrived notification
$.Topic( "mailArrived" ).subscribe( fn1 );
 
// Create a new instance of Deferreds
var dfd = $.Deferred();
 
// Define a new topic (without directly publishing)
var topic = $.Topic( "mailArrived" );
 
// When the deferred has been resolved, publish a
// notification to subscribers
dfd.done( topic.publish );
 
// Here the Deferred is being resolved with a message
// that will be passed back to subscribers. It's possible to
// easily integrate this into a more complex routine
// (eg. waiting on an Ajax call to complete) so that
// messages are only published once the task has actually
// finished.
dfd.resolve( "it's been published!" );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.Callbacks>

jQuery.contains()
=================

   jQuery.contains( container, contained )Returns: [Boolean](types#Boolean)
-------------------------------------------------------------------------

  **Description:** Check to see if a DOM element is a descendant of another DOM element.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.contains( container, contained )](#jQuery-contains-container-contained)


	+ **container** Type: [Element](types#Element)  The DOM element that may contain the other element.
	+ **contained** Type: [Element](types#Element)  The DOM element that may be contained by (a descendant of) the other element.

  The `$.contains()` method returns `true` if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply. Otherwise, it returns `false`. Only *element* nodes are supported; if the second argument is a text or comment node, `$.contains()` will return `false`.

  **Note:** The first argument *must* be a DOM element, not a jQuery object or plain JavaScript object.

   Example:
--------


 Check if an element is a descendant of another.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.contains>

jQuery.escapeSelector()
=======================

   jQuery.escapeSelector( selector )Returns: [Selector](types#Selector)
---------------------------------------------------------------------

  **Description:** Escapes any character that has a special meaning in a CSS selector.

 * ####  version added: [3.0](https://api.jquery.com/category/version/3.0/)[jQuery.escapeSelector( selector )](#jQuery-escapeSelector-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to escape.

  This method is useful for situations where a class name or an ID contains characters that have a special meaning in CSS, such as the dot or the semicolon.

 The method is essentially a shim for the [CSS Working Group's CSS.escape() method](https://drafts.csswg.org/cssom/#the-css.escape()-method). The main difference is that `$.escapeSelector()` can be reliably used in all of jQuery's supported browsers.

  Examples:
---------


 Escape an ID containing a hash.

 
```
$.escapeSelector( "#target" ); // "\#target"
```
   Select all the elements having a class name of `.box` inside a `div`.

 
```
$( "div" ).find( "." + $.escapeSelector( ".box" ) );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.escapeSelector>

Category: Properties of the Global jQuery Object
================================================

 
These properties are associated with the global jQuery object.

    [jQuery.browser](../../jquery.browser "Permalink to jQuery.browser")
=====================================================================

  Contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

     [jQuery.fx.interval](../../jquery.fx.interval "Permalink to jQuery.fx.interval")
=================================================================================

  The rate (in milliseconds) at which animations fire.

     [jQuery.fx.off](../../jquery.fx.off "Permalink to jQuery.fx.off")
==================================================================

  Globally disable all animations.

     [jQuery.holdReady()](../../jquery.holdready "Permalink to jQuery.holdReady()")
===============================================================================

  Holds or releases the execution of jQuery’s ready event.

     [jQuery.ready](../../jquery.ready "Permalink to jQuery.ready")
===============================================================

  A Promise-like object (or “thenable”) that resolves when the document is ready.

     [jQuery.support](../../jquery.support "Permalink to jQuery.support")
=====================================================================

  A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery’s internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project’s feature-detection needs, we strongly recommend the use of an external library such as Modernizr instead of dependency on properties in jQuery.support.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/properties/global-jquery-object-properties>

jQuery.getScript()
==================

   jQuery.getScript( url [, success ] )Returns: [jqXHR](types#jqXHR)
------------------------------------------------------------------

  **Description:** Load a JavaScript file from the server using a GET HTTP request, then execute it.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.getScript( url [, success ] )](#jQuery-getScript-url-success)


	+ **url** Type: [String](types#String)  A string containing the URL to which the request is sent.
	+ **success** Type: [Function](types#Function)( [String](types#String) script, [String](types#String) textStatus, [jqXHR](types#jqXHR) jqXHR ) A callback function that is executed if the request succeeds.

  This is a shorthand Ajax function, which is equivalent to:

 
```
$.ajax({
  url: url,
  dataType: "script",
  success: success
});
```
 The script is executed in the global context, so it can refer to other variables and use jQuery functions. Included scripts can have some impact on the current page.

 ####  Success Callback

 The callback is fired once the script has been loaded but not necessarily executed.

 Scripts are included and run by referencing the file name:

 
```
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});
```
 #### Handling Errors

 As of jQuery 1.5, you may use [`.fail()`](deferred.fail) to account for errors:

 
```
$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});
```
 Prior to jQuery 1.5, the global `.ajaxError()` callback event had to be used in order to handle `$.getScript()` errors:

 
```
$( "div.log" ).ajaxError(function( e, jqxhr, settings, exception ) {
  if ( settings.dataType == "script" ) {
    $( this ).text( "Triggered ajaxError handler." );
  }
});
```
 Prior to jQuery 3.5.0, unsuccessful HTTP responses with a script `Content-Type` were still executed.

 #### Caching Responses

 By default, `$.getScript()` sets the cache setting to `false`. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using [`$.ajaxSetup()`](jquery.ajaxsetup): 

 
```
$.ajaxSetup({
  cache: true
});
```
 Alternatively, you could define a new method that uses the more flexible `$.ajax()` method.

  Examples:
---------


 Define a $.cachedScript() method that allows fetching a cached script:

 
```
jQuery.cachedScript = function( url, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
 
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});
```
   Load the [official jQuery Color Animation plugin](https://github.com/jquery/jquery-color) dynamically and bind some color animations to occur once the new functionality is loaded.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <style>
  .block {
     background-color: blue;
     width: 150px;
     height: 70px;
     margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div class="block"></div>
 
<script>
var url = "https://code.jquery.com/color/jquery.color.js";
$.getScript( url, function() {
  $( "#go" ).click(function() {
    $( ".block" )
      .animate({
        backgroundColor: "rgb(255, 180, 180)"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "olive"
      }, 1000 )
      .delay( 500 )
      .animate({
        backgroundColor: "#00f"
      }, 1000 );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.getScript>

jQuery.cssHooks
===============

   jQuery.cssHooksReturns: [Object](types#Object)
-----------------------------------------------

  **Description:** Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)jQuery.cssHooks

  The `$.cssHooks` object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients. 

 For example, some versions of Webkit-based browsers require `-webkit-border-radius` to set the `border-radius` on an element, while earlier Firefox versions require `-moz-border-radius`. A css hook can normalize these vendor-prefixed properties to let `.css()` accept a single, standard property name (`border-radius`, or with DOM property syntax, `borderRadius`).

 In addition to providing fine-grained control over how specific style properties are handled, `$.cssHooks` also extends the set of properties available to the `.animate()` method.

 Defining a new css hook is straight-forward. The skeleton template below can serve as a guide to creating your own. 

 
```
(function( $ ) {
 
// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}
 
// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});
 
})( jQuery );
```
 #### Feature Testing

 Before normalizing a vendor-specific CSS property, first determine whether the browser supports the standard property or a vendor-prefixed variation. For example, to check for support of the `border-radius` property, see if any variation is a member of a temporary element's `style` object.

 
```
(function( $ ) {
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
 
    // Capitalize first character of the prop to test vendor prefix
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "ms" ],
    div = document.createElement( "div" );
 
  if ( prop in div.style ) {
 
    // Browser supports standard CSS property name
    supportedProp = prop;
  } else {
 
    // Otherwise test support for vendor-prefixed property names
    for ( var i = 0; i < prefixes.length; i++ ) {
      vendorProp = prefixes[ i ] + capProp;
      if ( vendorProp in div.style ) {
        supportedProp = vendorProp;
        break;
      }
    }
  }
 
  // Avoid memory leak in IE
  div = null;
 
  // Add property to $.support so it can be accessed elsewhere
  $.support[ prop ] = supportedProp;
  return supportedProp;
}
 
// Call the function, e.g. testing for "border-radius" support:
styleSupport( "borderRadius" );
 
})( jQuery );
```
 #### Defining a complete css hook

 To define a complete css hook, combine the support test with a filled-out version of the skeleton template provided in the first example:

 
```
(function( $ ) {
 
if ( !$.cssHooks ) {
  throw( new Error( "jQuery 1.4.3+ is needed for this plugin to work" ) );
}
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "ms" ],
    div = document.createElement( "div" );
 
  if ( prop in div.style ) {
    supportedProp = prop;
  } else {
    for ( var i = 0; i < prefixes.length; i++ ) {
      vendorProp = prefixes[ i ] + capProp;
      if ( vendorProp in div.style ) {
        supportedProp = vendorProp;
        break;
      }
    }
  }
 
  div = null;
  $.support[ prop ] = supportedProp;
  return supportedProp;
}
 
var borderRadius = styleSupport( "borderRadius" );
 
// Set cssHooks only for browsers that support a vendor-prefixed border radius
if ( borderRadius && borderRadius !== "borderRadius" ) {
  $.cssHooks.borderRadius = {
    get: function( elem, computed, extra ) {
      return $.css( elem, borderRadius );
    },
    set: function( elem, value) {
      elem.style[ borderRadius ] = value;
    }
  };
}
 
})( jQuery );
```
 You can then set the border radius in a supported browser using either the DOM (camelCased) style or the CSS (hyphenated) style:

 
```
$( "#element" ).css( "borderRadius", "10px" );
$( "#another" ).css( "border-radius", "20px" );
```
 If the browser lacks support for any form of the CSS property, vendor-prefixed or not, the style is not applied to the element. However, if the browser supports a proprietary alternative, it can be applied to the cssHooks instead. 

 
```
(function( $ ) {
 
// Feature test for support of a CSS property
// and a proprietary alternative
// ...
if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {
 
  // Set cssHooks for browsers that
  // support only a vendor-prefixed someCSSProp
  $.cssHooks.someCSSProp = {
    get: function( elem, computed, extra ) {
      return $.css( elem, $.support.someCSSProp );
    },
    set: function( elem, value) {
      elem.style[ $.support.someCSSProp ] = value;
    }
  };
} else if ( supportsProprietaryAlternative ) {
  $.cssHooks.someCSSProp = {
    get: function( elem, computed, extra ) {
      // Handle crazy conversion from the proprietary alternative
    },
    set: function( elem, value ) {
      // Handle crazy conversion to the proprietary alternative
    }
  }
}
 
})( jQuery );
```
 #### Special units

 By default, jQuery adds a "px" unit to the values passed to the `.css()` method. This behavior can be prevented by adding the property to the [`jQuery.cssNumber`](jquery.cssnumer) object

 
```
$.cssNumber.someCSSProp = true;
```
 #### Animating with cssHooks

 A css hook can also hook into jQuery's animation mechanism by adding a property to the `jQuery.fx.step` object:

 
```
$.fx.step.someCSSProp = function( fx ) {
  $.cssHooks.someCSSProp.set( fx.elem, fx.now + fx.unit );
};
```
 Note that this works best for simple numeric-value animations. More custom code may be required depending on the CSS property, the type of value it returns, and the animation's complexity.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.cssHooks>

jQuery.dequeue()
================

   jQuery.dequeue( element [, queueName ] )Returns: [undefined](types#undefined)
------------------------------------------------------------------------------

  **Description:** Execute the next function on the queue for the matched element.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[jQuery.dequeue( element [, queueName ] )](#jQuery-dequeue-element-queueName)


	+ **element** Type: [Element](types#Element)  A DOM element from which to remove and execute a queued function.
	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.

  **Note:** This is a low-level method, you should probably use `[.dequeue()](dequeue)` instead.

 When `jQuery.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 `jQuery.dequeue()` to be called, so that the sequence can continue.

  Example:
--------


 Use jQuery.dequeue() to end a custom queue function which allows the queue to keep going.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.dequeue demo</title>
  <style>
  div {
    margin: 3px;
    width: 50px;
    position: absolute;
    height: 50px;
    left: 10px;
    top: 30px;
    background-color: yellow;
  }
  div.red {
    background-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Start</button>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" )
    .animate({ left: '+=200px' }, 2000 )
    .animate({ top: '0px' }, 600 )
    .queue(function() {
      $( this ).toggleClass( "red" );
      $.dequeue( this );
    })
    .animate({ left:'10px', top:'30px' }, 700 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.dequeue>

jQuery.getJSON()
================

   jQuery.getJSON( url [, data ] [, success ] )Returns: [jqXHR](types#jqXHR)
--------------------------------------------------------------------------

  **Description:** Load JSON-encoded data from the server using a GET HTTP request.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.getJSON( url [, data ] [, success ] )](#jQuery-getJSON-url-data-success)


	+ **url** Type: [String](types#String)  A string containing the URL to which the request is sent.
	+ **data** Type: [PlainObject](types#PlainObject) or [String](types#String)  A plain object or string that is sent to the server with the request.
	+ **success** Type: [Function](types#Function)( [PlainObject](types#PlainObject) data, [String](types#String) textStatus, [jqXHR](types#jqXHR) jqXHR ) A callback function that is executed if the request succeeds.

  This is a shorthand Ajax function, which is equivalent to:

 
```
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});
```
 Data that is sent to the server is appended to the URL as a query string. If the value of the `data` parameter is a plain object, it is converted to a string and url-encoded before it is appended to the URL.

 Most implementations will specify a success handler:

 
```
$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });
 
  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});
```
 This example, of course, relies on the structure of the JSON file:

 
```
{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}
```
 Using this structure, the example loops through the requested data, builds an unordered list, and appends it to the body.

 The `success` callback is passed the returned data, which is typically a JavaScript object or array as defined by the JSON structure and parsed using the `[$.parseJSON()](jquery.parsejson)` method. It is also passed the text status of the response.

 **As of jQuery 1.5**, the `success` callback function receives a ["jqXHR" object](jquery.get#jqxhr-object) (in **jQuery 1.4**, it received the `XMLHttpRequest` object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the `jqXHR` and `textStatus` parameters passed to the success callback are undefined.

  **Important:** As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see <https://json.org/>.

  #### JSONP

 If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the `jsonp` data type in `[$.ajax()](jquery.ajax)` for more details.

 #### The jqXHR Object

 **As of jQuery 1.5**, all of jQuery's Ajax methods return a superset of the `XMLHTTPRequest` object. This jQuery XHR object, or "jqXHR," returned by `$.getJSON()` implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see [Deferred object](category/deferred-object) for more information). The `jqXHR.done()` (for success), `jqXHR.fail()` (for error), and `jqXHR.always()` (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the [jqXHR Object](jquery.ajax#jqXHR) section of the `$.ajax()` documentation.

 The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including `$.getJSON()`, to chain multiple `.done()`, `.always()`, and `.fail()` callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

 
```
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  console.log( "second complete" );
});
```
 #### Deprecation Notice

 The `jqXHR.success()`, `jqXHR.error()`, and `jqXHR.complete()` callback methods are **removed as of jQuery 3.0**. You can use `jqXHR.done()`, `jqXHR.fail()`, and `jqXHR.always()` instead.

  ### Additional Notes:

 * Due to browser security restrictions, most "Ajax" requests are subject to the [same origin policy](https://en.wikipedia.org/wiki/Same_origin_policy "Same Origin Policy on Wikipedia"); the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
* Script and JSONP requests are not subject to the same origin policy restrictions.
 Examples:
---------


 Loads the four most recent pictures of Mount Rainier from the Flickr JSONP API.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="images"></div>
 
<script>
(function() {
  var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
</script>
 
</body>
</html>
```
 #### Demo:

   Load the JSON data from test.js and access a name from the returned JSON data.

 
```
$.getJSON( "test.js", function( json ) {
  console.log( "JSON Data: " + json.users[ 3 ].name );
 });
```
   Load the JSON data from test.js, passing along additional data, and access a name from the returned JSON data. If an error occurs, log an error message instead.

 
```
$.getJSON( "test.js", { name: "John", time: "2pm" } )
  .done(function( json ) {
    console.log( "JSON Data: " + json.users[ 3 ].name );
  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.getJSON>

jQuery.Deferred()
=================

   jQuery.Deferred( [beforeStart ] )Returns: [Deferred](types#Deferred)
---------------------------------------------------------------------

  **Description:**  A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.Deferred( [beforeStart ] )](#jQuery-Deferred-beforeStart)


	+ **beforeStart** Type: [Function](types#Function)( [Deferred](types#Deferred) deferred )  A function that is called just before the constructor returns.

  The `jQuery.Deferred()` factory creates a new `deferred` object.

 The `jQuery.Deferred` method can be passed an optional function, which is called just before the method returns and is passed the new `deferred` object as both the `this` object and as the first argument to the function. The called function can attach callbacks using [`deferred.then()`](deferred.then), for example.

 A Deferred object starts in the *pending* state. Any callbacks added to the object with [`deferred.then()`](deferred.then), [`deferred.always()`](deferred.always), [`deferred.done()`](deferred.done), or [`deferred.fail()`](deferred.fail) are queued to be executed later. Calling [`deferred.resolve()`](deferred.resolve) or [`deferred.resolveWith()`](deferred.resolvewith) transitions the Deferred into the *resolved* state and immediately executes any `doneCallbacks` that are set. Calling [`deferred.reject()`](deferred.reject) or [`deferred.rejectWith()`](deferred.rejectwith) transitions the Deferred into the *rejected* state and immediately executes any `failCallbacks` that are set. Once the object has entered the resolved or rejected state, it stays in that state. Callbacks can still be added to the resolved or rejected Deferred — they will execute immediately.

 ####  Enhanced Callbacks with jQuery Deferred

 In JavaScript it is common to invoke functions that optionally accept callbacks that are called within that function. For example, in versions prior to jQuery 1.5, asynchronous processes such as `jQuery.ajax()` accept callbacks to be invoked some time in the near-future upon success, error, and completion of the ajax request.

 `jQuery.Deferred()` introduces several enhancements to the way callbacks are managed and invoked. In particular, `jQuery.Deferred()` provides flexible ways to provide multiple callbacks, and these callbacks can be invoked regardless of whether the original callback dispatch has already occurred. jQuery Deferred is based on the [CommonJS Promises/A](http://wiki.commonjs.org/wiki/Promises/A) design.

 One model for understanding Deferred is to think of it as a chain-aware function wrapper. The [`deferred.then()`](deferred.then), [`deferred.always()`](deferred.always), [`deferred.done()`](deferred.done), and [`deferred.fail()`](deferred.fail) methods specify the functions to be called and the [`deferred.resolve(args)`](deferred.resolve) or [`deferred.reject(args)`](deferred.reject) methods "call" the functions with the arguments you supply. Once the Deferred has been resolved or rejected it stays in that state; a second call to `deferred.resolve()`, for example, is ignored. If more functions are added by `deferred.then()`, for example, after the Deferred is resolved, they are called immediately with the arguments previously provided.

 In most cases where a jQuery API call returns a Deferred or Promise-compatible object, such as [`jQuery.ajax()`](jquery.ajax) or [`jQuery.when()`](jquery.when), you will only want to use the [`deferred.then()`](deferred.then), [`deferred.done()`](deferred.done), and [`deferred.fail()`](deferred.fail) methods to add callbacks to the Deferred's queues. The internals of the API call or code that created the Deferred will invoke [`deferred.resolve()`](deferred.resolve) or [`deferred.reject()`](deferred.reject) on the deferred at some point, causing the appropriate callbacks to run.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.Deferred>

jQuery.each()
=============

   jQuery.each( array, callback )Returns: [Object](types#Object)
--------------------------------------------------------------

  **Description:** 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.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.each( array, callback )](#jQuery-each-array-callback)


	+ **array** Type: [ArrayLikeObject](types#ArrayLikeObject)  The array or array-like object to iterate over.
	+ **callback** Type: [Function](types#Function)( [Integer](types#Integer) indexInArray, [Object](types#Object) value ) The function that will be executed on every value.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.each( object, callback )](#jQuery-each-object-callback)


	+ **object** Type: [Object](types#Object)  The object to iterate over.
	+ **callback** Type: [Function](types#Function)( [String](types#String) propertyName, [Object](types#Object) valueOfProperty ) The function that will be executed on every value.

  The `$.each()` function is not the same as [$(selector).each()](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 an 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.

 
```
$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});
```
 This produces two messages:

  `0: 52`   
 `1: 97` 

 If an object is used as the collection, the callback is passed a key-value pair each time:

 
```
var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});
```
 Once again, this produces two messages:

  `flammable: inflammable`   
 `duh: no duh` 

 We can break the `$.each()` loop at a particular iteration by making the callback function return `false`. Returning *non-false* is the same as a `continue` statement in a for loop; it will skip immediately to the next iteration.

  Examples:
---------


 Iterates through the array displaying each number as both a word and numeral

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.each demo</title>
  <style>
  div {
    color: blue;
  }
  div#five {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
 
<script>
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
 
jQuery.each( arr, function( i, val ) {
  $( "#" + val ).text( "Mine is " + val + "." );
 
  // Will stop running after "three"
  return ( val !== "three" );
});
 
jQuery.each( obj, function( i, val ) {
  $( "#" + i ).append( document.createTextNode( " - " + val ) );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Iterates over items in an array, accessing both the current item and its index.

 
```
$.each( [ "a", "b", "c" ], function( i, l ){
  alert( "Index #" + i + ": " + l );
});
```
   Iterates over the properties in an object, accessing both the current item and its key.

 
```
$.each({ name: "John", lang: "JS" }, function( k, v ) {
  alert( "Key: " + k + ", Value: " + v );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.each>

jQuery.data()
=============

  Store arbitrary data associated with the specified element and/or return the value that was set. #### Contents:

 * [jQuery.data( element, key, value )](#jQuery-data1)
	+ [jQuery.data( element, key, value )](#jQuery-data-element-key-value)
* [jQuery.data( element, key )](#jQuery-data2)
	+ [jQuery.data( element, key )](#jQuery-data-element-key)
	+ [jQuery.data( element )](#jQuery-data-element)

 
 jQuery.data( element, key, value )Returns: [Object](types#Object)
------------------------------------------------------------------

  **Description:** Store arbitrary data associated with the specified element. Returns the value that was set.

 * ####  version added: [1.2.3](https://api.jquery.com/category/version/1.2.3/)[jQuery.data( element, key, value )](#jQuery-data-element-key-value)


	+ **element** Type: [Element](types#Element)  The DOM element to associate with the data.
	+ **key** Type: [String](types#String)  A string naming the piece of data to set.
	+ **value** Type: [Anything](types#Anything)  The new data value; this can be any Javascript type except `undefined`.

  **Note:** This is a low-level method; a more convenient `[.data()](data)` is also available.

 The `jQuery.data()` method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page. We can set several distinct values for a single element and retrieve them later:

 
```
jQuery.data( document.body, "foo", 52 );
jQuery.data( document.body, "bar", "test" );
```
  ### Additional Notes:

 * Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
* `undefined` is not recognized as a data value. Calls such as `jQuery.data( el, "name", undefined )` will return the corresponding data for "name", and is therefore the same as `jQuery.data( el, "name" )`.
 Example:
--------


 Store then retrieve a value from the div element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   jQuery.data( element, key )Returns: [Object](types#Object)
-----------------------------------------------------------

  **Description:** Returns value at named data store for the element, as set by `jQuery.data(element, name, value)`, or the full data store for the element.

 * ####  version added: [1.2.3](https://api.jquery.com/category/version/1.2.3/)[jQuery.data( element, key )](#jQuery-data-element-key)


	+ **element** Type: [Element](types#Element)  The DOM element to query for the data.
	+ **key** Type: [String](types#String)  Name of the data stored.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.data( element )](#jQuery-data-element)


	+ **element** Type: [Element](types#Element)  The DOM element to query for the data.

  **Note:** This is a low-level method; a more convenient `[.data()](data)` is also available.

 **Regarding HTML5 data-\* attributes:** This low-level method does NOT retrieve the `data-*` attributes unless the more convenient `[.data()](data)` method has already retrieved them.

 The `jQuery.data()` method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:

 
```
alert( jQuery.data( document.body, "foo" ) );
alert( jQuery.data( document.body ) );
```
 The above lines alert the data values that were set on the `body` element. If nothing was set on that element, an empty string is returned.

 Calling `jQuery.data( element )` retrieves all of the element's associated values as a JavaScript object. Note that jQuery itself uses this method to store data for internal use, such as event handlers, so do not assume that it contains only data that your own code has stored.

 *Note:* this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.

  Example:
--------


 Get the data named "blah" stored at for an element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.data demo</title>
  <style>
  div {
    margin: 5px;
    background: yellow;
  }
  button {
    margin: 5px;
    font-size: 14px;
  }
  p {
    margin: 5px;
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
 
<script>
$( "button" ).click( function() {
  var value,
    div = $( "div" )[ 0 ];
  switch ( $( "button" ).index( this ) ) {
  case 0 :
    value = jQuery.data( div, "blah" );
    break;
  case 1 :
    jQuery.data( div, "blah", "hello" );
    value = "Stored!";
    break;
  case 2 :
    jQuery.data( div, "blah", 86 );
    value = "Stored!";
    break;
  case 3 :
    jQuery.removeData( div, "blah" );
    value = "Removed!";
    break;
  }
  $( "span" ).text( "" + value );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.data>

jQuery.error()
==============

   jQuery.error( message )Returns:
--------------------------------

  **Description:** Takes a string and throws an exception containing it.

 * ####  version added: [1.4.1](https://api.jquery.com/category/version/1.4.1/)[jQuery.error( message )](#jQuery-error-message)


	+ **message** Type: [String](types#String)  The message to send out.

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

  Example:
--------


 Override jQuery.error for display in Firebug.

 
```
jQuery.error = console.error;
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.error>

jQuery.fx.off
=============

   jQuery.fx.offReturns: [Boolean](types#Boolean)
-----------------------------------------------

  **Description:** Globally disable all animations.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)jQuery.fx.off

  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:

 * jQuery is being used on a low-resource device.
* Users are encountering accessibility problems with the animations.

 Animations can be turned back on by setting the property to `false`.

  Example:
--------


 Toggle animation on and off

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fx.off demo</title>
  <style>
  div {
    width: 50px;
    height: 30px;
    margin: 5px;
    float: left;
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input type="button" value="Run">
<button>Toggle fx</button>
<div></div>
 
<script>
var toggleFx = function() {
  $.fx.off = !$.fx.off;
};
toggleFx();
$( "button" ).click( toggleFx );
$( "input" ).click(function() {
  $( "div" ).toggle( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.fx.off>

jQuery.cssNumber
================

   jQuery.cssNumberReturns: [Object](types#Object)
------------------------------------------------

  **Description:** An object containing all CSS properties that may be used without a unit. The [`.css()`](css) method uses this object to see if it may append `px` to unitless values.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)jQuery.cssNumber

  You can think about `jQuery.cssNumber` as a list of all CSS properties you might use without a unit. It's used by [`.css()`](css) to determine if it needs to add `px` to unitless values.

 The keys of the `jQuery.cssNumber` object are camel-cased and the values are all set to `true`. If you want to prevent the [`.css()`](css) method from automatically adding the `px` unit for a specific CSS property, you can add an extra property to the `jQuery.cssNumber` object.

 
```
jQuery.cssNumber.someCSSProp = true;
```
 By default the object contains the following properties:

 * `zIndex`
* `fontWeight`
* `opacity`
* `zoom`
* `lineHeight`
* `widows` (added in jQuery 1.6)
* `orphans` (added in jQuery 1.6)
* `fillOpacity` (added in jQuery 1.6.2)
* `columnCount` (added in jQuery 1.9)
* `order` (added in jQuery 1.10.2)
* `flexGrow` (added in jQuery 1.11.1)
* `flexShrink` (added in jQuery 1.11.1)

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.cssNumber>

jQuery.fx.interval
==================

   jQuery.fx.intervalReturns: [Number](types#Number)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
-------------------------------------------------------------------------------------------------------------------------

  **Description:** The rate (in milliseconds) at which animations fire.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)jQuery.fx.interval

  This property is deprecated as of version 3.0, and has no effect in browsers that support the [`requestAnimationFrame`](https://caniuse.com/#feat=requestanimationframe) method.

 On browsers that do not support `requestAnimationFrame`, this property can be changed to adjust the interval at which animations will run. The default is 13 milliseconds.

 Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect.

  Example:
--------


 Cause all animations to run with less frames.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fx.interval demo</title>
  <style>
  div {
    width: 50px;
    height: 30px;
    margin: 5px;
    float: left;
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><input type="button" value="Run"></p>
<div></div>
 
<script>
jQuery.fx.interval = 100;
$( "input" ).click(function() {
  $( "div" ).toggle( 3000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.fx.interval>

jQuery.extend()
===============

   jQuery.extend( target, object1 [, objectN ] )Returns: [Object](types#Object)
-----------------------------------------------------------------------------

  **Description:** Merge the contents of two or more objects together into the first object.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.extend( target, object1 [, objectN ] )](#jQuery-extend-target-object1-objectN)


	+ **target** Type: [Object](types#Object)   An object that will receive the new properties.
	+ **object1** Type: [Object](types#Object)  An object containing additional properties to merge in.
	+ **objectN** Type: [Object](types#Object)  Additional objects containing properties to merge in.
* ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)[jQuery.extend( [deep ], target, object1 [, objectN ] )](#jQuery-extend-deep-target-object1-objectN)


	+ **deep** Type: [Boolean](types#Boolean)  If true, the merge becomes recursive (aka. deep copy). Passing `false` for this argument is not supported.
	+ **target** Type: [Object](types#Object)  The object to extend. It will receive the new properties.
	+ **object1** Type: [Object](types#Object)  An object containing additional properties to merge in.
	+ **objectN** Type: [Object](types#Object)  Additional objects containing properties to merge in.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.extend( object )](#jQuery-extend-object)


	+ **object** Type: [Object](types#Object)   An object to merge onto the jQuery namespace.

  When two or more object arguments are supplied to `$.extend()`, properties from all of the objects are added to the target object. Arguments that are `null` or `undefined` are ignored.

 If only one argument is supplied to `$.extend()`, this means the target argument was omitted. In this case, the jQuery object itself is assumed to be the target. By doing this, you can add new functions to the jQuery namespace. This can be useful for plugin authors wishing to add new methods to JQuery.

 Keep in mind that the target object (first argument) will be modified, and will also be returned from `$.extend()`. If, however, you want to preserve both of the original objects, you can do so by passing an empty object as the target:

 
```
var object = $.extend({}, object1, object2);
```
 The merge performed by `$.extend()` is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second or subsequent object. The values are not merged. This can be seen in the example below by examining the value of banana. However, by passing `true` for the first function argument, objects will be recursively merged.

 **Warning**: Versions prior to 3.4 had a security issue where calling `jQuery.extend(true, {}, object)` on an unsanitized object containing a `__proto__` property would extend `Object.prototype`.

 **Warning**: Passing `false` for the first argument is not supported.

 Undefined properties are not copied. However, properties inherited from the object's prototype *will* be copied over. Properties that are an object constructed via `new MyCustomObject(args)`, or built-in JavaScript types such as Date or RegExp, are not re-constructed and will appear as plain Objects in the resulting object or array.

 On a `deep` extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not. Deep-extending a cyclical data structure will result in an error.

 For needs that fall outside of this behavior, write a custom extend method instead, or use a library like [lodash](https://lodash.com). 

  Examples:
---------


 Merge two objects, modifying the first.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 
// Merge object2 into object1
$.extend( object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Merge two objects recursively, modifying the first.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 
// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Merge defaults and options, without modifying the defaults. This is a common plugin development pattern.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
 
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.extend>

jQuery.get()
============

   jQuery.get( url [, data ] [, success ] [, dataType ] )Returns: [jqXHR](types#jqXHR)
------------------------------------------------------------------------------------

  **Description:** Load data from the server using a HTTP GET request.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.get( url [, data ] [, success ] [, dataType ] )](#jQuery-get-url-data-success-dataType)


	+ **url** Type: [String](types#String)  A string containing the URL to which the request is sent.
	+ **data** Type: [PlainObject](types#PlainObject) or [String](types#String)  A plain object or string that is sent to the server with the request.
	+ **success** Type: [Function](types#Function)( [PlainObject](types#PlainObject) data, [String](types#String) textStatus, [jqXHR](types#jqXHR) jqXHR ) A callback function that is executed if the request succeeds. Required if `dataType` is provided, but you can use `null` or [`jQuery.noop`](jquery.noop) as a placeholder.
	+ **dataType** Type: [String](types#String)  The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
* ####  version added: [1.12-and-2.2](https://api.jquery.com/category/version/1.12-and-2.2/)[jQuery.get( [settings ] )](#jQuery-get-settings)


	+ **settings** Type: [PlainObject](types#PlainObject)  A set of key/value pairs that configure the Ajax request. All properties except for `url` are optional. A default can be set for any option with [$.ajaxSetup()](jquery.ajaxsetup). See [jQuery.ajax( settings )](jquery.ajax#jQuery-ajax-settings) for a complete list of all settings. The type option will automatically be set to `GET`.

  This is a shorthand Ajax function, which is equivalent to:

 
```
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
```
 The `success` callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response. 

 **As of jQuery 1.5**, the `success` callback function is also passed a ["jqXHR" object](#jqxhr-object) (in **jQuery 1.4**, it was passed the `XMLHttpRequest` object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the `jqXHR` and `textStatus` parameters passed to the success callback are undefined.

 Most implementations will specify a success handler:

 
```
$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});
```
 This example fetches the requested HTML snippet and inserts it on the page.

 #### The jqXHR Object

 **As of jQuery 1.5**, all of jQuery's Ajax methods return a superset of the `XMLHTTPRequest` object. This jQuery XHR object, or "jqXHR," returned by `$.get()` implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see [Deferred object](category/deferred-object) for more information). The `jqXHR.done()` (for success), `jqXHR.fail()` (for error), and `jqXHR.always()` (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the [jqXHR Object](jquery.ajax#jqXHR) section of the `$.ajax()` documentation.

 The Promise interface also allows jQuery's Ajax methods, including `$.get()`, to chain multiple `.done()`, `.fail()`, and `.always()` callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

 
```
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});
```
 #### Deprecation Notice

 The `jqXHR.success()`, `jqXHR.error()`, and `jqXHR.complete()` callback methods are **removed as of jQuery 3.0**. You can use `jqXHR.done()`, `jqXHR.fail()`, and `jqXHR.always()` instead.

  ### Additional Notes:

 * Due to browser security restrictions, most "Ajax" requests are subject to the [same origin policy](https://en.wikipedia.org/wiki/Same_origin_policy "Same Origin Policy on Wikipedia"); the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
* If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global [.ajaxError()](ajaxerror)  method. Alternatively, as of jQuery 1.5, the `.error()` method of the `jqXHR` object returned by jQuery.get() is also available for error handling.
* Script and JSONP requests are not subject to the same origin policy restrictions.
 Examples:
---------


 Request the test.php page, but ignore the return results.

 
```
$.get( "test.php" );
```
   Request the test.php page and send some additional data along (while still ignoring the return results).

 
```
$.get( "test.php", { name: "John", time: "2pm" } );
```
   Pass arrays of data to the server (while still ignoring the return results).

 
```
$.get( "test.php", { "choices[]": ["Jon", "Susan"] } );
```
   Alert the results from requesting test.php (HTML or XML, depending on what was returned).

 
```
$.get( "test.php", function( data ) {
  alert( "Data Loaded: " + data );
});
```
   Alert the results from requesting test.cgi with an additional payload of data (HTML or XML, depending on what was returned).

 
```
$.get( "test.cgi", { name: "John", time: "2pm" } )
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });
```
   Get the test.php page contents, which has been returned in json format (<?php echo json\_encode( array( "name"=>"John","time"=>"2pm" ) ); ?>), and add it to the page.

 
```
$.get( "test.php", function( data ) {
  $( "body" )
    .append( "Name: " + data.name ) // John
    .append( "Time: " + data.time ); //  2pm
}, "json" );
```
   Get another page on the same domain. Outputs to console both the data returned and the type of data returned.

 
```
// If this was sent on https://api.jquery.com/jQuery.get/ you will
// get the response result of https://api.jquery.com/jQuery.ajax/
$.get( "/jQuery.ajax/", function( data ) {
  console.log( typeof data ); // string
  console.log( data ); // HTML content of the jQuery.ajax page
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.get>

jQuery.fn.extend()
==================

   jQuery.fn.extend( object )Returns: [Object](types#Object)
----------------------------------------------------------

  **Description:** Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.fn.extend( object )](#jQuery-fn-extend-object)


	+ **object** Type: [Object](types#Object)  An object to merge onto the jQuery prototype.

  The `jQuery.fn.extend()` method extends the jQuery prototype (`$.fn`) object to provide new methods that can be chained to the `jQuery()` function.  Example:
--------


 Add two methods to the jQuery prototype (`$.fn`) object and then use one of them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fn.extend demo</title>
  <style>
  label {
    display: block;
    margin: .5em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
 
<script>
jQuery.fn.extend({
  check: function() {
    return this.each(function() {
      this.checked = true;
    });
  },
  uncheck: function() {
    return this.each(function() {
      this.checked = false;
    });
  }
});
 
// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.fn.extend>

jQuery.globalEval()
===================

   jQuery.globalEval( code )Returns: [Anything](types#Anything)
-------------------------------------------------------------

  **Description:** Execute some JavaScript code globally.

 * ####  version added: [1.0.4](https://api.jquery.com/category/version/1.0.4/)[jQuery.globalEval( code )](#jQuery-globalEval-code)


	+ **code** Type: [String](types#String)  The JavaScript code to execute.
* ####  version added: [3.4.0](https://api.jquery.com/category/version/3.4.0/)[jQuery.globalEval( code [, options ] )](#jQuery-globalEval-code-options)


	+ **code** Type: [String](types#String)  The JavaScript code to execute.
	+ **options** Type: [PlainObject](types#PlainObject) 
		- **nonce** Type: [string](types#string)  The nonce attribute passed to the executed script.
* ####  version added: [3.5.0](https://api.jquery.com/category/version/3.5.0/)[jQuery.globalEval( code [, options ] [, doc ] )](#jQuery-globalEval-code-options-doc)


	+ **code** Type: [String](types#String)  The JavaScript code to execute.
	+ **options** Type: [PlainObject](types#PlainObject) 
		- **nonce** Type: [string](types#string)  The nonce attribute passed to the executed script.
	+ **doc** Type: [Document](types#Document)  A document in which context the code will be evaluated.

  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).

  Examples:
---------


 Execute a script in the global context.

 
```
function test() {
  jQuery.globalEval( "var newVar = true;" );
}
test();
// newVar === true
```
   Execute a script with a nonce value on a site with Content Security Policy enabled.

 
```
function test() {
  jQuery.globalEval( "var newVar = true;", {
    nonce: "nonce-2726c7f26c"
  } );
}
test();
// newVar === true
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.globalEval>

jQuery.grep()
=============

   jQuery.grep( array, function [, invert ] )Returns: [Array](types#Array)
------------------------------------------------------------------------

  **Description:** Finds the elements of an array which satisfy a filter function. The original array is not affected.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.grep( array, function [, invert ] )](#jQuery-grep-array-function-invert)


	+ **array** Type: [ArrayLikeObject](types#ArrayLikeObject)  The array-like object to search through.
	+ **function** Type: [Function](types#Function)( [Object](types#Object) elementOfArray, [Integer](types#Integer) indexInArray ) => [Boolean](types#Boolean)  The function to process each item against. The first argument to the function is the item, and the second argument is the index. The function should return a Boolean value. `this` will be the global window object.
	+ **invert** Type: [Boolean](types#Boolean)  If "invert" is false, or not provided, then the function returns an array consisting of all elements for which "callback" returns true. If "invert" is true, then the function returns an array consisting of all elements for which "callback" returns false.

  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.

  The filter function will be passed two arguments: the current array item and its index. The filter function must return 'true' to include the item in the result array.

  Examples:
---------


 Filters the original array of numbers leaving that are not 5 and have an index greater than 4. Then it removes all 9s.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.grep demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
    margin: 0;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<p></p>
<span></span>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Filter an array of numbers to include only numbers bigger then zero.

 
```
$.grep( [ 0, 1, 2 ], function( n, i ) {
  return n > 0;
});
```
 #### Result:

 
```
[ 1, 2 ]
```
   Filter an array of numbers to include numbers that are not bigger than zero.

 
```
$.grep( [ 0, 1, 2 ], function( n, i ) {
    return n > 0;
}, true );
```
 #### Result:

 
```
[ 0 ]
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.grep>

jQuery.isFunction()
===================

   jQuery.isFunction( value )Returns: [boolean](types#boolean)version deprecated: [3.3](https://api.jquery.com/category/version/3.3/)
-----------------------------------------------------------------------------------------------------------------------------------

  **Description:** Determines if its argument is callable as a function.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[jQuery.isFunction( value )](#jQuery-isFunction-value)


	+ **value** Type: [Anything](types#Anything)  The value to be tested.

   As of jQuery 3.3, `jQuery.isFunction()` has been deprecated. In most cases, its use can be replaced by `typeof x === "function"`.

  **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.

  Examples:
---------


 Test a few parameter examples.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.isFunction demo</title>
  <style>
  div {
    color: blue;
    margin: 2px;
    font-size: 14px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>jQuery.isFunction( objs[ 0 ] ) = <span></span></div>
<div>jQuery.isFunction( objs[ 1 ] ) = <span></span></div>
<div>jQuery.isFunction( objs[ 2 ] ) = <span></span></div>
<div>jQuery.isFunction( objs[ 3 ] ) = <span></span></div>
<div>jQuery.isFunction( objs[ 4 ] ) = <span></span></div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Finds out if the parameter is a function.

 
```
$.isFunction(function() {});
```
 #### Result:

 
```
true
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isFunction>

Category: Document Loading
==========================

   [jQuery.holdReady()](../../jquery.holdready "Permalink to jQuery.holdReady()")
===============================================================================

  Holds or releases the execution of jQuery’s ready event.

     [jQuery.ready](../../jquery.ready "Permalink to jQuery.ready")
===============================================================

  A Promise-like object (or “thenable”) that resolves when the document is ready.

     [.load()](../../load-event "Permalink to .load()")
===================================================

  Bind an event handler to the “load” JavaScript event.

     [.ready()](../../ready "Permalink to .ready()")
================================================

  Specify a function to execute when the DOM is fully loaded.

     [.unload()](../../unload "Permalink to .unload()")
===================================================

  Bind an event handler to the “unload” JavaScript event.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/document-loading>

jQuery.hasData()
================

   jQuery.hasData( element )Returns: [Boolean](types#Boolean)
-----------------------------------------------------------

  **Description:** Determine whether an element has any jQuery data associated with it.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.hasData( element )](#jQuery-hasData-element)


	+ **element** Type: [Element](types#Element)  A DOM element to be checked for data.

  The `jQuery.hasData()` method provides a way to determine if an element currently has any values that were set using `[jQuery.data()](jquery.data)`. If there is no data object associated with an element, the method returns `false`; otherwise it returns `true`.

 The primary advantage of `jQuery.hasData(element)` is that it does not create and associate a data object with the element if none currently exists. In contrast, `jQuery.data(element)` always returns a data object to the caller, creating one if no data object previously existed. 

 Note that jQuery's event system uses the jQuery data API to store event handlers. Therefore, binding an event to an element using `.on()`, `.bind()`, `.live()`, `.delegate()`, or one of the shorthand event methods also associates a data object with that element. 

  Example:
--------


 Set data on an element and see the results of hasData.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.hasData demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Results: </p>
 
<script>
var $p = jQuery( "p" ), p = $p[ 0 ];
$p.append( jQuery.hasData( p ) + " " ); // false
 
$.data( p, "testing", 123 );
$p.append( jQuery.hasData( p ) + " " ); // true
 
$.removeData( p, "testing" );
$p.append( jQuery.hasData( p ) + " " ); // false
 
$p.on( "click", function() {} );
$p.append( jQuery.hasData( p ) + " " ); // true
 
$p.off( "click" );
$p.append( jQuery.hasData( p ) + " " ); // false
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.hasData>

Category: Shorthand Methods
===========================

 
These methods perform the more common types of Ajax requests in less code.

    [jQuery.get()](../../jquery.get "Permalink to jQuery.get()")
=============================================================

  Load data from the server using a HTTP GET request.

     [jQuery.getJSON()](../../jquery.getjson "Permalink to jQuery.getJSON()")
=========================================================================

  Load JSON-encoded data from the server using a GET HTTP request.

     [jQuery.getScript()](../../jquery.getscript "Permalink to jQuery.getScript()")
===============================================================================

  Load a JavaScript file from the server using a GET HTTP request, then execute it.

     [jQuery.post()](../../jquery.post "Permalink to jQuery.post()")
================================================================

  Send data to the server using a HTTP POST request.

     [.load()](../../load "Permalink to .load()")
=============================================

  Load data from the server and place the returned HTML into the matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/ajax/shorthand-methods>

jQuery.map()
============

   jQuery.map( array, callback )Returns: [Array](types#Array)
-----------------------------------------------------------

  **Description:** Translate all items in an array or object to new array of items.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.map( array, callback )](#jQuery-map-array-callback)


	+ **array** Type: [Array](types#Array)  The Array to translate.
	+ **callback** Type: [Function](types#Function)( [Object](types#Object) elementOfArray, [Integer](types#Integer) indexInArray ) => [Object](types#Object)  The function to process each item against. The first argument to the function is the array item, the second argument is the index in array The function can return any value. A returned array will be flattened into the resulting array. Within the function, `this` refers to the global (window) object.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[jQuery.map( object, callback )](#jQuery-map-object-callback)


	+ **object** Type: [Object](types#Object)  The Object to translate.
	+ **callback** Type: [Function](types#Function)( [Object](types#Object) propertyOfObject, [String](types#String) key ) => [Object](types#Object)  The function to process each item against. The first argument to the function is the value; the second argument is the key of the object property. The function can return any value to add to the array. A returned array will be flattened into the resulting array. Within the function, `this` refers to the global (window) object.

  If you wish to process a jQuery object — for example, `$('div').map( callback );` — use [.map()](map) instead. 

 The `$.map()` method applies a function to each item in an array or object and maps the results into a new array. **Prior to jQuery 1.6**, `$.map()` supports traversing *arrays only*. **As of jQuery 1.6** it also traverses objects.

 Array-like objects — those with a `.length` property *and* a value on the `.length - 1` index — must be converted to actual arrays before being passed to `$.map()`. The jQuery library provides [$.makeArray()](jquery.makearray) for such conversions.

 
```
// The following object masquerades as an array.
var fakeArray = { "length": 2, 0: "Addy", 1: "Subtracty" };
 
// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )
 
// Now it can be used reliably with $.map()
$.map( realArray, function( val, i ) {
  // Do something
});
```
 The translation function that is provided to this method is called for each top-level element in the array or object and is passed two arguments: The element's value and its index or key within the array or object.

 The function can return:

 * the translated value, which will be mapped to the resulting array
* `null` or `undefined`, to remove the item
* an array of values, which will be flattened into the full array

  Examples:
---------


 Use $.map() to change the values of an array.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.map demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
    margin: 0;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<p></p>
<span></span>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Map the original array to a new one and add 4 to each value.

 
```
$.map( [ 0, 1, 2 ], function( n ) {
  return n + 4;
});
```
 #### Result:

 
```
[4, 5, 6]
```
   Map the original array to a new one, adding 1 to each value if it is bigger then zero and removing it if not.

 
```
$.map( [ 0, 1, 2 ], function( n ) {
  return n > 0 ? n + 1 : null;
});
```
 #### Result:

 
```
[ 2, 3 ]
```
   Map the original array to a new one; each element is added with its original value and the value plus one.

 
```
$.map( [ 0, 1, 2 ], function( n ) {
    return [ n, n + 1 ];
});
```
 #### Result:

 
```
[ 0, 1, 1, 2, 2, 3 ]
```
   Map the original object to a new array and double each value.

 
```
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
  return value * 2;
});
```
 #### Result:

 
```
[ 20, 30, 40 ]
```
   Map an object's keys to an array.

 
```
var dimensions = { width: 10, height: 15, length: 20 };
var keys = $.map( dimensions, function( value, key ) {
  return key;
});
```
 #### Result:

 
```
[ "width", "height", "length" ]
```
   Map the original array to a new one; each element is squared.

 
```
$.map( [ 0, 1, 2, 3 ], function( a ) {
  return a * a;
});
```
 #### Result:

 
```
[ 0, 1, 4, 9 ]
```
   Map the original array to a new one, removing numbers less than 50 by returning `null` and subtracting 45 from the rest.

 
```
$.map( [ 0, 1, 52, 97 ], function( a ) {
  return (a > 50 ? a - 45 : null);
});
```
 #### Result:

 
```
[ 7, 52 ]
```
   Augment the resulting array by returning an array inside the function.

 
```
var array = [ 0, 1, 52, 97 ];
array = $.map( array, function( a, index ) {
  return [ a - 45, index ];
});
```
 #### Result:

 
```
[ -45, 0, -44, 1, 7, 2, 52, 3]
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.map>

jQuery.holdReady()
==================

   jQuery.holdReady( hold )Returns: [undefined](types#undefined)version deprecated: [3.2](https://api.jquery.com/category/version/3.2/)
-------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Holds or releases the execution of jQuery's ready event.

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[jQuery.holdReady( hold )](#jQuery-holdReady-hold)


	+ **hold** Type: [Boolean](types#Boolean)  Indicates whether the ready hold is being requested or released

   Note: This API has been deprecated in jQuery 3.2. Instead of relying on this global switch, it's better to put explicitly wait for required code. If you need to wait both for the ready state & for a custom promise, use the following pattern:

 `$.when( $.ready, customPromise )
 .then( function() {
 // main code
 } )
 .catch( function( error ) {
 // handle errors
 } )`  The `$.holdReady()` method allows the caller to delay jQuery's ready event. This *advanced feature* would typically be used by dynamic script loaders that want to load additional JavaScript such as jQuery plugins before allowing the ready event to occur, even though the DOM may be ready. This method must be called early in the document, such as in the `<head>` immediately after the jQuery script tag. Calling this method after the ready event has already fired will have no effect. 

 To delay the ready event, first call `$.holdReady( true )`. When the ready event should be released to execute, call `$.holdReady( false )`. Note that multiple holds can be put on the ready event, one for each `$.holdReady( true )` call. The ready event will not actually fire until all holds have been released with a corresponding number of `$.holdReady( false )` calls *and* the normal document ready conditions are met. (See [`ready`](ready) for more information.)

  Example:
--------


 Delay the ready event until a custom plugin has loaded.

 
```
$.holdReady( true );
$.getScript( "myplugin.js", function() {
  $.holdReady( false );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.holdReady>

jQuery.isArray()
================

   jQuery.isArray( obj )Returns: [boolean](types#boolean)version deprecated: [3.2](https://api.jquery.com/category/version/3.2/)
------------------------------------------------------------------------------------------------------------------------------

  **Description:** Determine whether the argument is an array.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[jQuery.isArray( obj )](#jQuery-isArray-obj)


	+ **obj** Type: [Object](types#Object)  Object to test whether or not it is an array.

   Note: This API has been deprecated in jQuery 3.2; please use the native [`Array.isArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) method instead.

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

  Example:
--------


 Finds out if the parameter is an array.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.isArray demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Is [] an Array? <b></b>
 
<script>
$( "b" ).append( "" + $.isArray([]) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isArray>

jQuery.isEmptyObject()
======================

   jQuery.isEmptyObject( object )Returns: [Boolean](types#Boolean)
----------------------------------------------------------------

  **Description:** Check to see if an object is empty (contains no enumerable properties).

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.isEmptyObject( object )](#jQuery-isEmptyObject-object)


	+ **object** Type: [Object](types#Object)  The object that will be checked to see if it's empty.

  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). The argument should always be a plain JavaScript `Object` as other types of object (DOM elements, primitive strings/numbers, host objects) may not give consistent results across browsers. To determine if an object is a plain JavaScript object, use [`$.isPlainObject()`](jquery.isplainobject)

  Example:
--------


 Check an object to see if it's empty.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isEmptyObject>

jQuery.inArray()
================

   jQuery.inArray( value, array [, fromIndex ] )Returns: [Number](types#Number)
-----------------------------------------------------------------------------

  **Description:** Search for a specified value within an array and return its index (or -1 if not found).

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[jQuery.inArray( value, array [, fromIndex ] )](#jQuery-inArray-value-array-fromIndex)


	+ **value** Type: [Anything](types#Anything)  The value to search for.
	+ **array** Type: [Array](types#Array)  An array through which to search.
	+ **fromIndex** Type: [Number](types#Number)  The index of the array at which to begin the search. The default is 0, which will search the whole array.

  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.

 Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), to check for the presence of `value` within `array`, you need to check if it's not equal to (or greater than) -1.

 The comparison between values is strict. The following will return `-1` (not found) because a number is being searched in an array of strings:

 
```
$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] );
```
  Example:
--------


 Report the index of some elements in the array.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.inArray demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"Karl" not found, so <span></span></div>
<div>"Pete" is in the array, but not at or after index 2, so <span></span></div>
 
<script>
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.inArray>

jQuery.isNumeric()
==================

   jQuery.isNumeric( value )Returns: [Boolean](types#Boolean)version deprecated: [3.3](https://api.jquery.com/category/version/3.3/)
----------------------------------------------------------------------------------------------------------------------------------

  **Description:** Determines whether its argument represents a JavaScript number.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[jQuery.isNumeric( value )](#jQuery-isNumeric-value)


	+ **value** Type: [Anything](types#Anything)  The value to be tested.

   Note: This API has been deprecated in jQuery 3.3.

  The `$.isNumeric()` method checks whether its argument represents a numeric value. If so, it returns `true`. Otherwise it returns `false`. The argument can be of any type.

 As of jQuery 3.0 `$.isNumeric()` returns `true` only if the argument is of type [`number`](types#Number), or if it's of type `string` and it can be coerced into finite numbers. In all other cases, it returns `false`.

  Example:
--------


 Sample return values of $.isNumeric with various inputs.

 
```
// true (numeric)
$.isNumeric( "-10" )
$.isNumeric( "0" )
$.isNumeric( 0xFF )
$.isNumeric( "0xFF" )
$.isNumeric( "8e5" )
$.isNumeric( "3.1415" )
$.isNumeric( +10 )
$.isNumeric( 0144 )
 
// false (non-numeric)
$.isNumeric( "-0x42" )
$.isNumeric( "7.2acdgs" )
$.isNumeric( "" )
$.isNumeric( {} )
$.isNumeric( NaN )
$.isNumeric( null )
$.isNumeric( true )
$.isNumeric( Infinity )
$.isNumeric( undefined )
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isNumeric>

jQuery.htmlPrefilter()
======================

   jQuery.htmlPrefilter( html )Returns: [String](types#String)
------------------------------------------------------------

  **Description:** Modify and filter HTML strings passed through [jQuery manipulation methods](category/manipulation).

 * ####  version added: [1.12-and-2.2](https://api.jquery.com/category/version/1.12-and-2.2/)[jQuery.htmlPrefilter( html )](#jQuery-htmlPrefilter-html)


	+ **html** Type: [String](types#String)  The HTML string on which to operate.

  This method rarely needs to be called directly. Instead, use it as an entry point to modify existing [jQuery manipulation methods](category/manipulation). jQuery calls this method on input HTML before processing it further: it accepts an HTML string & should return a HTML string as well.

 This function can also be overwritten in order to bypass certain edge case issues. The default `htmlPrefilter` function in jQuery leaves input unmodified since 3.5.0. Older versions would greedily ensure that all tags were XHTML-compliant. This included anything that looked like an HTML tag, but was actually within a string (e.g. `<a title="<div />"><>`), leading to potential security issues. For more information, see the [jQuery Core 3.5 Upgrade guide](https://jquery.com/upgrade-guide/3.5/).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.htmlPrefilter>

jQuery.isPlainObject()
======================

   jQuery.isPlainObject( object )Returns: [Boolean](types#Boolean)
----------------------------------------------------------------

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

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.isPlainObject( object )](#jQuery-isPlainObject-object)


	+ **object** Type: [PlainObject](types#PlainObject)  The object that will be checked to see if it's a plain object.

  **Note:** Host objects (or objects used by browser host environments to complete the execution environment of ECMAScript) have a number of inconsistencies which are difficult to robustly feature detect cross-platform. As a result of this, `$.isPlainObject()` may evaluate inconsistently across browsers in certain instances.

 An example of this is a test against `document.location` using `$.isPlainObject()` as follows:

 
```
console.log( $.isPlainObject( document.location ) );
```
 which throws an invalid pointer exception in IE8. With this in mind, it's important to be aware of any of the gotchas involved in using `$.isPlainObject()` against older browsers. A couple basic examples that do function correctly cross-browser can be found below.

  Example:
--------


 Check an object to see if it's a plain object.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isPlainObject>

jQuery.isXMLDoc()
=================

   jQuery.isXMLDoc( node )Returns: [Boolean](types#Boolean)
---------------------------------------------------------

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

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)[jQuery.isXMLDoc( node )](#jQuery-isXMLDoc-node)


	+ **node** Type: [Element](types#Element)  The DOM node that will be checked to see if it's in an XML document.

 Example:
--------


 Check an object to see if it's in an XML document.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isXMLDoc>

jQuery.isWindow()
=================

   jQuery.isWindow( obj )Returns: [boolean](types#boolean)version deprecated: [3.3](https://api.jquery.com/category/version/3.3/)
-------------------------------------------------------------------------------------------------------------------------------

  **Description:** Determine whether the argument is a window.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[jQuery.isWindow( obj )](#jQuery-isWindow-obj)


	+ **obj** Type: [PlainObject](types#PlainObject)  Object to test whether or not it is a window.

   Note: This API has been deprecated in jQuery 3.3; if you need this function, reimplement it by yourself:

 `function isWindow( obj ) {
 return obj != null && obj === obj.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).

  Example:
--------


 Finds out if the parameter is a window.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.isWindow demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Is 'window' a window? <b></b>
 
<script>
$( "b" ).append( "" + $.isWindow( window ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.isWindow>

jQuery.makeArray()
==================

   jQuery.makeArray( obj )Returns: [Array](types#Array)
-----------------------------------------------------

  **Description:** Convert an array-like object into a true JavaScript array.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[jQuery.makeArray( obj )](#jQuery-makeArray-obj)


	+ **obj** Type: [PlainObject](types#PlainObject)  Any object to turn into a native 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()`).

 Note that after the conversion, any special features the object had (such as the jQuery methods in our example) will no longer be present. The object is now a plain array.

  Examples:
---------


 Turn a collection of HTMLElements into an Array of them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.makeArray demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
 
<script>
// Returns a NodeList
var elems = document.getElementsByTagName( "div" );
// Convert the NodeList to an Array
var arr = jQuery.makeArray( elems );
// Use an Array method on list of dom elements
arr.reverse();
$( arr ).appendTo( document.body );
</script>
 
</body>
</html>
```
 #### Demo:

   Turn a jQuery object into an array

 
```
var obj = $( "li" );
var arr = $.makeArray( obj );
```
 #### Result:

 
```
( typeof obj === "object" && obj.jquery ) === true;
jQuery.isArray( arr ) === true;
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.makeArray>

[jQuery.noConflict()](../../jquery.noconflict "Permalink to jQuery.noConflict()")
==================================================================================

  Relinquish jQuery’s control of the $ variable.

 

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/miscellaneous/setup-methods>

jQuery.merge()
==============

   jQuery.merge( first, second )Returns: [Array](types#Array)
-----------------------------------------------------------

  **Description:** Merge the contents of two arrays together into the first array. 

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.merge( first, second )](#jQuery-merge-first-second)


	+ **first** Type: [ArrayLikeObject](types#ArrayLikeObject)  The first array-like object to merge, the elements of second added.
	+ **second** Type: [ArrayLikeObject](types#ArrayLikeObject)  The second array-like object to merge into the first, unaltered.

  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 `length` and numeric index properties of the first object to include items from the second.

 If you need the original first array, make a copy of it before calling `$.merge()`. Fortunately, `$.merge()` itself can be used for this duplication:

 
```
var newArray = $.merge([], oldArray);
```
 This shortcut creates a new, empty array and merges the contents of oldArray into it, effectively cloning the array.

 Prior to jQuery 1.4, the arguments should be true Javascript Array objects; use `$.makeArray` if they are not.

  Examples:
---------


 Merges two arrays, altering the first argument.

 
```
$.merge( [ 0, 1, 2 ], [ 2, 3, 4 ] )
```
 #### Result:

 
```
[ 0, 1, 2, 2, 3, 4 ]
```
   Merges two arrays, altering the first argument.

 
```
$.merge( [ 3, 2, 1 ], [ 4, 3, 2 ] )
```
 #### Result:

 
```
[ 3, 2, 1, 4, 3, 2 ]
```
   Merges two arrays, but uses a copy, so the original isn't altered.

 
```
var first = [ "a", "b", "c" ];
var second = [ "d", "e", "f" ];
$.merge( $.merge( [], first ), second );
```
 #### Result:

 
```
[ "a", "b", "c", "d", "e", "f" ]
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.merge>

jQuery.proxy()
==============

   jQuery.proxy( function, context )Returns: [Function](types#Function)version deprecated: [3.3](https://api.jquery.com/category/version/3.3/)
--------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Takes a function and returns a new one that will always have a particular context.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.proxy( function, context )](#jQuery-proxy-function-context)


	+ **function** Type: [Function](types#Function)() The function whose context will be changed.
	+ **context** Type: [PlainObject](types#PlainObject)  The object to which the context (`this`) of the function should be set.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.proxy( context, name )](#jQuery-proxy-context-name)


	+ **context** Type: [PlainObject](types#PlainObject)  The object to which the context of the function should be set.
	+ **name** Type: [String](types#String)  The name of the function whose context will be changed (should be a property of the `context` object).
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[jQuery.proxy( function, context [, additionalArguments ] )](#jQuery-proxy-function-context-additionalArguments)


	+ **function** Type: [Function](types#Function)() The function whose context will be changed.
	+ **context** Type: [PlainObject](types#PlainObject)  The object to which the context (`this`) of the function should be set.
	+ **additionalArguments** Type: [Anything](types#Anything)  Any number of arguments to be passed to the function referenced in the `function` argument.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[jQuery.proxy( context, name [, additionalArguments ] )](#jQuery-proxy-context-name-additionalArguments)


	+ **context** Type: [PlainObject](types#PlainObject)  The object to which the context of the function should be set.
	+ **name** Type: [String](types#String)  The name of the function whose context will be changed (should be a property of the `context` object).
	+ **additionalArguments** Type: [Anything](types#Anything)  Any number of arguments to be passed to the function named in the `name` argument.

   Note: This API has been deprecated in jQuery 3.3; please use the native [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) method instead.

  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.

 Be aware, however, that jQuery's event binding subsystem assigns a unique id to each event handling function in order to track it when it is used to specify the function to be unbound. The function represented by `jQuery.proxy()` is seen as a single function by the event subsystem, even when it is used to bind different contexts. To avoid unbinding the wrong handler, use a unique event namespace for binding and unbinding (e.g., `"click.myproxy1"`) rather than specifying the proxied function during unbinding.

 **As of jQuery 1.6**, any number of additional arguments may be supplied to `$.proxy()`, and they will be passed to the function whose context will be changed.

 **As of jQuery 1.9**, when the `context` is `null` or `undefined` the proxied function will be called with the same `this` object as the proxy was called with. This allows `$.proxy()` to be used to partially apply the arguments of a function without changing the context.

  Examples:
---------


 Change the context of functions bound to a click handler using the "function, context" signature. Unbind the first handler after first click.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
 
<script>
var me = {
  type: "zombie",
  test: function( event ) {
    // Without proxy, `this` would refer to the event target
    // use event.target to reference that element.
    var element = event.target;
    $( element ).css( "background-color", "red" );
 
    // With proxy, `this` refers to the me object encapsulating
    // this function.
    $( "#log" ).append( "Hello " + this.type + "<br>" );
    $( "#test" ).off( "click", this.test );
  }
};
 
var you = {
  type: "person",
  test: function( event ) {
    $( "#log" ).append( this.type + " " );
  }
};
 
// Execute you.test() in the context of the `you` object
// no matter where it is called
// i.e. the `this` keyword will refer to `you`
var youClick = $.proxy( you.test, you );
 
// attach click handlers to #test
$( "#test" )
  // this === "zombie"; handler unbound after first click
  .on( "click", $.proxy( me.test, me ) )
 
  // this === "person"
  .on( "click", youClick )
 
  // this === "zombie"
  .on( "click", $.proxy( you.test, me ) )
 
  // this === "<button> element"
  .on( "click", you.test );
</script>
 
</body>
</html>
```
 #### Demo:

   Enforce the context of the function using the "context, function name" signature. Unbind the handler after first click.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p><button id="test">Test</button></p>
  <p id="log"></p>
 
<script>
var obj = {
  name: "John",
  test: function() {
    $( "#log" ).append( this.name );
    $( "#test" ).off( "click", obj.test );
  }
};
$( "#test" ).on( "click", jQuery.proxy( obj, "test" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Change the context of a function bound to the click handler, 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
 
<script>
var me = {
  // I'm a dog
  type: "dog",
 
  // Note that event comes *after* one and two
  test: function( one, two, event ) {
    $( "#log" )
 
      // `one` maps to `you`, the 1st additional
      // argument in the $.proxy function call
      .append( "<h3>Hello " + one.type + ":</h3>" )
 
      // The `this` keyword refers to `me`
      // (the 2nd, context, argument of $.proxy)
      .append( "I am a " + this.type + ", " )
 
      // `two` maps to `they`, the 2nd additional
      // argument in the $.proxy function call
      .append( "and they are " + two.type + ".<br>" )
 
      // The event type is "click"
      .append( "Thanks for " + event.type + "ing." )
 
      // The clicked element is `event.target`,
      // and its type is "button"
      .append( "the " + event.target.type + "." );
  }
};
 
var you = { type: "cat" };
var they = { type: "fish" };
 
// Set up handler to execute me.test() in the context
// of `me`, with `you` and `they` as additional arguments
var proxy = $.proxy( me.test, me, you, they );
 
$( "#test" )
  .on( "click", proxy );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.proxy>

jQuery.noConflict()
===================

   jQuery.noConflict( [removeAll ] )Returns: [Object](types#Object)
-----------------------------------------------------------------

  **Description:** Relinquish jQuery's control of the `$` variable.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.noConflict( [removeAll ] )](#jQuery-noConflict-removeAll)


	+ **removeAll** Type: [Boolean](types#Boolean)  A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).

  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 you need to use another JavaScript library alongside jQuery, return control of `$` back to the other library with a call to `$.noConflict()`. Old references of `$` are saved during jQuery initialization; `noConflict()` simply restores them.

 If for some reason two versions of jQuery are loaded (which is not recommended), calling `$.noConflict( true )` from the second version will return the globally scoped jQuery variables to those of the first version.

 
```
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
```
 This technique is especially effective in conjunction with the `.ready()` method's ability to alias the jQuery object, as within callback passed to `.ready()` you can use `$` if you wish without fear of conflicts later:

 
```
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
```
 If necessary, you can free up the `jQuery` name as well by passing `true` as an argument to the method. This is rarely necessary, and if you must do this (for example, if you need to use multiple versions of the jQuery library on the same page), you need to consider that most plug-ins rely on the presence of the `jQuery` variable and may not operate correctly in this situation.

  Examples:
---------


 Map the original object that was referenced by $ back to $.

 
```
jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
```
   Revert the $ alias and then create and execute a function to provide the $ as a jQuery alias inside the function's scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library. 

 
```
jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);
 
// Other code using $ as an alias to the other library
```
   Create a different alias instead of jQuery to use in the rest of the script.

 
```
var j = jQuery.noConflict();
 
// Do something with jQuery
j( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";
```
   Completely move jQuery to a new namespace in another object.

 
```
var dom = {};
dom.query = jQuery.noConflict( true );
```
 #### Result:

 
```
// Do something with the new jQuery
dom.query( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";
 
// Do something with another version of jQuery
jQuery( "div > p" ).hide();
```
   Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
 
<script>
var $log = $( "#log" );
 
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
 
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
 
jq162 = jQuery.noConflict( true );
 
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.noConflict>

jQuery.noop()
=============

   jQuery.noop()Returns: [undefined](types#undefined)
---------------------------------------------------

  **Description:** An empty function.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.noop()](#jQuery-noop)


	+ This method does not accept any arguments.

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

 This is useful for plugin authors who offer optional callbacks; in the case that no callback is given, something like `jQuery.noop` could execute.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.noop>

jQuery.now()
============

   jQuery.now()Returns: [Number](types#Number)version deprecated: [3.3](https://api.jquery.com/category/version/3.3/)
-------------------------------------------------------------------------------------------------------------------

  **Description:** Return a number representing the current time.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[jQuery.now()](#jQuery-now)


	+ This method does not accept any arguments.

   Note: This API has been deprecated in jQuery 3.3; please use the native [`Date.now()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now) method instead.

  The `$.now()` method is an alias for `Date.now()`.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.now>

jQuery.param()
==============

   jQuery.param( obj )Returns: [String](types#String)
---------------------------------------------------

  **Description:** Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[jQuery.param( obj )](#jQuery-param-obj)


	+ **obj** Type: [Array](types#Array) or [PlainObject](types#PlainObject) or [jQuery](types#jQuery)  An array, a plain object, or a jQuery object to serialize.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[jQuery.param( obj, traditional )](#jQuery-param-obj-traditional)


	+ **obj** Type: [Array](types#Array) or [PlainObject](types#PlainObject) or [jQuery](types#jQuery)  An array, a plain object, or a jQuery object to serialize.
	+ **traditional** Type: [Boolean](types#Boolean)  A Boolean indicating whether to perform a traditional "shallow" serialization.

  This function is used internally to convert form element values into a serialized string representation (See [.serialize()](serialize) for more information).

 As of jQuery 1.3, the return value of a function is used instead of the function as a String.

 As of jQuery 1.4, the `$.param()` method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by setting `jQuery.ajaxSettings.traditional = true;`.

 As of jQuery 3.0, the `$.param()` method no longer uses `jQuery.ajaxSettings.traditional` as its default setting and will default to `false`. For best compatibility across versions, call `$.param()` with an explicit value for the second argument and do not use defaults.

 If the object passed is in an Array, it must be an array of objects in the format returned by [.serializeArray()](serializearray)

 
```
[
  { name: "first", value: "Rick" },
  { name: "last", value: "Astley" },
  { name: "job", value: "Rock Star" }
]
```
  **Note:** Because some frameworks have limited ability to parse serialized arrays, developers should exercise caution when passing an `obj` argument that contains objects or arrays nested within another array.

   **Note:** Because there is no universally agreed-upon specification for param strings, it is not possible to encode complex data structures using this method in a manner that works ideally across all languages supporting such input. Use JSON format as an alternative for encoding complex data instead.

  In jQuery 1.4, HTML5 input elements are also serialized.

 We can display a query string representation of an object and a URI-decoded version of the same as follows:

 
```
var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [ 1, 2, 3 ]
};
var recursiveEncoded = $.param( myObject );
var recursiveDecoded = decodeURIComponent( $.param( myObject ) );
 
alert( recursiveEncoded );
alert( recursiveDecoded );
```
 The values of `recursiveEncoded` and `recursiveDecoded` are alerted as follows:

  `a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3`   
 `a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3` 

 To emulate the behavior of `$.param()` prior to jQuery 1.4, we can set the `traditional` argument to `true`:

 
```
var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [ 1, 2, 3 ]
};
var shallowEncoded = $.param( myObject, true );
var shallowDecoded = decodeURIComponent( shallowEncoded );
 
alert( shallowEncoded );
alert( shallowDecoded );
```
 The values of `shallowEncoded` and `shallowDecoded` are alerted as follows:

  `a=%5Bobject+Object%5D&b=1&b=2&b=3`   
 `a=[object+Object]&b=1&b=2&b=3` 

  Examples:
---------


 Serialize a key/value object.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.param demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="results"></div>
 
<script>
var params = { width:1680, height:1050 };
var str = jQuery.param( params );
$( "#results" ).text( str );
</script>
 
</body>
</html>
```
 #### Demo:

   Serialize a few complex objects

 
```
// <=1.3.2:
$.param({ a: [ 2, 3, 4 ] }); // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [ 2, 3, 4 ] }); // "a[]=2&a[]=3&a[]=4"
 
// <=1.3.2:
$.param({ a: { b: 1, c: 2 }, d: [ 3, 4, { e: 5 } ] });
// "a=[object+Object]&d=3&d=4&d=[object+Object]"
 
// >=1.4:
$.param({ a: { b: 1, c: 2 }, d: [ 3, 4, { e: 5 } ] });
// "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.param>

Category: Helper Functions
==========================

 
These functions assist with common idioms encountered when performing Ajax tasks.

    [jQuery.param()](../../jquery.param "Permalink to jQuery.param()")
===================================================================

  Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

     [.serialize()](../../serialize "Permalink to .serialize()")
============================================================

  Encode a set of form elements as a string for submission.

     [.serializeArray()](../../serializearray "Permalink to .serializeArray()")
===========================================================================

  Encode a set of form elements as an array of names and values.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/ajax/helper-functions>

jQuery.parseJSON()
==================

   jQuery.parseJSON( json )Returns: [String](types#String) or [Number](types#Number) or [Object](types#Object) or [Array](types#Array) or [Boolean](types#Boolean)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Takes a well-formed JSON string and returns the resulting JavaScript value.

 * ####  version added: [1.4.1](https://api.jquery.com/category/version/1.4.1/)[jQuery.parseJSON( json )](#jQuery-parseJSON-json)


	+ **json** Type: [String](types#String)  The JSON string to parse.

  As of jQuery 3.0, `$.parseJSON` is deprecated. To parse JSON strings use the native `JSON.parse` method instead.

 Passing in a malformed JSON string results in a JavaScript exception being thrown. For example, the following are all invalid JSON strings:

 * `"{test: 1}"` (test does not have double quotes around it).
* `"{'test': 1}"` ('test' is using single quotes instead of double quotes).
* `"'test'"` ('test' is using single quotes instead of double quotes).
* `".1"` (a number must start with a digit; `"0.1"` would be valid).
* `"undefined"` (`undefined` cannot be represented in a JSON string; `null`, however, can be).
* `"NaN"` (`NaN` cannot be represented in a JSON string; direct representation of `Infinity` is also not permitted).

 The JSON standard does not permit "control characters" such as a tab or newline. An example like `$.parseJSON( '{ "testing":"1\t2\n3" }' )` will throw an error in most implementations because the JavaScript parser converts the string's tab and newline escapes into literal tab and newline; doubling the backslashes like `"1\\t2\\n3"` yields expected results. This problem is often seen when injecting JSON into a JavaScript file from a server-side language such as PHP.

 Where the browser provides a native implementation of `JSON.parse`, jQuery uses it to parse the string. For details on the JSON format, see <https://json.org/>.

 Prior to jQuery 1.9, `$.parseJSON` returned `null` instead of throwing an error if it was passed an empty string, `null`, or `undefined`, even though those are not valid JSON.

  Example:
--------


 Parse a JSON string.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.parseJSON>

jQuery.parseXML()
=================

   jQuery.parseXML( data )Returns: [XMLDocument](types#XMLDocument)
-----------------------------------------------------------------

  **Description:** Parses a string into an XML document.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.parseXML( data )](#jQuery-parseXML-data)


	+ **data** Type: [String](types#String)  a well-formed XML string to be parsed

  `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.

  Example:
--------


 Create a jQuery object using an XML string and obtain the value of the title node.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.parseXML demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p id="someElement"></p>
<p id="anotherElement"></p>
 
<script>
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() );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.parseXML>

jQuery.parseHTML()
==================

   jQuery.parseHTML( data [, context ] [, keepScripts ] )Returns: [Array](types#Array)
------------------------------------------------------------------------------------

  **Description:** Parses a string into an array of DOM nodes.

 * ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)[jQuery.parseHTML( data [, context ] [, keepScripts ] )](#jQuery-parseHTML-data-context-keepScripts)


	+ **data** Type: [String](types#String)  HTML string to be parsed
	+ **context** (default: `document`) Type: [Element](types#Element)  Document element to serve as the context in which the HTML fragment will be created
	+ **keepScripts** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to include scripts passed in the HTML string

  `jQuery.parseHTML` uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document. These methods do render all trailing or leading text (even if that's just whitespace). To prevent trailing/leading whitespace from being converted to text nodes you can pass the HTML string through [`jQuery.trim`](jquery.trim).

 By default, the `context` is the current `document` if not specified or given as `null` or `undefined`. If the HTML was to be used in another document such as an iframe, that frame's document could be used.

 As of 3.0 the default behavior is changed. If the `context` is not specified or given as `null` or `undefined`, a new `document` is used. This can potentially improve security because inline events will not execute when the HTML is parsed. Once the parsed HTML is injected into a document it does execute, but this gives tools a chance to traverse the created DOM and remove anything deemed unsafe. This improvement does not apply to internal uses of `jQuery.parseHTML` as they usually pass in the current `document`. Therefore, a statement like `$( "#log" ).append( $( htmlString ) )` is still subject to the injection of malicious code.

 Security Considerations
-----------------------

 Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. `jQuery.parseHTML` does not run scripts in the parsed HTML unless `keepScripts` is explicitly `true`. However, it is still possible in most environments to execute scripts indirectly, for example via the `<img onerror>` attribute. The caller should be aware of this and guard against it by cleaning or escaping any untrusted inputs from sources such as the URL or cookies. For future compatibility, callers should not depend on the ability to run *any* script content when `keepScripts` is unspecified or `false`.

  Example:
--------


 Create an array of DOM nodes using an HTML string and insert it into a div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.parseHTML demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Content:</h3>
</div>
 
<script>
var $log = $( "#log" ),
  str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ),
  nodeNames = [];
 
// Append the parsed HTML
$log.append( html );
 
// Gather the parsed HTML's node names
$.each( html, function( i, el ) {
  nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
});
 
// Insert the node names
$log.append( "<h3>Node Names:</h3>" );
$( "<ol></ol>" )
  .append( nodeNames.join( "" ) )
  .appendTo( $log );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.parseHTML>

jQuery.post()
=============

   jQuery.post( url [, data ] [, success ] [, dataType ] )Returns: [jqXHR](types#jqXHR)
-------------------------------------------------------------------------------------

  **Description:** Send data to the server using a HTTP POST request.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.post( url [, data ] [, success ] [, dataType ] )](#jQuery-post-url-data-success-dataType)


	+ **url** Type: [String](types#String)  A string containing the URL to which the request is sent.
	+ **data** Type: [PlainObject](types#PlainObject) or [String](types#String)  A plain object or string that is sent to the server with the request.
	+ **success** Type: [Function](types#Function)( [PlainObject](types#PlainObject) data, [String](types#String) textStatus, [jqXHR](types#jqXHR) jqXHR ) A callback function that is executed if the request succeeds. Required if `dataType` is provided, but can be `null` in that case.
	+ **dataType** Type: [String](types#String)  The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
* ####  version added: [1.12-and-2.2](https://api.jquery.com/category/version/1.12-and-2.2/)[jQuery.post( [settings ] )](#jQuery-post-settings)


	+ **settings** Type: [PlainObject](types#PlainObject)  A set of key/value pairs that configure the Ajax request. All properties except for `url` are optional. A default can be set for any option with [$.ajaxSetup()](jquery.ajaxsetup). See [jQuery.ajax( settings )](jquery.ajax#jQuery-ajax-settings) for a complete list of all settings. Type will automatically be set to `POST`.

  This is a shorthand Ajax function, which is equivalent to:

 
```
$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
```
 The `success` callback function is passed the returned data, which will be an XML root element or a text string depending on the MIME type of the response. It is also passed the text status of the response.

 **As of jQuery 1.5**, the `success` callback function is also passed a ["jqXHR" object](#jqxhr-object) (in **jQuery 1.4**, it was passed the `XMLHttpRequest` object).

 Most implementations will specify a success handler:

 
```
$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});
```
 This example fetches the requested HTML snippet and inserts it on the page.

 Pages fetched with `POST` are never cached, so the `cache` and `ifModified` options in `[jQuery.ajaxSetup()](jquery.ajaxsetup)` have no effect on these requests.

 #### The jqXHR Object

 **As of jQuery 1.5**, all of jQuery's Ajax methods return a superset of the `XMLHTTPRequest` object. This jQuery XHR object, or "jqXHR," returned by `$.post()` implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see [Deferred object](category/deferred-object) for more information). The `jqXHR.done()` (for success), `jqXHR.fail()` (for error), and `jqXHR.always()` (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the [jqXHR Object](jquery.ajax#jqXHR) section of the `$.ajax()` documentation.

 The Promise interface also allows jQuery's Ajax methods, including `$.get()`, to chain multiple `.done()`, `.fail()`, and `.always()` callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

 
```
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});
```
 #### Deprecation Notice

 The `jqXHR.success()`, `jqXHR.error()`, and `jqXHR.complete()` callback methods are **removed as of jQuery 3.0**. You can use `jqXHR.done()`, `jqXHR.fail()`, and `jqXHR.always()` instead.

  ### Additional Notes:

 * Due to browser security restrictions, most "Ajax" requests are subject to the [same origin policy](https://en.wikipedia.org/wiki/Same_origin_policy "Same Origin Policy on Wikipedia"); the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
* If a request with jQuery.post() returns an error code, it will fail silently unless the script has also called the global [.ajaxError()](ajaxerror)  method. Alternatively, as of jQuery 1.5, the `.error()` method of the `jqXHR` object returned by jQuery.post() is also available for error handling.
 Examples:
---------


 Request the test.php page, but ignore the return results.

 
```
$.post( "test.php" );
```
   Request the test.php page and send some additional data along (while still ignoring the return results).

 
```
$.post( "test.php", { name: "John", time: "2pm" } );
```
   Pass arrays of data to the server (while still ignoring the return results).

 
```
$.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );
```
   Send form data using Ajax requests

 
```
$.post( "test.php", $( "#testform" ).serialize() );
```
   Alert the results from requesting test.php (HTML or XML, depending on what was returned).

 
```
$.post( "test.php", function( data ) {
  alert( "Data Loaded: " + data );
});
```
   Alert the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

 
```
$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });
```
   Post to the test.php page and get content which has been returned in json format (<?php echo json\_encode(array("name"=>"John","time"=>"2pm")); ?>).

 
```
$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
  console.log( data.name ); // John
  console.log( data.time ); // 2pm
}, "json");
```
   Post a form using Ajax and put results in a div

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
 
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();
 
  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );
 
  // Send the data using post
  var posting = $.post( url, { s: term } );
 
  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.post>

jQuery.removeData()
===================

   jQuery.removeData( element [, name ] )Returns: [undefined](types#undefined)
----------------------------------------------------------------------------

  **Description:** Remove a previously-stored piece of data.

 * ####  version added: [1.2.3](https://api.jquery.com/category/version/1.2.3/)[jQuery.removeData( element [, name ] )](#jQuery-removeData-element-name)


	+ **element** Type: [Element](types#Element)  A DOM element from which to remove data.
	+ **name** Type: [String](types#String)  A string naming the piece of data to remove.

  **Note:** This is a low-level method, you should probably use `[.removeData()](removedata)` instead.

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

  Example:
--------


 Set a data store for 2 names then remove one of them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.removeData demo</title>
  <style>
  div {
    margin: 2px;
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.removeData>

jQuery.ready
============

   jQuery.readyReturns: [Thenable](types#Thenable)
------------------------------------------------

  **Description:** A Promise-like object (or "thenable") that resolves when the document is ready.

 * ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)jQuery.ready

  As of jQuery 3.0, use of this object is supported via `[jQuery.when](jquery.when)` or the native `Promise.resolve()`. Code should not make assumptions about whether this object is a `jQuery.Deferred`, native Promise, or some other type of promise object.

 See also `[ready()](ready)`, which makes use of this.

  Examples:
---------


 Listen for document ready using `[jQuery.when](jquery.when)`.

 
```
$.when( $.ready ).then(function() {
  // Document is ready.
});
```
   Typical usage involving another promise, using `[jQuery.when](jquery.when)`.

 
```
$.when(
  $.getJSON( "ajax/test.json" ),
  $.ready
).done(function( data ) {
  // Document is ready.
  // Value of test.json is passed as `data`.
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.ready>

jQuery.queue()
==============

  Show or manipulate the queue of functions to be executed on the matched element. #### Contents:

 * [jQuery.queue( element [, queueName ] )](#jQuery-queue1)
	+ [jQuery.queue( element [, queueName ] )](#jQuery-queue-element-queueName)
* [jQuery.queue( element, queueName, newQueue )](#jQuery-queue2)
	+ [jQuery.queue( element, queueName, newQueue )](#jQuery-queue-element-queueName-newQueue)
	+ [jQuery.queue( element, queueName, callback )](#jQuery-queue-element-queueName-callback)

 
 jQuery.queue( element [, queueName ] )Returns: [Array](types#Array)
--------------------------------------------------------------------

  **Description:** Show the queue of functions to be executed on the matched element.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[jQuery.queue( element [, queueName ] )](#jQuery-queue-element-queueName)


	+ **element** Type: [Element](types#Element)  A DOM element to inspect for an attached queue.
	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.

  **Note:** This is a low-level method, you should probably use `[.queue()](queue)` instead.

  Example:
--------


 Show the length of the queue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
 
<script>
$( "#show" ).click(function() {
  var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
  $( "span" ).text( "Queue length is: " + n.length );
});
 
function runIt() {
  $( "div" )
    .show( "slow" )
    .animate({
      left: "+=200"
    }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({
      left: "-=200"
    }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}
 
runIt();
</script>
 
</body>
</html>
```
 #### Demo:

   jQuery.queue( element, queueName, newQueue )Returns: [Array](types#Array)
--------------------------------------------------------------------------

  **Description:** Manipulate the queue of functions to be executed on the matched element.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[jQuery.queue( element, queueName, newQueue )](#jQuery-queue-element-queueName-newQueue)


	+ **element** Type: [Element](types#Element)  A DOM element where the array of queued functions is attached.
	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.
	+ **newQueue** Type: [Array](types#Array)  An array of functions to replace the current queue contents.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[jQuery.queue( element, queueName, callback )](#jQuery-queue-element-queueName-callback)


	+ **element** Type: [Element](types#Element)  A DOM element on which to add a queued function.
	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.
	+ **callback** Type: [Function](types#Function)() The new function to add to the queue.

  **Note:** This is a low-level method, you should probably use `[.queue()](queue)` instead.

 Every element can have one or more 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 `jQuery.queue()` method allows us to directly manipulate this queue of functions. Calling `jQuery.queue()` with a callback is particularly useful; it allows us to place a new function at the end of the queue.

 Note that when adding a function with `jQuery.queue()`, we should ensure that `jQuery.dequeue()` is eventually called so that the next function in line executes.

  Examples:
---------


 Queue a custom function.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Click here...
<div></div>
 
<script>
$( document.body ).click(function() {
  var divs = $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).addClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.animate({ left: "-=200" }, 500 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).removeClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.slideUp();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Set a queue array to delete the queue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
 
<script>
$( "#start" ).click(function() {
  var divs = $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).addClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.animate({ left: "-=200" }, 1500 );
  jQuery.queue( divs[ 0 ], "fx", function() {
    $( this ).removeClass( "newcolor" );
    jQuery.dequeue( this );
  });
  divs.slideUp();
});
$( "#stop" ).click(function() {
  jQuery.queue( $( "div" )[ 0 ], "fx", [] );
  $( "div" ).stop();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.queue>

.keydown()
==========

   .keydown( handler )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.keydown( handler )](#keydown-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.keydown( [eventData ], handler )](#keydown-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.keydown()](#keydown)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "keydown", handler )` in the first and second variations, and `.trigger( "keydown" )` in the third.

 The `keydown` event is sent to an element when the user presses a key on the keyboard. If the key is kept pressed, the event is sent every time the operating system repeats the key. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

 For example, consider the HTML:

 
```
<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the input field:

 
```
$( "#target" ).keydown(function() {
  alert( "Handler for .keydown() called." );
});
```
 Now when the insertion point is inside the field, pressing a key displays the alert:

  `Handler for .keydown() called.` 

 To trigger the event manually, apply `.keydown()` without an argument:

 
```
$( "#other" ).click(function() {
  $( "#target" ).keydown();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message.

 If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the `document` object. Because of event bubbling, all key presses will make their way up the DOM to the `document` object unless explicitly stopped.

 To determine which key was pressed, examine the [event object](category/events/event-object) that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the `.which` property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, `.keypress()` may be a better choice.

  ### Additional Notes:

 * As the `.keydown()` method is just a shorthand for `.on( "keydown", handler )`, detaching is possible using `.off( "keydown" )`.
 Example:
--------


 Show the event object for the keydown handler when a key is pressed in the input.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keydown demo</title>
  <style>
  fieldset {
    margin-bottom: 1em;
  }
  input {
    display: block;
    margin-bottom: .25em;
  }
  #print-output {
    width: 100%;
  }
  .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
 
<script>
var xTriggered = 0;
$( "#target" ).keydown(function( event ) {
  if ( event.which == 13 ) {
   event.preventDefault();
  }
  xTriggered++;
  var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
});
 
$( "#other" ).click(function() {
  $( "#target" ).keydown();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/keydown>

jQuery.sub()
============

   jQuery.sub()Returns: [jQuery](types#jQuery)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.9](https://api.jquery.com/category/version/1.9/)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.sub()](#jQuery-sub)


	+ This method does not accept any arguments.

   Note: This API has been removed in jQuery 1.9.

  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.

 Note that jQuery.sub() doesn't attempt to do any sort of isolation - that's not its intention. All the methods on the sub'd version of jQuery will still point to the original jQuery (events bound and triggered will still be through the main jQuery, data will be bound to elements through the main jQuery, Ajax queries and events will run through the main jQuery, etc.).

 Note that if you're looking to use this for plugin development you should first *strongly* consider using something like the jQuery UI widget factory which manages both state and plugin sub-methods. [Some examples of using the jQuery UI widget factory](http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/) to build a plugin.

 The particular use cases of this method can be best described through some examples.

  Examples:
---------


 Adding a method to a jQuery sub so that it isn't exposed externally:

 
```
(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
```
   Override some jQuery methods to provide new functionality.

 
```
(function() {
  var myjQuery = jQuery.sub();
 
  myjQuery.fn.remove = function() {
 
    // New functionality: Trigger a remove event
    this.trigger( "remove" );
 
    // Be sure to call the original jQuery remove method
    return jQuery.fn.remove.apply( this, arguments );
  };
 
  myjQuery(function( $ ) {
    $( ".menu" ).click(function() {
      $( this ).find( ".submenu" ).remove();
    });
 
    // A new remove event is now triggered from this copy of jQuery
    $( document ).on( "remove", function( event ) {
      $( event.target ).parent().hide();
    });
  });
})();
 
// Regular jQuery doesn't trigger a remove event when removing an element
// This functionality is only contained within the modified 'myjQuery'.
```
   Create a plugin that returns plugin-specific methods.

 
```
(function() {
 
  // Create a new copy of jQuery using sub()
  var plugin = jQuery.sub();
 
  // Extend that copy with the new plugin methods
  plugin.fn.extend({
    open: function() {
      return this.show();
    },
    close: function() {
      return this.hide();
    }
  });
 
  // Add our plugin to the original jQuery
  jQuery.fn.myplugin = function() {
    this.addClass( "plugin" );
 
    // Make sure our plugin returns our special plugin version of jQuery
    return plugin( this );
  };
})();
 
$( document ).ready(function() {
 
  // Call the plugin, open method now exists
  $( "#main" ).myplugin().open();
 
  // Note: Calling just $( "#main" ).open() won't work as open doesn't exist!
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.sub>

jQuery.speed
============

   jQuery.speed( [duration ] [, settings ] )Returns: [PlainObject](types#PlainObject)
-----------------------------------------------------------------------------------

  **Description:** Creates an object containing a set of properties ready to be used in the definition of custom animations.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.speed( [duration ] [, settings ] )](#jQuery-speed-duration-settings)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **settings** Type: [PlainObject](types#PlainObject) 
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **complete** Type: [Function](types#Function)() A function to call once the animation is complete.
* ####  version added: [1.1](https://api.jquery.com/category/version/1.1/)[jQuery.speed( [duration ] [, easing ] [, complete ] )](#jQuery-speed-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.1](https://api.jquery.com/category/version/1.1/)[jQuery.speed( settings )](#jQuery-speed-settings)


	+ **settings** Type: [PlainObject](types#PlainObject) 
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **complete** Type: [Function](types#Function)() A function to call once the animation is complete.

  The `$.speed()` method provides a way to define properties, such as `duration`, `easing`, and `queue`, to use in a custom animation. By using it, you don't have to implement the logic that deals with default values and optional parameters.

 This method is meant for plugin developers who are creating new animation methods. Letting `$.speed()` do all the parameter hockey and normalization for you, rather than duplicating the logic yourself, makes your work simpler. An example of use can be found in the animated form of `.addClass()` of jQuery UI. 

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.speed>

jQuery.readyException()
=======================

   jQuery.readyException( error )Returns: [Selector](types#Selector)
------------------------------------------------------------------

  **Description:** Handles errors thrown synchronously in functions wrapped in `jQuery()`.

 * ####  version added: [3.1](https://api.jquery.com/category/version/3.1/)[jQuery.readyException( error )](#jQuery-readyException-error)


	+ **error** Type: [Error](types#Error)  An error thrown in the function wrapped in `jQuery()`.

  This method is fired when an error is thrown synchronously in a function wrapped in `jQuery()` or `jQuery( document ).ready()`, or equivalent. By default it re-throws the error in a timeout so that it's logged in the console and passed to `window.onerror` instead of being swallowed. Overwrite this method if you want to handle such errors differently.

  Example:
--------


 Pass the received error to `console.error`.

 
```
jQuery.readyException = function( error ) {
  console.error( error );
};
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.readyException>

jQuery.trim()
=============

   jQuery.trim( str )Returns: [String](types#String)version deprecated: [3.5](https://api.jquery.com/category/version/3.5/)
-------------------------------------------------------------------------------------------------------------------------

  **Description:** Remove the whitespace from the beginning and end of a string.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[jQuery.trim( str )](#jQuery-trim-str)


	+ **str** Type: [String](types#String)  The string to trim.

   Note: This API has been deprecated in jQuery 3.5; please use the native [`String.prototype.trim`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) method instead. Unlike `jQuery.trim`, `String.prototype.trim` does not work with types other than strings (`null`, `undefined`, `Number`). Make sure that your code is compatible when migrating.

  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.

  Examples:
---------


 Remove the white spaces at the start and at the end of the string.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.trim demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<pre id="original"></pre>
<pre id="trimmed"></pre>
 
<script>
var str = "         lots of spaces before and after         ";
$( "#original" ).html( "Original String: '" + str + "'" );
$( "#trimmed" ).html( "$.trim()'ed: '" + $.trim(str) + "'" );
</script>
 
</body>
</html>
```
 #### Demo:

   Remove the white spaces at the start and at the end of the string.

 
```
$.trim("    hello, how are you?    ");
```
 #### Result:

 
```
"hello, how are you?"
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.trim>

.keypress()
===========

   .keypress( handler )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.keypress( handler )](#keypress-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.keypress( [eventData ], handler )](#keypress-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.keypress()](#keypress)


	+ This signature does not accept any arguments.

  **Note:** as the `keypress` event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

 This method is a shortcut for `.on( "keypress", handler )` in the first two variations, and `.trigger( "keypress" )` in the third.

 The `keypress` event is sent to an element when the browser registers keyboard input. This is similar to the `keydown` event, except that modifier and non-printing keys such as `Shift`, `Esc`, and `delete` trigger `keydown` events but not `keypress` events. Other differences between the two events may arise depending on platform and browser.

 A `keypress` event handler can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form controls can always get focus so are reasonable candidates for this event type.

 For example, consider the HTML:

 
```
<form>
  <fieldset>
    <input id="target" type="text" value="Hello there">
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the input field:

 
```
$( "#target" ).keypress(function() {
  console.log( "Handler for .keypress() called." );
});
```
 Now when the insertion point is inside the field, pressing a key displays the log:

  `Handler for .keypress() called.` 

 To trigger the event manually, apply `.keypress()` without an argument:

 
```
$( "#other" ).click(function() {
  $( "#target" ).keypress();
});
```
 After this code executes, clicks on the `Trigger the handler` div will also log the message.

 If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the `document` object. Because of event bubbling, all key presses will make their way up the DOM to the `document` object unless explicitly stopped.

 To determine which character was entered, examine the `event` object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the `.which` property so you can reliably use it to retrieve the character code.

 Note that `keydown` and `keyup` provide a code indicating which key is pressed, while `keypress` indicates which character was entered. For example, a lowercase "a" will be reported as 65 by `keydown` and `keyup`, but as 97 by `keypress`. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, `.keydown()` or `.keyup()` is a better choice.

  ### Additional Notes:

 * As the `.keypress()` method is just a shorthand for `.on( "keypress", handler )`, detaching is possible using `.off( "keypress" )`.
 Example:
--------


 Show the event object when a key is pressed in the input. Note: This demo relies on a simple $.print() plugin (https://api.jquery.com/resources/events.js) for the event object's output.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keypress demo</title>
  <style>
  fieldset {
    margin-bottom: 1em;
  }
  input {
    display: block;
    margin-bottom: .25em;
  }
  #print-output {
    width: 100%;
  }
  .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script src="/resources/events.js"></script>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/keypress>

jQuery.support
==============

   jQuery.supportReturns: [Object](types#Object)version deprecated: [1.9](https://api.jquery.com/category/version/1.9/)
---------------------------------------------------------------------------------------------------------------------

  **Description:** A collection of properties that represent the presence of different browser features or bugs. Intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance. For your own project's feature-detection needs, we strongly recommend the use of an external library such as [Modernizr](https://modernizr.com) instead of dependency on properties in `jQuery.support`.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)jQuery.support

  

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.support>

.keyup()
========

   .keyup( handler )Returns: [jQuery](types#jQuery)
-------------------------------------------------

  **Description:** Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.keyup( handler )](#keyup-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.keyup( [eventData ], handler )](#keyup-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.keyup()](#keyup)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "keyup", handler )` in the first two variations, and `.trigger( "keyup" )` in the third.

 The `keyup` event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

 For example, consider the HTML:

 
```
<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the input field:

 
```
$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});
```
 Now when the insertion point is inside the field and a key is pressed and released, the alert is displayed:

  `Handler for .keyup() called.` 

 To trigger the event manually, apply `.keyup()` without arguments:

 
```
$( "#other" ).click(function() {
  $( "#target" ).keyup();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message.

 If key presses anywhere need to be caught (for example, to implement global shortcut keys on a page), it is useful to attach this behavior to the `document` object. Because of event bubbling, all key presses will make their way up the DOM to the `document` object unless explicitly stopped.

 To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the `.which` property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, `.keypress()` may be a better choice.

  ### Additional Notes:

 * As the `.keyup()` method is just a shorthand for `.on( "keyup", handler )`, detaching is possible using `.off( "keyup" )`.
 Example:
--------


 Show the event object for the keyup handler (using a simple $.print plugin) when a key is released in the input.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keyup demo</title>
  <style>
  fieldset {
    margin-bottom: 1em;
  }
  input {
    display: block;
    margin-bottom: .25em;
  }
  #print-output {
    width: 100%;
  }
  .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
 
<script>
var xTriggered = 0;
$( "#target" ).keyup(function( event ) {
  xTriggered++;
  var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
}).keydown(function( event ) {
  if ( event.which == 13 ) {
    event.preventDefault();
  }
});
 
$( "#other").click(function() {
  $( "#target" ).keyup();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/keyup>

jQuery.uniqueSort()
===================

   jQuery.uniqueSort( array )Returns: [Array](types#Array)
--------------------------------------------------------

  **Description:** 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.

 * ####  version added: [1.12-and-2.2](https://api.jquery.com/category/version/1.12-and-2.2/)[jQuery.uniqueSort( array )](#jQuery-uniqueSort-array)


	+ **array** Type: [Array](types#Array)  The Array of DOM elements.

  The `$.uniqueSort()` function searches through an array of objects, sorting the array, and removing any duplicate nodes. A node is considered a duplicate if it is the *exact same* node as one already in the array; two different nodes with identical attributes are not considered to be duplicates. This function only works on plain JavaScript arrays of DOM elements, and is chiefly used internally by jQuery. You probably will never need to use it.

 Prior to jQuery 3.0, this method was called `[jQuery.unique()](jquery.unique)`.

 As of jQuery 1.4 the results will always be returned in document order.

  Example:
--------


 Removes any duplicate elements from the array of divs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.uniqueSort demo</title>
  <style>
  div {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
 
<script>
// unique() must take a native array
var divs = $( "div" ).get();
 
// 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.uniqueSort( divs );
$( "div" ).eq( 2 ).text( "Post-unique there are " + divs.length + " elements." )
  .css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.uniqueSort>

jQuery.type()
=============

   jQuery.type( obj )Returns: [String](types#String)version deprecated: [3.3](https://api.jquery.com/category/version/3.3/)
-------------------------------------------------------------------------------------------------------------------------

  **Description:** Determine the internal JavaScript [[Class]] of an object.

 * ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[jQuery.type( obj )](#jQuery-type-obj)


	+ **obj** Type: [Anything](types#Anything)  Object to get the internal JavaScript [[Class]] of.

   Note: This API has been deprecated in jQuery 3.3.

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

 * If the object is undefined or null, then "undefined" or "null" is returned accordingly.
	+ jQuery.type( undefined ) === "undefined"
	+ jQuery.type() === "undefined"
	+ jQuery.type( window.notDefined ) === "undefined"
	+ jQuery.type( null ) === "null"
* If the argument is either a primitive value or an instance of a standard built-in ECMAScript object, the [[Class]] internal property is used to determine the type. ([More details about this technique.](http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/))
	+ jQuery.type( true ) === "boolean"
	+ jQuery.type( new Boolean() ) === "boolean"
	+ jQuery.type( 3 ) === "number"
	+ jQuery.type( new Number( 3 ) ) === "number"
	+ jQuery.type( "test" ) === "string"
	+ jQuery.type( new String( "test" ) ) === "string"
	+ jQuery.type( function() {} ) === "function"
	+ jQuery.type( [] ) === "array"
	+ jQuery.type( new Array() ) === "array"
	+ jQuery.type( new Date() ) === "date"
	+ jQuery.type( new Error() ) === "error" // **as of jQuery 1.9**
	+ jQuery.type( Symbol() ) === "symbol" // **as of jQuery 1.9**
	+ jQuery.type( Object( Symbol() ) ) === "symbol" // **as of jQuery 1.12**
	+ jQuery.type( /test/ ) === "regexp"
* Everything else returns "object" as its type.

  Example:
--------


 Find out if the parameter is a RegExp.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.type demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Is it a RegExp? <b></b>
 
<script>
$( "b" ).append( "" + jQuery.type( /test/ ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.type>

jQuery.unique()
===============

   jQuery.unique( array )Returns: [Array](types#Array)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
---------------------------------------------------------------------------------------------------------------------------

  **Description:** 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.

 * ####  version added: [1.1.3](https://api.jquery.com/category/version/1.1.3/)[jQuery.unique( array )](#jQuery-unique-array)


	+ **array** Type: [Array](types#Array)  The Array of DOM elements.

  **As of jQuery 3.0, this method is deprecated and just an alias of `[jQuery.uniqueSort()](jquery.uniquesort)`. Please use that method instead.**

 The `$.unique()` function searches through an array of objects, sorting the array, and removing any duplicate nodes. A node is considered a duplicate if it is the *exact same* node as one already in the array; two different nodes with identical attributes are not considered to be duplicates. This function only works on plain JavaScript arrays of DOM elements, and is chiefly used internally by jQuery. You probably will never need to use it.

 As of jQuery 1.4 the results will always be returned in document order.

  Example:
--------


 Removes any duplicate elements from the array of divs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.unique demo</title>
  <style>
  div {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
 
<script>
// unique() must take a native array
var divs = $( "div" ).get();
 
// 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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.unique>

Category: Keyboard Events
=========================

   [.keydown()](../../keydown "Permalink to .keydown()")
======================================================

  Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.

     [.keypress()](../../keypress "Permalink to .keypress()")
=========================================================

  Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

     [.keyup()](../../keyup "Permalink to .keyup()")
================================================

  Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/events/keyboard-events>

jQuery.when()
=============

   jQuery.when( deferreds )Returns: [Promise](types#Promise)
----------------------------------------------------------

  **Description:** Provides a way to execute callback functions based on zero or more Thenable objects, usually [Deferred](category/deferred-object) objects that represent asynchronous events.

 * ####  version added: [1.5](https://api.jquery.com/category/version/1.5/)[jQuery.when( deferreds )](#jQuery-when-deferreds)


	+ **deferreds** Type: [Deferred](types#Deferred) or [Promise](types#Promise) or [Thenable](types#Thenable)  Zero or more Thenable objects.

  If no arguments are passed to `jQuery.when()`, it will return a resolved Promise.

 If a single Deferred is passed to `jQuery.when()`, its Promise object (a subset of the Deferred methods) is returned by the method. Additional methods of the Promise object can be called to attach callbacks, such as [`deferred.then`](deferred.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 Promise-compatible object and can be used this way:

 
```
$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status ); // Alerts 200
});
```
 If a single argument is passed to `jQuery.when()` and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately. The doneCallbacks are passed the original argument. In this case any failCallbacks you might set are never called since the Deferred is never rejected. For example:

 
```
$.when( { testing: 123 } ).done(function( x ) {
  alert( x.testing ); // Alerts "123"
});
```
 If you don't pass it any arguments at all, `jQuery.when()` will return a resolved promise.

 
```
$.when().then(function( x ) {
  alert( "I fired immediately" );
});
```
 In the case where multiple Deferred objects are passed to `jQuery.when()`, the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed. The method will resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected. If the master Deferred is resolved, the doneCallbacks for the master Deferred are executed. The arguments passed to the doneCallbacks provide the resolved values for each of the Deferreds, and matches the order the Deferreds were passed to `jQuery.when()`. For example:

 
```
var d1 = $.Deferred();
var d2 = $.Deferred();
 
$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 ); // "Fish"
    console.log( v2 ); // "Pizza"
});
 
d1.resolve( "Fish" );
d2.resolve( "Pizza" );
```
 In the event a Deferred was resolved with no value, the corresponding doneCallback argument will be undefined. If a Deferred resolved to a single value, the corresponding argument will hold that value. In the case where a Deferred resolved to multiple values, the corresponding argument will be an array of those values. For example:

 
```
var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();
 
$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
    console.log( v1 ); // v1 is undefined
    console.log( v2 ); // v2 is "abc"
    console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});
 
d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );
```
 In the multiple-Deferreds case where one of the Deferreds is rejected, `jQuery.when()` immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. The arguments passed to the failCallbacks match the signature of the failCallback for the Deferred that was rejected. If you need to perform additional processing for this case, such as canceling any unfinished Ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.

  Examples:
---------


 Execute a function after two Ajax requests are successful. (See the jQuery.ajax() documentation for a complete description of success and error cases for an ajax request).

 
```
$.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.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});
```
   Execute the function `myFunc` when both ajax requests are successful, or `myFailure` if either one has an error.

 
```
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/jQuery.when>

.length
=======

   lengthReturns: [Integer](types#Integer)
----------------------------------------

  **Description:** The number of elements in the jQuery object.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)length

  The number of elements currently matched. The .[size()](size) method will return the same value.

  Example:
--------


 Count the divs. Click to add more.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>length demo</title>
  <style>
  body {
    cursor: pointer;
  }
  div {
    width: 50px;
    height: 30px;
    margin: 5px;
    float: left;
    background: green;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <span></span>
  <div></div>
<script>
$( document.body )
  .click(function() {
    $( document.body ).append( $( "<div>" ) );
    var n = $( "div" ).length;
    $( "span" ).text( "There are " + n + " divs." +
      "Click to add more.");
  })
  // Trigger the click to start
  .trigger( "click" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/length>

.live()
=======

   .live( events, handler )Returns: [jQuery](types#jQuery)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [1.9](https://api.jquery.com/category/version/1.9/)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Attach an event handler for all elements which match the current selector, now and in the future.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.live( events, handler )](#live-events-handler)


	+ **events** Type: [String](types#String)  A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute at the time the event is triggered.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.live( events [, data ], handler )](#live-events-data-handler)


	+ **events** Type: [String](types#String)  A string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names.
	+ **data** Type: [PlainObject](types#PlainObject)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute at the time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.live( events )](#live-events)


	+ **events** Type: [PlainObject](types#PlainObject)  A plain object of one or more JavaScript event types and functions to execute for them.

   Note: This API has been removed in jQuery 1.9; please use [`on()`](on) instead.

  This method provides a means to attach delegated event handlers to the `document` element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the [`.on()`](on) method for more information. 

 Rewriting the `.live()` method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

 
```
$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+
```
 The `events` argument can either be a space-separated list of event type names and optional namespaces, or an object of event name strings and handlers. The `data` argument is optional and can be omitted. For example, the following three method calls are functionally equivalent (but see below for more effective and performant ways to attach delegated event handlers):

 
```
$( "a.offsite" ).live( "click", function() {
  alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
  alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
  alert( "Goodbye!" );  // jQuery 1.7+
});
```
 Use of the `.live()` method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of `.live()`:

 * jQuery attempts to retrieve the elements specified by the selector before calling the `.live()` method, which may be time-consuming on large documents.
* Chaining methods is not supported. For example, `$( "a" ).find( ".offsite, .external" ).live( ... );`  is *not* valid and does not work as expected.
* Since all `.live()` events are attached at the `document` element, events take the longest and slowest possible path before they are handled.
* On mobile iOS (iPhone, iPad and iPod Touch) the `click` event does not bubble to the document body for most elements and cannot be used with `.live()` without applying one of the following workarounds:
	1. Use natively clickable elements such as `a` or `button`, as both of these do bubble to `document`.
	2. Use `.on()` or `.delegate()` attached to an element below the level of `document.body`, since mobile iOS does bubble within the body.
	3. Apply the CSS style `cursor:pointer` to the element that needs to bubble clicks (or a parent including `document.documentElement`). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.
* Calling [`event.stopPropagation()`](event.stoppropagation) in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to `document`.
* The `.live()` method interacts with other event methods in ways that can be surprising, e.g., `$( document ).off( "click" )` removes all click handlers attached by any call to `.live()`!

 For pages still using `.live()`, this list of version-specific differences may be helpful:

 * Before jQuery 1.7, to stop further handlers from executing after one bound using `.live()`, the handler must return `false`. Calling `.stopPropagation()` will not accomplish this.
* As of **jQuery 1.4** the `.live()` method supports custom events as well as *all JavaScript events that bubble*. It also supports certain events that don't bubble, including `change`, `submit`, `focus` and `blur`.
* In **jQuery 1.3.x** only the following JavaScript events could be bound: `click`, `dblclick`, `keydown`, `keypress`, `keyup`, `mousedown`, `mousemove`, `mouseout`, `mouseover`, and `mouseup`.

  Examples:
---------


 Cancel a default action and prevent it from bubbling up by returning false.

 
```
$( "a" ).live( "click", function() {
  return false;
});
```
   Cancel only the default action by using the preventDefault method.

 
```
$( "a" ).live( "click", function( event ) {
  event.preventDefault();
});
```
   Bind custom events with .live().

 
```
$( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
```
   Use an object to bind multiple live event handlers. Note that .live() calls the click, mouseover, and mouseout event handlers for all paragraphs--even new ones.

 
```
$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/live>

.load()
=======

   .load( url [, data ] [, complete ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------------

  **Description:** Load data from the server and place the returned HTML into the matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.load( url [, data ] [, complete ] )](#load-url-data-complete)


	+ **url** Type: [String](types#String)  A string containing the URL to which the request is sent.
	+ **data** Type: [PlainObject](types#PlainObject) or [String](types#String)  A plain object or string that is sent to the server with the request.
	+ **complete** Type: [Function](types#Function)( [String](types#String) responseText, [String](types#String) textStatus, [jqXHR](types#jqXHR) jqXHR ) A callback function that is executed when the request completes.

   Note: Prior to jQuery 3.0, the event handling suite also had a method named `[.load()](load-event)`. Older versions of jQuery determined which method to fire based on the set of arguments passed to it.

  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 elements to the returned data. This means that most uses of the method can be quite simple:

 
```
$( "#result" ).load( "ajax/test.html" );
```
 If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will *not* be sent.

 #### Callback Function

 If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and `this` is set to each DOM element in turn.

 
```
$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});
```
 In the two examples above, if the current document does not contain an element with an ID of "result," the `.load()` method is not executed.

 #### Request Method

 The POST method is used if data is provided as an object; otherwise, GET is assumed.

 #### Loading Page Fragments

 The `.load()` method, unlike `[$.get()](jquery.get)`, allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the `url` parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded. 

 We could modify the example above to use only part of the document that is fetched:

 
```
$( "#result" ).load( "ajax/test.html #container" );
```
 When this method executes, it retrieves the content of `ajax/test.html`, but then jQuery parses the returned document to find the element with an ID of `container`. This element, along with its contents, is inserted into the element with an ID of `result`, and the rest of the retrieved document is discarded.

 jQuery uses the browser's `.innerHTML` property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as `<html>`, `<title>`, or `<head>` elements. As a result, the elements retrieved by `.load()` may not be exactly the same as if the document were retrieved directly by the browser.

 #### Script Execution

  When calling `.load()` using a URL without a suffixed selector expression, the content is passed to `.html()` prior to scripts being removed. This executes the script blocks before they are discarded. If `.load()` is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are *not* executed. An example of both cases can be seen below:

 Here, any JavaScript loaded into `#a` as a part of the document will successfully execute.

 
```
$( "#a" ).load( "article.html" );
```
 However, in the following case, script blocks in the document being loaded into `#b` are stripped out and not executed:

 
```
$( "#b" ).load( "article.html #target" );
```
  ### Additional Notes:

 * Due to browser security restrictions, most "Ajax" requests are subject to the [same origin policy](https://en.wikipedia.org/wiki/Same_origin_policy "Same Origin Policy on Wikipedia"); the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
 Examples:
---------


 Load another page's list items into an ordered list.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Projects:</b>
<ol id="new-projects"></ol>
 
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
 
</body>
</html>
```
 #### Demo:

   Display a notice if the Ajax request encounters an error.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
 
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   Load the feeds.html file into the div with the ID of feeds.

 
```
$( "#feeds" ).load( "feeds.html" );
```
 #### Result:

 
```
<div id="feeds"><b>45</b> feeds found.</div>
```
   pass arrays of data to the server.

 
```
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );
```
   Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

 
```
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/load>

.load()
=======

   .load( handler )Returns: [jQuery](types#jQuery)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Bind an event handler to the "load" JavaScript event.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.load( handler )](#load-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.load( [eventData ], handler )](#load-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.

   Note: This API has been removed in jQuery 3.0; please use `.on( "load", handler )` instead of `.load( handler )` and `.trigger( "load" )` instead of `.load()`.

  This method is a shortcut for `.on( "load", handler )`.

 The `load` event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the `window` object.

 For example, consider a page with a simple image:

 
```
<img src="book.png" alt="Book" id="book">
```
 The event handler can be bound to the image:

 
```
$( "#book" ).load(function() {
  // Handler for .load() called.
});
```
 As soon as the image has been loaded, the handler is called.

 In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the `.ready()` method. 

  The Ajax module also has a method named `[.load()](load)`. Which one is fired depends on the set of arguments passed.

    **Caveats of the `load` event when used with images** 


A common challenge developers attempt to solve using the `.load()` shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

 * It doesn't work consistently nor reliably cross-browser
* It doesn't fire correctly in WebKit if the image src is set to the same src as before
* It doesn't correctly bubble up the DOM tree
* Can cease to fire for images that already live in the browser's cache

   **Note:** The `.live()` and `.delegate()` methods cannot be used to detect the `load` event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.

   Examples:
---------


 Run a function when the page is fully loaded including graphics.

 
```
$( window ).load(function() {
  // Run code
});
```
   Add the class bigImg to all images with height greater than 100 upon each image load.

 
```
$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/load-event>

.mousedown()
============

   .mousedown( handler )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mousedown( handler )](#mousedown-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mousedown( [eventData ], handler )](#mousedown-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mousedown()](#mousedown)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "mousedown", handler)` in the first variation, and `.trigger( "mousedown" )` in the second.

 The `mousedown` event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any `<div>`:

 
```
$( "#target" ).mousedown(function() {
  alert( "Handler for .mousedown() called." );
});
```
 Now if we click on this element, the alert is displayed:

  `Handler for .mousedown() called.` 

 We can also trigger the event when a different element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#target" ).mousedown();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message.

 The `mousedown` event is sent when any mouse button is clicked. To act only on specific buttons, we can use the event object's `which` property. Not all browsers support this property (Internet Explorer uses button instead), but jQuery normalizes the property so that it is safe to use in any browser. The value of `which` will be 1 for the left button, 2 for the middle button, or 3 for the right button.

 This event is primarily useful for ensuring that the primary button was used to begin a drag operation; if ignored, strange results can occur when the user attempts to use a context menu. While the middle and right buttons can be detected with these properties, this is not reliable. In Opera and Safari, for example, right mouse button clicks are not detectable by default.

 If the user clicks on an element, drags away from it, and releases the button, this is still counted as a `mousedown` event. This sequence of actions is treated as a "canceling" of the button press in most user interfaces, so it is usually better to use the `click` event unless we know that the `mousedown` event is preferable for a particular situation.

  ### Additional Notes:

 * As the `.mousedown()` method is just a shorthand for `.on( "mousedown", handler )`, detaching is possible using `.off( "mousedown" )`.
 Example:
--------


 Show texts when mouseup and mousedown event triggering.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mousedown demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Press mouse and release here.</p>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mousedown>

:lang() Selector
================

  lang selector
-------------

  **Description:** Selects all elements of the specified language.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":lang(language)" )

 **language:** A language code.

  The `:lang()` selector matches elements that have a language value equal to the supplied language code or that start with the supplied language code immediately followed by "-". For example, the selector `$("div:lang(en)")`will match `<div lang="en">` and `<div lang="en-us">` (and any of their descendant `<div>`s), but not `<div lang="fr">`

 For HTML elements, the language value is determined by the `lang` attribute and possibly information from `meta` elements or HTTP headers.

 Further discussion of this usage can be found in the [W3C CSS specification](https://www.w3.org/TR/css3-selectors/#lang-pseudo).

  Example:
--------


 Color div elements according to their language.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang demo</title>
  <style>
  body {
    background-color: #ccc;
  }
  h3 {
    margin: .25em 0;
  }
  div {
    line-height: 1.5em
  }
  .usa {
    background-color: #f00;
    color: #fff;
  }
  .usa .usa {
    background-color: #fff;
    color: #000;
  }
  .usa .usa .usa {
    background-color: #00f;
    color: #fff;
  }
  .spain {
    background-color: #f00;
    color: #ff0;
  }
  .spain .spain {
    background-color: #ff0;
    color: #f00;
    line-height: 3em;
  }
  .spain .spain .spain {
    background-color: #f00;
    color: #ff0;
    line-height: 1.5em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<h3>USA</h3>
<div lang="en-us">red
  <div>white
    <div>and blue</div>
  </div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
  <div>amarillo
    <div>y rojo</div>
  </div>
</div>
 
<script>
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/lang-selector>

.last()
=======

   .last()Returns: [jQuery](types#jQuery)
---------------------------------------

  **Description:** Reduce the set of matched elements to the final one in the set.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.last()](#last)


	+ This method does not accept any arguments.

  Given a jQuery object that represents a set of DOM elements, the `.last()` method constructs a new jQuery object from the last element in that set.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).last().css( "background-color", "red" );
```
 The result of this call is a red background for the final item.

  Example:
--------


 Highlight the last item in a list.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last demo</title>
  <style>
  .highlight {
    background-color: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>Look:</li>
  <li>This is some text in a list.</li>
  <li>This is a note about it.</li>
  <li>This is another note about it.</li>
</ul>
 
<script>
$( "ul li" ).last().addClass( "highlight" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/last>

:last-child Selector
====================

  last-child selector
-------------------

  **Description:** Selects all elements that are the last child of their parent.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)jQuery( ":last-child" )

  While [`.last()`](last) matches only a single element, `:last-child` can match more than one: one for each parent.

  Example:
--------


 Find the last span in each matched div and add some css plus a hover state.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last-child demo</title>
  <style>
  span.solast {
    text-decoration: line-through;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon,</span>
  <span>Sam</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
</div>
 
<script>
$( "div span:last-child" )
  .css({ color:"red", fontSize:"80%" })
  .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/last-child-selector>

:last-of-type Selector
======================

  last-of-type selector
---------------------

  **Description:** Selects all elements that are the last among siblings of the same element name.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":last-of-type" )

  The `:last-of-type` selector matches elements that have no other element with the same parent and the same element name coming after it in the document tree.

  Example:
--------


 Find the last span in each matched div and add some css plus a hover state.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last-of-type demo</title>
  <style>
  span.solast {
    text-decoration: line-through;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo,</span>
  <b>Nobody</b>
</div>
 
<script>
$( "span:last-of-type" )
  .css({ color:"red", fontSize:"80%" })
  .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/last-of-type-selector>

:last Selector
==============

   last selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
-------------------------------------------------------------------------------------

  **Description:** Selects the last matched element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":last" )

   **As of jQuery 3.4**, the `:last` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.last()`](last).

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

  ### Additional Notes:

 * Because `:last` is a jQuery extension and not part of the CSS specification, queries using `:last` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:last` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":last")`](filter).
 Example:
--------


 Finds the last table row.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table>
  <tr><td>First Row</td></tr>
  <tr><td>Middle Row</td></tr>
  <tr><td>Last Row</td></tr>
</table>
 
<script>
$( "tr" ).last().css({ backgroundColor: "yellow", fontWeight: "bolder" });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/last-selector>

.map()
======

   .map( callback )Returns: [jQuery](types#jQuery)
------------------------------------------------

  **Description:** Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.map( callback )](#map-callback)


	+ **callback** Type: [Function](types#Function)( [Integer](types#Integer) index, [Element](types#Element) domElement ) => [Object](types#Object)  A function object that will be invoked for each element in the current set.

  If you wish to process a plain array or object, use the [jQuery.map()](jquery.map) instead. 

 As the return value is a jQuery object, which contains an array, it's very common to call `.get()` on the result to work with a basic array.

 The `.map()` method is particularly useful for getting or setting the value of a collection of elements. Consider a form with a set of checkboxes in it:

 
```
<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>
```
 To get a comma-separated list of checkbox `ID`s:

 
```
$( ":checkbox" )
  .map(function() {
    return this.id;
  })
  .get()
  .join();
```
 The result of this call is the string, `"two,four,six,eight"`.

 Within the callback function, `this` refers to the current DOM element for each iteration. The function can return an individual data item or an array of data items to be inserted into the resulting set. If an array is returned, the elements inside the array are inserted into the set. If the function returns `null` or `undefined`, no element will be inserted.

  Examples:
---------


 Build a list of all the values within a form.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>map demo</title>
  <style>
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John">
  <input type="text" name="password" value="password">
  <input type="text" name="url" value="https://johnresig.com/">
</form>
 
<script>
$( "p" )
  .append( $( "input" ).map(function() {
    return $( this ).val();
  })
  .get()
  .join( ", " ) );
</script>
 
</body>
</html>
```
 #### Demo:

   A contrived example to show some functionality.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>map demo</title>
  <style>
  body {
    font-size: 16px;
  }
  ul {
    float: left;
    margin: 0 30px;
    color: blue;
  }
  #results {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>
<ul id="results">
</ul>
 
<script>
var mappedItems = $( "li" ).map(function( index ) {
  var replacement = $( "<li>" ).text( $( this ).text() ).get( 0 );
  if ( index === 0 ) {
 
    // Make the first item all caps
    $( replacement ).text( $( replacement ).text().toUpperCase() );
  } else if ( index === 1 || index === 3 ) {
 
    // Delete the second and fourth items
    replacement = null;
  } else if ( index === 2 ) {
 
    // Make two of the third item and add some text
    replacement = [ replacement, $( "<li>" ).get( 0 ) ];
    $( replacement[ 0 ] ).append( "<b> - A</b>" );
    $( replacement[ 1 ] ).append( "Extra <b> - B</b>" );
  }
 
  // Replacement will be a dom element, null,
  // or an array of dom elements
  return replacement;
});
$( "#results" ).append( mappedItems );
</script>
 
</body>
</html>
```
 #### Demo:

   Equalize the heights of the divs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>map demo</title>
  <style>
  div {
    width: 40px;
    float: left;
  }
  input {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input type="button" value="equalize div heights">
<div style="background: red; height: 40px; "></div>
<div style="background: green; height: 70px;"></div>
<div style="background: blue; height: 50px; "></div>
 
<script>
$.fn.equalizeHeights = function() {
  var maxHeight = this.map(function( i, e ) {
    return $( e ).height();
  }).get();
  return this.height( Math.max.apply( this, maxHeight ) );
};
 
$( "input" ).click(function() {
  $( "div" ).equalizeHeights();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/map>

.mouseenter()
=============

   .mouseenter( handler )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseenter( handler )](#mouseenter-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mouseenter( [eventData ], handler )](#mouseenter-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseenter()](#mouseenter)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "mouseenter", handler )` in the first two variations, and `.trigger( "mouseenter" )` in the third.

 The `mouseenter` JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any element:

 
```
$( "#outer" ).mouseenter(function() {
  $( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" );
});
```
 Now when the mouse pointer moves over the `Outer` `<div>`, the message is appended to `<div id="log">`. You can also trigger the event when another element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#outer" ).mouseenter();
});
```
 After this code executes, clicks on `Trigger the handler` will also append the message.

 The `mouseenter` event differs from `mouseover` in the way it handles event bubbling. If `mouseover` were used in this example, then when the mouse pointer moved over the `Inner` element, the handler would be triggered. This is usually undesirable behavior. The `mouseenter` event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the `Outer` element, but not the `Inner` element.

  ### Additional Notes:

 * As the `.mouseenter()` method is just a shorthand for `.on( "mouseenter", handler )`, detaching is possible using `.off( "mouseenter" )`.
 Example:
--------


 Show texts when mouseenter and mouseout event triggering. `mouseover` fires when the pointer moves into the child element as well, while `mouseenter` fires only when the pointer moves into the bound element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseenter demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="out overout">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p", this ).first().text( "mouse over" );
    $( "p", this ).last().text( ++i );
  })
  .mouseout(function() {
    $( "p", this ).first().text( "mouse out" );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p", this ).first().text( "mouse enter" );
    $( "p", this ).last().text( ++n );
  })
  .mouseleave(function() {
    $( "p", this ).first().text( "mouse leave" );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mouseenter>

.mouseup()
==========

   .mouseup( handler )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseup( handler )](#mouseup-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mouseup( [eventData ], handler )](#mouseup-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseup()](#mouseup)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on('mouseup', handler)` in the first variation, and `.trigger('mouseup')` in the second.

 The `mouseup` event is sent to an element when the mouse pointer is over the element, and the mouse button is released. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any `<div>`:

 
```
$( "#target" ).mouseup(function() {
  alert( "Handler for .mouseup() called." );
});
```
 Now if we click on this element, the alert is displayed:

  `Handler for .mouseup() called.` 

 We can also trigger the event when a different element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#target" ).mouseup();
});
```
 After this code executes, clicks on `Trigger the handler` will also alert the message.

 If the user clicks outside an element, drags onto it, and releases the button, this is still counted as a `mouseup` event. This sequence of actions is not treated as a button press in most user interfaces, so it is usually better to use the `click` event unless we know that the `mouseup` event is preferable for a particular situation.

  ### Additional Notes:

 * As the `.mouseup()` method is just a shorthand for `.on( "mouseup", handler )`, detaching is possible using `.off( "mouseup" )`.
 Example:
--------


 Show texts when mouseup and mousedown event triggering.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseup demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Press mouse and release here.</p>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mouseup>

Multiple Attribute Selector [name=”value”][name2=”value2″]
==========================================================

  attributeMultiple selector
--------------------------

  **Description:** Matches elements that match all of the specified attribute filters.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )

 **attributeFilter1:** An attribute filter.

 **attributeFilter2:** Another attribute filter, reducing the selection even more

 **attributeFilterN:** As many more attribute filters as necessary

 Example:
--------


 Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeMultiple demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input id="man-news" name="man-news">
<input name="milkman">
<input id="letterman" name="new-letterman">
<input name="newmilk">
 
<script>
$( "input[id][name$='man']" ).val( "only this one" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/multiple-attribute-selector>

Multiple Selector (“selector1, selector2, selectorN”)
=====================================================

  multiple selector
-----------------

  **Description:** Selects the combined results of all the specified selectors.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "selector1, selector2, selectorN" )

 **selector1:** Any valid selector.

 **selector2:** Another valid selector.

 **selectorN:** As many more valid selectors as you like.

  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()](add) method.

  Examples:
---------


 Finds the elements that match any of these three selectors.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>multiple demo</title>
  <style>
  div, span, p {
    width: 126px;
    height: 60px;
    float: left;
    padding: 3px;
    margin: 2px;
    background-color: #eee;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
 
<script>
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Show the order in the jQuery object.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>multiple demo</title>
  <style>
  b {
    color: red;
    font-size: 16px;
    display: block;
    clear:left;
  }
  div, span, p {
    width: 40px;
    height: 40px;
    float: left;
    margin: 10px;
    background-color: blue;
    padding: 3px;
    color: white;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
 
<script>
var list = $( "div, p, span" )
  .map( function() {
    return this.tagName;
  })
  .get()
  .join( ", " );
$( "b" ).append( document.createTextNode( list ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/multiple-selector>

.next()
=======

   .next( [selector ] )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** 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.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.next( [selector ] )](#next-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  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.

 The method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 If we begin at the third item, we can find the element which comes just after it:

 
```
$( "li.third-item" ).next().css( "background-color", "red" );
```
 The result of this call is a red background behind item 4. Since we do not supply a selector expression, this following element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.

  Examples:
---------


 Find the very next sibling of each disabled button and change its text "this button is disabled".

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next demo</title>
  <style>
  span {
    color: blue;
    font-weight: bold;
  }
  button {
    width: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div><button disabled="disabled">First</button> - <span></span></div>
<div><button>Second</button> - <span></span></div>
<div><button disabled="disabled">Third</button> - <span></span></div>
 
<script>
$( "button[disabled]" ).next().text( "this button is disabled" );
</script>
 
</body>
</html>
```
 #### Demo:

   Find the very next sibling of each paragraph. Keep only the ones with a class "selected".

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
 
<script>
$( "p" ).next( ".selected" ).css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/next>

:lt() Selector
==============

   lt selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
-----------------------------------------------------------------------------------

  **Description:** Select all elements at an index less than `index` within the matched set.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":lt(index)" )

 **index:** Zero-based index.
* ####  version added: [1.8](https://api.jquery.com/category/version/1.8/)jQuery( ":lt(-index)" )

 **indexFromEnd:** Zero-based index, counting backwards from the last element.

   **As of jQuery 3.4**, the `:lt` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.slice()`](slice). For example, `:lt(3)` can be replaced with a call to `.slice( 0, 3 )`.

   **index-related selectors** 

 The index-related selectors (including this "less than" selector) 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.

 Note that since JavaScript arrays use *0-based indexing*, these selectors reflect that fact. This is why `$( ".myclass:lt(1)" )` selects the first element in the document with the class `myclass`, rather than selecting no elements. In contrast, `:nth-child(n)` uses *1-based indexing* to conform to the CSS specification.

 Prior to jQuery 1.8, the `:lt(index)` selector did *not* accept a negative value for `index`

  ### Additional Notes:

 * Because `:lt()` is a jQuery extension and not part of the CSS specification, queries using `:lt()` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `$("your-pure-css-selector").slice(0, index)` instead.
 Example:
--------


 Give TDs less than the one with the 4th index (TD#4) a yellow background and TDs less than the one with -2nd index a red text color.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lt demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:lt(4)" ).css( "backgroundColor", "yellow" );
$( "td:lt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/lt-selector>

.mouseleave()
=============

   .mouseleave( handler )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseleave( handler )](#mouseleave-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mouseleave( [eventData ], handler )](#mouseleave-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseleave()](#mouseleave)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on('mouseleave', handler)` in the first two variations, and `.trigger('mouseleave')` in the third.

 The `mouseleave` JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any element:

 
```
$( "#outer" ).mouseleave(function() {
  $( "#log" ).append( "<div>Handler for .mouseleave() called.</div>" );
});
```
 Now when the mouse pointer moves out of the `Outer` `<div>`, the message is appended to `<div id="log">`. You can also trigger the event when another element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#outer" ).mouseleave();
});
```
 After this code executes, clicks on `Trigger the handler` will also append the message.

 The `mouseleave` event differs from `mouseout` in the way it handles event bubbling. If `mouseout` were used in this example, then when the mouse pointer moved out of the `Inner` element, the handler would be triggered. This is usually undesirable behavior. The `mouseleave` event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the `Outer` element, but not the `Inner` element.

  ### Additional Notes:

 * As the `.mouseleave()` method is just a shorthand for `.on( "mouseleave", handler )`, detaching is possible using `.off( "mouseleave" )`.
 Example:
--------


 Show number of times mouseout and mouseleave events are triggered. `mouseout` fires when the pointer moves out of child element as well, while `mouseleave` fires only when the pointer moves out of the bound element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseleave demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="out overout">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p", this ).first().text( "mouse over" );
  })
  .mouseout(function() {
    $( "p", this ).first().text( "mouse out" );
    $( "p", this ).last().text( ++i );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p", this ).first().text( "mouse enter" );
  })
  .mouseleave(function() {
    $( "p", this ).first().text( "mouse leave" );
    $( "p", this ).last().text( ++n );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mouseleave>

.mousemove()
============

   .mousemove( handler )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mousemove( handler )](#mousemove-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mousemove( [eventData ], handler )](#mousemove-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mousemove()](#mousemove)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "mousemove", handler )` in the first two variations, and `.trigger( "mousemove" )` in the third.

 The `mousemove` event is sent to an element when the mouse pointer moves inside the element. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="target">
  Move here
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
```
 The event handler can be bound to the target:

 
```
$( "#target" ).mousemove(function( event ) {
  var msg = "Handler for .mousemove() called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<div>" + msg + "</div>" );
});
```
 Now when the mouse pointer moves within the target button, the messages are appended to <div id="log">:

  `Handler for .mousemove() called at (399, 48)`   
 `Handler for .mousemove() called at (398, 46)`   
 `Handler for .mousemove() called at (397, 44)`   
 `Handler for .mousemove() called at (396, 42)`   
 

 To trigger the event manually, apply `.mousemove()` without an argument:

 
```
$( "#other" ).click(function() {
  $( "#target" ).mousemove();
});
```
 After this code executes, clicks on the Trigger button will also append the message:

  `Handler for .mousemove() called at (undefined, undefined)` 

 When tracking mouse movement, you usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as `.clientX`, `.offsetX`, and `.pageX` are available, but support for them differs between browsers. Fortunately, jQuery normalizes the `.pageX` and `.pageY` properties so that they can be used in all browsers. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document, as illustrated in the example output above.

 Keep in mind that the `mousemove` event is triggered whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated over a very small amount of time. If the handler has to do any significant processing, or if multiple handlers for the event exist, this can be a serious performance drain on the browser. It is important, therefore, to optimize `mousemove` handlers as much as possible, and to unbind them as soon as they are no longer needed.

 A common pattern is to bind the `mousemove` handler from within a `mousedown` hander, and to unbind it from a corresponding `mouseup` handler. If implementing this sequence of events, remember that the `mouseup` event might be sent to a different HTML element than the `mousemove` event was. To account for this, the `mouseup` handler should typically be bound to an element high up in the DOM tree, such as `<body>`.

  ### Additional Notes:

 * As the `.mousemove()` method is just a shorthand for `.on( "mousemove", handler )`, detaching is possible using `.off( "mousemove" )`.
 Example:
--------


 Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window, which in this case is the iframe.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mousemove demo</title>
  <style>
  div {
    width: 220px;
    height: 170px;
    margin: 10px 50px 10px 10px;
    background: yellow;
    border: 2px groove;
    float: right;
  }
  p {
    margin: 0;
    margin-left: 10px;
    color: red;
    width: 220px;
    height: 120px;
    padding-top: 70px;
    float: left;
    font-size: 14px;
  }
  span {
    display: block;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  <span>Move the mouse over the div.</span>
  <span>&nbsp;</span>
</p>
<div></div>
 
<script>
$( "div" ).mousemove(function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $( "span" ).first().text( "( event.pageX, event.pageY ) : " + pageCoords );
  $( "span" ).last().text( "( event.clientX, event.clientY ) : " + clientCoords );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mousemove>

.mouseout()
===========

   .mouseout( handler )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseout( handler )](#mouseout-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mouseout( [eventData ], handler )](#mouseout-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseout()](#mouseout)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "mouseout", handler )` in the first two variation, and `.trigger( "mouseout" )` in the third.

 The `mouseout` event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any element:

 
```
$( "#outer" ).mouseout(function() {
  $( "#log" ).append( "Handler for .mouseout() called." );
});
```
 Now when the mouse pointer moves out of the `Outer` `<div>`, the message is appended to `<div id="log">`. To trigger the event manually, apply `.mouseout()` without an argument::

 
```
$( "#other" ).click(function() {
  $( "#outer" ).mouseout();
});
```
 After this code executes, clicks on `Trigger the handler` will also append the message.

 This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the `Inner` element in this example, a `mouseout` event will be sent to that, then trickle up to `Outer`. This can trigger the bound `mouseout` handler at inopportune times. See the discussion for `.<mouseleave>()` for a useful alternative.

  ### Additional Notes:

 * As the `.mouseout()` method is just a shorthand for `.on( "mouseout", handler )`, detaching is possible using `.off( "mouseout" )`.
 Example:
--------


 Show the number of times mouseout and mouseleave events are triggered. `mouseout` fires when the pointer moves out of the child element as well, while `mouseleave` fires only when the pointer moves out of the bound element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseout demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="out overout">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseout(function() {
    $( "p", this ).first().text( "mouse out" );
    $( "p", this ).last().text( ++i );
  })
  .mouseover(function() {
    $( "p", this ).first().text( "mouse over" );
  });
 
var n = 0;
$( "div.enterleave" )
  .on( "mouseenter", function() {
    $( "p", this ).first().text( "mouse enter" );
  })
  .on( "mouseleave", function() {
    $( "p", this ).first().text( "mouse leave" );
    $( "p", this ).last().text( ++n );
  });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mouseout>

.mouseover()
============

   .mouseover( handler )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseover( handler )](#mouseover-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.mouseover( [eventData ], handler )](#mouseover-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.mouseover()](#mouseover)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "mouseover", handler )` in the first two variations, and `.trigger( "mouseover" )` in the third.

 The `mouseover` event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

 For example, consider the HTML:

 
```
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
```
  ![] Figure 1 - Illustration of the rendered HTML  The event handler can be bound to any element:

 
```
$( "#outer" ).mouseover(function() {
  $( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});
```
 Now when the mouse pointer moves over the `Outer` `<div>`, the message is appended to `<div id="log">`. We can also trigger the event when another element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#outer" ).mouseover();
});
```
 After this code executes, clicks on `Trigger the handler` will also append the message.

 This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the `Inner` element in this example, a `mouseover` event will be sent to that, then trickle up to `Outer`. This can trigger our bound `mouseover` handler at inopportune times. See the discussion for `.mouseenter()` for a useful alternative.

  ### Additional Notes:

 * As the `.mouseover()` method is just a shorthand for `.on( "mouseover", handler )`, detaching is possible using `.off( "mouseover" )`.
 Example:
--------


 Show the number of times mouseover and mouseenter events are triggered. `mouseover` fires when the pointer moves into the child element as well, while `mouseenter` fires only when the pointer moves into the bound element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseover demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
 
<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/mouseover>

Next Adjacent Selector (“prev + next”)
======================================

  next adjacent selector
----------------------

  **Description:** Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "prev + next" )

 **prev:** Any valid selector.

 **next:** A selector to match the element that is next to the first selector.

  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.

  Example:
--------


 Finds all inputs that are next to a label.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next adjacent demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">
 
<script>
$( "label + input" ).css( "color", "blue" ).val( "Labeled!" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/next-adjacent-selector>

Next Siblings Selector (“prev ~ siblings”)
==========================================

  next siblings selector
----------------------

  **Description:** Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( "prev ~ siblings" )

 **prev:** Any valid selector.

 **siblings:** A selector to filter elements that are the following siblings of the first 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.

  Example:
--------


 Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next siblings demo</title>
  <style>
  div, span {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
 
<script>
$( "#prev ~ div" ).css( "border", "3px groove blue" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/next-siblings-selector>

.nextAll()
==========

   .nextAll( [selector ] )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.nextAll( [selector ] )](#nextAll-selector)


	+ **selector** Type: [String](types#String)  A string containing a selector expression to match elements against.

  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.

 The method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 If we begin at the third item, we can find the elements which come after it:

 
```
$( "li.third-item" ).nextAll().css( "background-color", "red" );
```
 The result of this call is a red background behind items 4 and 5. Since we do not supply a selector expression, these following elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.

  Examples:
---------


 Locate all the divs after the first and give them a class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextAll demo</title>
  <style>
  div {
    width: 80px;
    height: 80px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
  }
  div.after {
    border-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>first</div>
<div>sibling<div>child</div></div>
<div>sibling</div>
<div>sibling</div>
<script>
$( "div" ).first().nextAll().addClass( "after" );
</script>
 
</body>
</html>
```
 #### Demo:

   Locate all the paragraphs after the second child in the body and give them a class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextAll demo</title>
  <style>
  div, p {
    width: 60px;
    height: 60px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
  }
  .after {
    border-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
 
<script>
$( ":nth-child(1)" ).nextAll( "p" ).addClass( "after" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/nextAll>

.nextUntil()
============

   .nextUntil( [selector ] [, filter ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------------

  **Description:** Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.nextUntil( [selector ] [, filter ] )](#nextUntil-selector-filter)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to indicate where to stop matching following sibling elements.
	+ **filter** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.nextUntil( [element ] [, filter ] )](#nextUntil-element-filter)


	+ **element** Type: [Element](types#Element) or [jQuery](types#jQuery)  A DOM node or jQuery object indicating where to stop matching following sibling elements.
	+ **filter** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a selector expression that represents a set of DOM elements, the `.nextUntil()` method searches 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()` argument.

 If the selector is not matched or is not supplied, all following siblings will be selected; in these cases it selects the same elements as the `.nextAll()` method does when no filter selector is provided.

 **As of jQuery 1.6**, A DOM node or jQuery object, instead of a selector, may be passed to the `.nextUntil()` method.

 The method optionally accepts a selector expression for its second argument. If this argument is supplied, the elements will be filtered by testing whether they match it.

  Example:
--------


 Find the siblings that follow <dt id="term-2"> up to the next <dt> and give them a red background color. Also, find <dd> siblings that follow <dt id="term-1"> up to <dt id="term-3"> and give them a green text color. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextUntil demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>
 
<script>
$( "#term-2" )
  .nextUntil( "dt" )
    .css( "background-color", "red" );
var term3 = document.getElementById( "term-3" );
$( "#term-1" )
  .nextUntil( term3, "dd" )
    .css( "color", "green" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/nextUntil>

.not()
======

   .not( selector )Returns: [jQuery](types#jQuery)
------------------------------------------------

  **Description:** Remove elements from the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.not( selector )](#not-selector)


	+ **selector** Type: [Selector](types#Selector) or [Element](types#Element) or [Array](types#Array)  A string containing a selector expression, a DOM element, or an array of elements to match against the set.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.not( function )](#not-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Element](types#Element) element ) => [Boolean](types#Boolean)  A function used as a test for each element in the set. It accepts two arguments, `index`, which is the element's index in the jQuery collection, and `element`, which is the DOM element. Within the function, `this` refers to the current DOM element.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.not( selection )](#not-selection)


	+ **selection** Type: [jQuery](types#jQuery)  An existing jQuery object to match the current set of elements against.

  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.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).not( ":nth-child(2n)" ).css( "background-color", "red" );
```
 The result of this call is a red background for items 1, 3 and 5, as they do not match the selector.

 #### Removing Specific Elements

 The second version of the `.not()` method allows us to remove elements from the matched set, assuming we have found those elements previously by some other means. For example, suppose our list had an id applied to one of its items:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can fetch the third list item using the native JavaScript `getElementById()` function, then remove it from a jQuery object:

 
```
$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );
```
 This statement changes the color of items 1, 2, 4, and 5. We could have accomplished the same thing with a simpler jQuery expression, but this technique can be useful when, for example, other libraries provide references to plain DOM nodes.

 As of jQuery 1.4, the `.not()` method can take a function as its argument in the same way that `.filter()` does. Elements for which the function returns `true` are excluded from the filtered set; all other elements are included.

 **Note:** When a CSS selector string is passed to `.not()`, text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When a specific node or array of nodes are provided, text or comment nodes will only be removed from the jQuery object if they match one of the nodes in the filtering array.

  Examples:
---------


 Adds a border to divs that are not green or blue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>
```
 #### Demo:

   Removes the element with the ID "selected" from the set of all paragraphs.

 
```
$( "p" ).not( $( "#selected" )[ 0 ] );
```
   Removes the element with the ID "selected" from the set of all paragraphs.

 
```
$( "p" ).not( "#selected" );
```
   Removes all elements that match "div p.selected" from the total set of all paragraphs.

 
```
$( "p" ).not( $( "div p.selected" ) );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/not>

:not() Selector
===============

  not selector
------------

  **Description:** Selects all elements that do not match the given selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":not(selector)" )

 **selector:** A selector with which to filter by.

  All selectors are accepted inside `:not()`, for example: `:not(div a)` and `:not(div,a)`.

 ### Additional Notes

 The `[.not()](not)` method will end up providing you with more readable selections than pushing complex selectors or variables into a `:not()` selector filter. In most cases, it is a better choice.

  Example:
--------


 Finds all inputs that are not checked and highlights the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <input type="checkbox" name="a">
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b">
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked">
  <span>Peter</span>
</div>
 
<script>
$( "input:not(:checked) + span" ).css( "background-color", "yellow" );
$( "input").attr( "disabled", "disabled" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/not-selector>

:nth-child() Selector
=====================

  nth-child selector
------------------

  **Description:** Selects all elements that are the nth-child of their parent.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)jQuery( ":nth-child(index/even/odd/equation)" )

 **index:** The index of each child to match, starting with `1`, the string `even` or `odd`, or an equation ( eg. `:nth-child(even)`, `:nth-child(4n)` )

  Because jQuery's implementation of `:nth-` selectors is strictly derived from the CSS specification, the value of `n` is "1-indexed", meaning that the counting starts at 1. jQuery methods like [`.first()`](first) or [`.eq()`](eq) jQuery follows JavaScript's "0-indexed" counting. Given a single `<ul>` containing two `<li>`s, `$( "li:nth-child(1)" )` selects the first `<li>` while `$( "li" ).eq( 1 )` selects the second.

 The `:nth-child(n)` pseudo-class is easily confused with the `.eq( n )` call, even though the two can result in dramatically different matched elements. With `:nth-child(n)`, all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With the `.eq( n )` call only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

 Further discussion of this unusual usage can be found in the [W3C CSS specification](https://www.w3.org/TR/css3-selectors/#nth-child-pseudo).

  Examples:
---------


 Find the second li in each matched ul and note it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
</script>
 
</body>
</html>
```
 #### Demo:

   This is a playground to see how the selector works with different strings. Notice that this is different from the [`even`](even) and [`odd`](odd) which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button data-method="even">.even()</button>
  <button data-method="odd">.odd()</button>
</div>
 
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  var method = $( this ).attr( "data-method" );
  $( "tr" ).css( "background", "white" );
  if ( method ) {
    $( "tr" )[ method ]().css( "background", "#ff0000" );
  } else {
    $( "tr" + str ).css( "background", "#ff0000" );
  }
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/nth-child-selector>

:nth-last-child() Selector
==========================

  nth-last-child selector
-----------------------

  **Description:** Selects all elements that are the nth-child of their parent, counting from the last element to the first.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":nth-last-child(index/even/odd/equation)" )

 **index:** The index of each child to match, starting with the last one (`1`), the string `even` or `odd`, or an equation ( eg. `:nth-last-child(even)`, `:nth-last-child(4n)` )

  Because jQuery's implementation of `:nth-` selectors is strictly derived from the CSS specification, the value of `n` is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as [`.first()`](first) or [`.eq()`](eq) jQuery follows JavaScript's "0-indexed" counting. Given a single `<ul>` containing three `<li>`s, `$( "li:nth-last-child(1)" )` selects the third, last, `<li>`.

 Further discussion of this usage can be found in the [W3C CSS specification](https://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo).

  Examples:
---------


 Find the second to last li in each matched ul and note it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-child demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>
<script>
$( "ul li:nth-last-child(2)" ).append( "<span> - 2nd to last!</span>" );
</script>
 
</body>
</html>
```
 #### Demo:

   This is a playground to see how the selector works with different strings. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size:18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-last-child(even)</button>
  <button>:nth-last-child(odd)</button>
  <button>:nth-last-child(3n)</button>
  <button>:nth-last-child(2)</button>
</div>
<div>
  <button>:nth-last-child(3n+1)</button>
  <button>:nth-last-child(3n+2)</button>
</div>
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text(str);
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/nth-last-child-selector>

:nth-last-of-type() Selector
============================

  nth-last-of-type selector
-------------------------

  **Description:** Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":nth-last-of-type(index/even/odd/equation)" )

 **index:** The index of each child to match, starting with the last one (`1`), the string `even` or `odd`, or an equation ( eg. `:nth-last-of-type(even)`, `:nth-last-of-type(4n)` )

  Because jQuery's implementation of `:nth-` selectors is strictly derived from the CSS specification, the value of `n` is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as [`.first()`](first) or [`.eq()`](eq) jQuery follows JavaScript's "0-indexed" counting. Given a single `<ul>` containing three `<li>`s, `$('li:nth-last-of-type(1)')` selects the third, last, `<li>`.

 Further discussion of this usage can be found in the [W3C CSS specification](https://www.w3.org/TR/css3-selectors/#nth-last-of-type-pseudo).

  Examples:
---------


 Find the second to last li in each matched ul and note it.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-of-type demo</title>
  <style>
  div {
    float: left;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Adam</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dan</li>
  </ul>
</div>
<div>
  <ul>
    <li>Dave</li>
    <li>Rick</li>
    <li>Timmy</li>
    <li>Gibson</li>
  </ul>
</div>
 
<script>
$( "ul li:nth-last-of-type(2)" ).append( "<span> - 2nd to last!</span>" );
</script>
 
</body>
</html>
```
 #### Demo:

   This is a playground to see how the selector works with different strings. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-of-type demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-last-of-type(even)</button>
  <button>:nth-last-of-type(odd)</button>
  <button>:nth-last-of-type(3n)</button>
  <button>:nth-last-of-type(2)</button>
</div>
<div>
  <button>:nth-last-of-type(3n+1)</button>
  <button>:nth-last-of-type(3n+2)</button>
</div>
 
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/nth-last-of-type-selector>

:nth-of-type() Selector
=======================

  nth-of-type selector
--------------------

  **Description:** Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":nth-of-type(index/even/odd/equation)" )

 **index:** The index of each child to match, starting with `1`, the string `even` or `odd`, or an equation ( eg. `:nth-of-type(even)`, `:nth-of-type(4n)` )

  Because jQuery's implementation of `:nth-` selectors is strictly derived from the CSS specification, the value of `n` is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as [`.first()`](first) or [`.eq()`](eq) jQuery follows JavaScript's "0-indexed" counting. 

 Further discussion of this usage can be found in the [W3C CSS specification](https://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo).

  Example:
--------


 Find each span that is second in relation to its sibling spans.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type demo</title>
  <style>
  .nth {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>John</span>,
  <b>Kim</b>,
  <span>Adam</span>,
  <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>,
  <span>Richard</span>,
  <span>Ralph</span>,
  <span>Jason</span>
</div>
 
<script>
$( "span:nth-of-type(2)" )
  .append( "<span> is 2nd sibling span</span>" )
  .addClass( "nth" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/nth-of-type-selector>

.off()
======

   .off( events [, selector ] [, handler ] )Returns: [jQuery](types#jQuery)
-------------------------------------------------------------------------

  **Description:** Remove an event handler.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.off( events [, selector ] [, handler ] )](#off-events-selector-handler)


	+ **events** Type: [String](types#String)  One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
	+ **selector** Type: [String](types#String)  A selector which should match the one originally passed to `.on()` when attaching event handlers.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A handler function previously attached for the event(s), or the special value `false`.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.off( events [, selector ] )](#off-events-selector)


	+ **events** Type: [PlainObject](types#PlainObject)  An object where the string keys represent one or more space-separated event types and optional namespaces, and the values represent handler functions previously attached for the event(s).
	+ **selector** Type: [String](types#String)  A selector which should match the one originally passed to `.on()` when attaching event handlers.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.off( event )](#off-event)


	+ **event** Type: [Event](types#Event)  A [`jQuery.Event`](category/events/event-object) object.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.off()](#off)


	+ This signature does not accept any arguments.

  The `.off()` method removes event handlers that were attached with [`.on()`](on). See the discussion of delegated and directly bound events on that page for more information. Calling `.off()` with no arguments removes all handlers attached to the elements. Specific event handlers can be removed on elements by providing combinations of event names, namespaces, selectors, or handler function names. **When multiple filtering arguments are given, all of the arguments provided must match for the event handler to be removed.**

 If a simple event name such as `"click"` is provided, *all* events of that type (both direct and delegated) are removed from the elements in the jQuery set. When writing code that will be used as a plugin, or simply when working with a large code base, best practice is to attach and remove events using namespaces so that the code will not inadvertently remove event handlers attached by other code. All events of all types in a specific namespace can be removed from an element by providing just a namespace, such as `".myPlugin"`. At minimum, either a namespace or event name must be provided.

 To remove specific delegated event handlers, provide a `selector` argument. The selector string must exactly match the one passed to `.on()` when the event handler was attached. To remove all delegated events from an element without removing non-delegated events, use the special value `"**"`.

 A handler can also be removed by specifying the function name in the `handler` argument. When jQuery attaches an event handler, it assigns a unique id to the handler function. Handlers proxied by [`jQuery.proxy()`](jquery.proxy) or a similar mechanism will all have the same unique id (the proxy function), so passing proxied handlers to `.off` may remove more handlers than intended. In those situations it is better to attach and remove event handlers using namespaces.

 As with `.on()`, you can pass `events` as an object instead of specifying an `events` string and `handler` function as separate arguments. The keys for the `events` object are events and/or namespaces; the values are handler functions or the special value `false`.

  Examples:
---------


 Add and remove event handlers on the colored button.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>off demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
 
<script>
function flash() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Does nothing..." );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Remove all event handlers from all paragraphs:

 
```
$( "p" ).off();
```
   Remove all delegated click handlers from all paragraphs:

 
```
$( "p" ).off( "click", "**" );
```
   Remove just one previously bound handler by passing it as the third argument:

 
```
var foo = function() {
  // Code to handle some kind of event
};
 
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).on( "click", "p", foo );
 
// ... Foo will no longer be called.
$( "body" ).off( "click", "p", foo );
```
   Unbind all delegated event handlers by their namespace:

 
```
var validate = function() {
  // Code to validate form entries
};
 
// Delegate events under the ".validator" namespace
$( "form" ).on( "click.validator", "button", validate );
 
$( "form" ).on( "keypress.validator", "input[type='text']", validate );
 
// Remove event handlers in the ".validator" namespace
$( "form" ).off( ".validator" );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/off>

.offset()
=========

  Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. #### Contents:

 * [.offset()](#offset1)
	+ [.offset()](#offset)
* [.offset( coordinates )](#offset2)
	+ [.offset( coordinates )](#offset-coordinates)
	+ [.offset( function )](#offset-function)

 
 .offset()Returns: [Object](types#Object)
-----------------------------------------

  **Description:** Get the current coordinates of the first element in the set of matched elements, relative to the document.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.offset()](#offset)


	+ This method does not accept any arguments.

  The `.offset()` method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) *relative to the document*. Contrast this with `[.position()](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 more useful.

 `.offset()` returns an object containing the properties `top` and `left`.

  **Note:** jQuery does not support getting the offset coordinates of hidden elements or accounting for margins set on the `<html>` document element.

 While it is possible to get the coordinates of elements with `visibility:hidden` set, `display:none` is excluded from the rendering tree and thus has a position that is undefined.

   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.offset()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
 Examples:
---------


 Access the offset of the second paragraph:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p>2nd Paragraph</p>
 
<script>
var p = $( "p" ).last();
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
 
</body>
</html>
```
 #### Demo:

   Click to see the offset.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
    color: blue;
    width: 200px;
    cursor: pointer;
  }
  span {
    color: red;
    cursor: pointer;
  }
  div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>
 
<script>
$( "*", document.body ).click(function( event ) {
  var offset = $( this ).offset();
  event.stopPropagation();
  $( "#result" ).text( this.tagName +
    " coords ( " + offset.left + ", " + offset.top + " )" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   .offset( coordinates )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Set the current coordinates of every element in the set of matched elements, relative to the document.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.offset( coordinates )](#offset-coordinates)


	+ **coordinates** Type: [PlainObject](types#PlainObject)  An object containing the properties `top` and `left`, which are numbers indicating the new top and left coordinates for the elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.offset( function )](#offset-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [PlainObject](types#PlainObject) coords ) => [PlainObject](types#PlainObject)  A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new `top` and `left` properties.

  The `.offset()` setter method allows us to reposition an element. The element's border-box position is specified *relative to the document*. If the element's `position` style property is currently `static`, it will be set to `relative` to allow for this repositioning.

  Example:
--------


 Set the offset of the second paragraph:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p>2nd Paragraph</p>
 
<script>
$( "p" ).last().offset({ top: 10, left: 30 });
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/offset>

.on()
=====

   .on( events [, selector ] [, data ], handler )Returns: [jQuery](types#jQuery)
------------------------------------------------------------------------------

  **Description:** Attach an event handler function for one or more events to the selected elements.

 * ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.on( events [, selector ] [, data ], handler )](#on-events-selector-data-handler)


	+ **events** Type: [String](types#String)  One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
	+ **selector** Type: [String](types#String)  A selector string to filter the descendants of the selected elements that trigger the event. If the selector is `null` or omitted, the event is always triggered when it reaches the selected element.
	+ **data** Type: [Anything](types#Anything)  Data to be passed to the handler in [`event.data`](event.data) when an event is triggered.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject [, [Anything](types#Anything) extraParameter ] [, ... ] ) A function to execute when the event is triggered. The value `false` is also allowed as a shorthand for a function that simply does `return false`.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.on( events [, selector ] [, data ] )](#on-events-selector-data)


	+ **events** Type: [PlainObject](types#PlainObject)  An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
	+ **selector** Type: [String](types#String)  A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
	+ **data** Type: [Anything](types#Anything)  Data to be passed to the handler in [`event.data`](event.data) when an event occurs.

  The `.on()` method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the `.on()` method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see [`.bind()`](bind), [`.delegate()`](delegate), and [`.live()`](live). To remove events bound with `.on()`, see [`.off()`](off). To attach an event that runs only once and then removes itself, see [`.one()`](one)

 Event names and namespaces
--------------------------

 Any event names can be used for the `events` argument. jQuery will pass through the browser's standard JavaScript event types, calling the `handler` function when the browser generates events due to user actions such as `click`. In addition, the [`.trigger()`](trigger) method can trigger both standard browser event names and custom event names to call attached handlers. Event names should only contain alphanumerics, underscore, and colon characters.

 An event name can be qualified by *event namespaces* that simplify removing or triggering the event. For example, `"click.myPlugin.simple"` defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with `.off("click.myPlugin")` or `.off("click.simple")` without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces should contain upper/lowercase letters and digits only.

 In the second form of `.on()`, the `events` argument is a plain object. The keys are strings in the same form as the `events` argument with space-separated event type names and optional namespaces. The value for each key is a function (or `false` value) that is used as the `handler` instead of the final argument to the method. In other respects, the two forms are identical in their behavior as described below.

 Direct and delegated event handlers
-----------------------------------

 The majority of browser events *bubble*, or *propagate*, from the deepest, innermost element (the **event target**) in the document where they occur all the way up to the body and the `document` element. In Internet Explorer 8 and lower, a few events such as `change` and `submit` do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

 If `selector` is omitted or is null, the event handler is referred to as *direct* or *directly-bound*. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

 When a `selector` is provided, the event handler is referred to as *delegated*. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

 **Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to `.on()`**. To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated event handlers to attach event handlers.

 **Delegated event handlers** have the advantage that they can process events from *descendant elements* that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or `document` if the event handler wants to monitor all bubbling events in the document. The `document` element is available in the `head` of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

 In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated event handlers is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its `tbody`, this example attaches a handler to 1,000 elements:

 
```
$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});
```
 An event-delegation approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked `tr` to `tbody`):

 
```
$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
```
 **Note:** Delegated event handlers do not work for SVG.

 The event handler and its environment
-------------------------------------

 The `handler` argument is a function (or the value `false`, see below), and is required unless you pass an object for the `events` argument. You can provide an anonymous handler function at the point of the `.on()` call, as the examples have done above, or declare a named function and pass its name:

 
```
function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );
```
 When the browser triggers an event or other JavaScript calls jQuery's `.trigger()` method, jQuery passes the handler an [`Event`](category/events/event-object) object it can use to analyze and change the status of the event. This object is a *normalized subset* of data provided by the browser; the browser's unmodified native event object is available in `event.originalEvent`. For example, [`event.type`](event.type) contains the event name (e.g., "resize") and [`event.target`](event.target) indicates the deepest (innermost) element where the event occurred.

 By default, most events bubble up from the original event target to the `document` element. At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling `event.stopPropagation()`. Any other handlers attached on the current element *will* run however. To prevent that, call `event.stopImmediatePropagation()`. (Event handlers bound to an element are called in the same order that they were bound.)

 Similarly, a handler can call `event.preventDefault()` to cancel any default action that the browser may have for this event; for example, the default action on a `click` event is to follow the link. Not all browser events have default actions, and not all default actions can be canceled. See the [W3C Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-types-list) for details.

 Returning `false` from an event handler will automatically call `event.stopPropagation()` and `event.preventDefault()`. A `false` value can also be passed for the `handler` as a shorthand for `function(){ return false; }`. So, `$( "a.disabled" ).on( "click", false );` attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling. 

 When jQuery calls a handler, the `this` keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching `selector`. (Note that `this` may not be equal to `event.target` if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use `$( this )`.

 Passing data to the handler
---------------------------

 If a `data` argument is provided to `.on()` and is not `null` or `undefined`, it is passed to the handler in the [`event.data`](event.data) property each time an event is triggered. The `data` argument can be any type, but if a string is used the `selector` must either be provided or explicitly passed as `null` so that the data is not mistaken for a selector. Best practice is to use a plain object so that multiple values can be passed as properties.

 As of jQuery 1.4, the same event handler can be bound to an element multiple times. This is especially useful when the `event.data` feature is being used, or when other unique data resides in a closure around the event handler function. For example:

 
```
function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );
```
 The above code will generate two different alerts when the button is clicked.

 As an alternative or in addition to the `data` argument provided to the `.on()` method, you can also pass data to an event handler using a second argument to [`.trigger()`](trigger) or [`.triggerHandler()`](triggerhandler). Data provided this way is passed to the event handler as further parameters after the `Event` object. If an array was passed to the second argument of `.trigger()` or `.triggerHandler()`, each element in the array will be presented to the event handler as an individual parameter.

 Event performance
-----------------

 In most cases, an event such as `click` occurs infrequently and performance is not a significant concern. However, high frequency events such as `mousemove` or `scroll` can fire dozens of times per second, and in those cases it becomes more important to use events judiciously. Performance can be increased by reducing the amount of work done in the handler itself, caching information needed by the handler rather than recalculating it, or by rate-limiting the number of actual page updates using `setTimeout`.

 Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of `document` or `document.body` for delegated events on large documents.

 jQuery can process simple selectors of the form `tag#id.class` very quickly when they are used to filter delegated events. So, `"#myForm"`, `"a.external"`, and `"button"` are all fast selectors. Delegated events that use more complex selectors, particularly hierarchical ones, can be several times slower--although they are still fast enough for most applications. Hierarchical selectors can often be avoided simply by attaching the handler to a more appropriate point in the document. For example, instead of `$( "body" ).on( "click", "#commentForm .addNew", addComment )` use `$( "#commentForm" ).on( "click", ".addNew", addComment )`.

 Additional notes
----------------

 There are shorthand methods for some events such as [`.click()`](click) that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the [events category](category/events).

 *Deprecated in jQuery 1.8, removed in 1.9:* The name `"hover"` used as a shorthand for the string `"mouseenter mouseleave"`. It attaches a *single event handler* for those two events, and the handler must examine `event.type` to determine whether the event is `mouseenter` or `mouseleave`. Do not confuse the "hover" pseudo-event-name with the [`.hover()`](hover) method, which accepts *one or two* functions.

 jQuery's event system requires that a DOM element allow attaching data via a property on the element, so that events can be tracked and delivered. The `object`, `embed`, and `applet` elements cannot attach data, and therefore cannot have jQuery events bound to them.

 The `focus` and `blur` events are specified by the W3C to not bubble, but jQuery defines cross-browser `focusin` and `focusout` events that do bubble. When `focus` and `blur` are used to attach delegated event handlers, jQuery maps the names and delivers them as `focusin` and `focusout` respectively. For consistency and clarity, use the bubbling event type names.

 In all browsers, the `load`, `scroll`, and `error` events (e.g., on an `<img>` element) do not bubble. In Internet Explorer 8 and lower, the `paste` and `reset` events do not bubble. Such events are not supported for use with delegation, but they *can* be used when the event handler is directly attached to the element generating the event.

 The `error` event on the `window` object uses nonstandard arguments and return value conventions, so it is not supported by jQuery. Instead, assign a handler function directly to the `window.onerror` property.

 The handler list for an element is set when the event is first delivered. Adding or removing event handlers on the current element won't take effect until the next time the event is handled. To prevent any further event handlers from executing on an element within an event handler, call `event.stopImmediatePropagation()`. This behavior goes against the [W3C events specification](https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-removeEventListener). To better understand this case, consider the following code:

 
```
var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );
```
 In the code above, `handler2` will be executed anyway the first time even if it's removed using [`.off()`](off). However, the handler will not be executed the following times the `click` event is triggered.

  Examples:
---------


 Display a paragraph's text in an alert when it is clicked:

 
```
$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});
```
   Pass data to the event handler, which is specified here by name:

 
```
function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );
```
   Cancel a form submit action and prevent the event from bubbling up by returning `false`:

 
```
$( "form" ).on( "submit", false );
```
   Cancel only the default action by using `.preventDefault()`.

 
```
$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});
```
   Stop submit events from bubbling without preventing form submit, using `.stopPropagation()`.

 
```
$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});
```
   Pass data to the event handler using the second argument to `.trigger()`

 
```
$( "div" ).on( "click", function( event, person ) {
  alert( "Hello, " + person.name );
});
$( "div" ).trigger( "click", { name: "Jim" } );
```
   Use the the second argument of `.trigger()` to pass an array of data to the event handler

 
```
$( "div" ).on( "click", function( event, salutation, name ) {
  alert( salutation + ", " + name );
});
$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );
```
   Attach and trigger custom (non-browser) events.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
 
<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Attach multiple event handlers simultaneously using a plain object.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  .test {
    color: #000;
    padding: .5em;
    border: 1px solid #444;
  }
  .active {
    color: #900;
  }
  .inside {
    background-color: aqua;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="test">test div</div>
 
<script>
$( "div.test" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  }, mouseenter: function() {
    $( this ).addClass( "inside" );
  }, mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   Click any paragraph to add another after it. Note that `.on()` allows a click event on any paragraph--even new ones--since the event is handled by the ever-present body element after it bubbles to there.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Click me!</p>
<span></span>
 
<script>
var count = 0;
$( "body" ).on( "click", "p", function() {
  $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Display each paragraph's text in an alert box whenever it is clicked:

 
```
$( "body" ).on( "click", "p", function() {
  alert( $( this ).text() );
});
```
   Cancel a link's default action using the `.preventDefault()` method:

 
```
$( "body" ).on( "click", "a", function( event ) {
  event.preventDefault();
});
```
   Attach multiple events—one on `mouseenter` and one on `mouseleave` to the same element:

 
```
$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "active" );
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/on>

Category: Offset
================

   [.offset()](../offset "Permalink to .offset()")
================================================

  Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

     [.offsetParent()](../offsetparent "Permalink to .offsetParent()")
==================================================================

  Get the closest ancestor element that is positioned.

     [.position()](../position "Permalink to .position()")
======================================================

  Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

     [.scrollLeft()](../scrollleft "Permalink to .scrollLeft()")
============================================================

  Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

     [.scrollTop()](../scrolltop "Permalink to .scrollTop()")
=========================================================

  Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/offset>

:odd Selector
=============

   odd selectorversion deprecated: [3.4](https://api.jquery.com/category/version/3.4/)
------------------------------------------------------------------------------------

  **Description:** Selects odd elements, zero-indexed. See also [`:even`](even-selector).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":odd" )

   **As of jQuery 3.4**, the `:odd` pseudo-class is deprecated. Remove it from your selectors and filter the results later using [`.odd()`](odd) (available in jQuery 3.5.0 or newer).

  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.

  ### Additional Notes:

 * Because `:odd` is a jQuery extension and not part of the CSS specification, queries using `:odd` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:odd` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":odd")`](filter).
* Selected elements are in the order of their appearance in the document.
 Example:
--------


 Finds odd table rows, matching the second, fourth and so on (index 1, 3, 5 etc.).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>odd demo</title>
  <style>
  table {
    background: #f3f7f5;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>
 
<script>
$( "tr:odd" ).css( "background-color", "#bbbbff" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/odd-selector>

.odd()
======

   .odd()Returns: [jQuery](types#jQuery)
--------------------------------------

  **Description:** Reduce the set of matched elements to the odd ones in the set, numbered from zero.

 * ####  version added: [3.5](https://api.jquery.com/category/version/3.5/)[.odd()](#odd)


	+ This method does not accept any arguments.

  Given a jQuery object that represents a set of DOM elements, the `.odd()` method constructs a new jQuery object from the odd elements in that set. Counting starts from zero!

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).odd().css( "background-color", "red" );
```
 The result of this call is a red background for the second & 4th items.

  Example:
--------


 Highlight the odd items in a list.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>odd demo</title>
  <style>
  .highlight {
    background-color: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>Look:</li>
  <li>This is some text in a list.</li>
  <li>This is a note about it.</li>
  <li>This is another note about it.</li>
</ul>
 
<script>
$( "ul li" ).odd().addClass( "highlight" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/odd>

.parent()
=========

   .parent( [selector ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.parent( [selector ] )](#parent-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a jQuery object that represents a set of DOM elements, the `parent()` method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.

 This method is similar to [`.parents()`](parents), except `.parent()` only travels a single level up the DOM tree. Also, `$( "html" ).parent()` method returns a set containing `document` whereas `$( "html" ).parents()` returns an empty set.

 The method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

 Consider a page with a basic nested list on it:

 
```
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
```
 If we begin at item A, we can find its parents:

 
```
$( "li.item-a" ).parent().css( "background-color", "red" );
```
 The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.

  Examples:
---------


 Shows the parent of each element as (parent > child). Check the View Source to see the raw html.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parent demo</title>
  <style>
  div, p {
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>div,
  <span>span, </span>
  <b>b </b>
</div>
 
<p>p,
  <span>span,
    <em>em </em>
  </span>
</p>
 
<div>div,
  <strong>strong,
    <span>span, </span>
    <em>em,
      <b>b, </b>
    </em>
  </strong>
  <b>b </b>
</div>
 
<script>
$( "*", document.body ).each(function() {
  var parentTag = $( this ).parent().get( 0 ).tagName;
  $( this ).prepend( document.createTextNode( parentTag + " > " ) );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Find the parent element of each paragraph with a class "selected".

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parent demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
 
<script>
$( "p" ).parent( ".selected" ).css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/parent>

.parents()
==========

   .parents( [selector ] )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.parents( [selector ] )](#parents-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  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. When multiple DOM elements are in the original set, the resulting set will be in *reverse* order of the original elements as well, with duplicates removed.

 The `.parents()` and `[.parent()](parent)` methods are similar, except that the latter only travels a single level up the DOM tree. Also, `$( "html" ).parent()` method returns a set containing `document` whereas `$( "html" ).parents()` returns an empty set.

 The method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

 Consider a page with a basic nested list on it:

 
```
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
```
 If we begin at item A, we can find its ancestors:

 
```
$( "li.item-a" ).parents().css( "background-color", "red" );
```
 The result of this call is a red background for the level-2 list, item II, and the level-1 list (and on up the DOM tree all the way to the `<html>` element). Since we do not supply a selector expression, all of the ancestors are part of the returned jQuery object. If we had supplied one, only the matching items among these would be included.

  Examples:
---------


 Find all parent elements of each b.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parents demo</title>
  <style>
  b, span, p, html body {
    padding: .5em;
    border: 1px solid;
  }
  b {
    color: blue;
  }
  strong {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <p>
    <span>
      <b>My parents are: </b>
    </span>
  </p>
</div>
 
<script>
var parentEls = $( "b" ).parents()
  .map(function() {
    return this.tagName;
  })
  .get()
  .join( ", " );
$( "b" ).append( "<strong>" + parentEls + "</strong>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Click to find all unique div parent elements of each span.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parents demo</title>
  <style>
  p, div, span {
    margin: 2px;
    padding: 1px;
  }
  div {
    border: 2px white solid;
  }
  span {
    cursor: pointer;
    font-size: 12px;
  }
  .selected {
    color: blue;
  }
  b {
    color: red;
    display: block;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  <div>
    <div><span>Hello</span></div>
      <span>Hello Again</span>
    </div>
    <div>
      <span>And Hello Again</span>
    </div>
  </p>
  <b>Click Hellos to toggle their parents.</b>
 
<script>
function showParents() {
  $( "div" ).css( "border-color", "white" );
  var len = $( "span.selected" )
    .parents( "div" )
      .css( "border", "2px red solid" )
      .length;
  $( "b" ).text( "Unique div parents: " + len );
}
$( "span" ).click(function() {
  $( this ).toggleClass( "selected" );
  showParents();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/parents>

.prepend()
==========

   .prepend( content [, content ] )Returns: [jQuery](types#jQuery)
----------------------------------------------------------------

  **Description:** Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.prepend( content [, content ] )](#prepend-content-content)


	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the beginning of each element in the set of matched elements.
	+ **content** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [Array](types#Array) or [jQuery](types#jQuery)  One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the beginning of each element in the set of matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.prepend( function )](#prepend-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) elementOfArray, [String](types#String) html ) => [htmlString](types#htmlString) or [Element](types#Element) or [Text](types#Text) or [jQuery](types#jQuery)  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, `this` refers to the current element in the set.

  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()`](append)). 

 The `.prepend()` and `[.prependTo()](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.

 Consider the following HTML:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 You can create content and insert it into several elements at once:

 
```
$( ".inner" ).prepend( "<p>Test</p>" );
```
 Each `<div class="inner">` element gets this new content:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>
```
 You can also select an element on the page and insert it into another:

 
```
$( ".container" ).prepend( $( "h2" ) );
```
 If *a single element* selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (*not cloned*):

 
```
<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>
```
 **Important**: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

 #### Additional Arguments

 Similar to other content-adding methods such as `[.append()](append)` and `[.before()](before)`, `.prepend()` also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

 For example, the following will insert two new `<div>`s and an existing `<div>` as the first three child nodes of the body:

 
```
var $newdiv1 = $( "<div id='object1'></div>"),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).prepend( $newdiv1, [ newdiv2, existingdiv1 ] );
```
 Since `.prepend()` can accept any number of additional arguments, the same result can be achieved by passing in the three `<div>`s as three separate arguments, like so: `$( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 )`. The type and number of arguments will largely depend on how you collect the elements in your code.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
* jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are `addClass` and `removeClass`.
 Examples:
---------


 Prepends some HTML to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>there, friend!</p>
<p>amigo!</p>
 
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Prepends a DOM Element to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>is what I'd say</p>
<p>is what I said</p>
 
<script>
$( "p" ).prepend( document.createTextNode( "Hello " ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p> is what was said.</p><b>Hello</b>
 
<script>
$( "p" ).prepend( $( "b" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/prepend>

.one()
======

   .one( events [, data ], handler )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------------

  **Description:** Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

 * ####  version added: [1.1](https://api.jquery.com/category/version/1.1/)[.one( events [, data ], handler )](#one-events-data-handler)


	+ **events** Type: [String](types#String)  A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.
	+ **data** Type: [PlainObject](types#PlainObject)  Data to be passed to the handler in [`event.data`](event.data) when an event is triggered.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute at the time the event is triggered.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.one( events [, selector ] [, data ], handler )](#one-events-selector-data-handler)


	+ **events** Type: [String](types#String)  One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
	+ **selector** Type: [String](types#String)  A selector string to filter the descendants of the selected elements that trigger the event. If the selector is `null` or omitted, the event is always triggered when it reaches the selected element.
	+ **data** Type: [Anything](types#Anything)  Data to be passed to the handler in [`event.data`](event.data) when an event is triggered.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the event is triggered. The value `false` is also allowed as a shorthand for a function that simply does `return false`.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.one( events [, selector ] [, data ] )](#one-events-selector-data)


	+ **events** Type: [PlainObject](types#PlainObject)  An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
	+ **selector** Type: [String](types#String)  A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
	+ **data** Type: [Anything](types#Anything)  Data to be passed to the handler in [`event.data`](event.data) when an event occurs.

  The `.one()` method is identical to `.on()`, except that the handler for a given element and event type is unbound after its first invocation. For example:

 
```
$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});
```
 After the code is executed, a click on the element with ID `foo` will display the alert. Subsequent clicks will do nothing. This code is equivalent to:

 
```
$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});
```
 In other words, explicitly calling `.off()` from within a regularly-bound handler has exactly the same effect.

 If the first argument contains more than one space-separated event types, the event handler is called *once for each event type*.

 
```
$( "#foo" ).one( "click mouseover", function( event ) {
  alert( "The " + event.type + " event happened!" );
});
```
 In the example above the alert could be displayed twice due to the *two* event types (`click` and `mouseover`).

  Examples:
---------


 Tie a one-time click to each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    background: green;
    border: 10px outset;
    cursor:pointer;
  }
  p {
    color: red;
    margin: 0;
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
 
<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>
 
</body>
</html>
```
 #### Demo:

   To display the text of all paragraphs in an alert box the first time each of them is clicked:

 
```
$( "p" ).one( "click", function() {
  alert( $( this ).text() );
});
```
   Event handlers will trigger once per element per event type

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="count">0</div>
<div class="target">Hover/click me</div>
 
<script>
var n = 0;
$(".target").one("click mouseenter", function() {
  $(".count").html(++n);
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/one>

.outerWidth()
=============

  Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element. #### Contents:

 * [.outerWidth( [includeMargin ] )](#outerWidth1)
	+ [.outerWidth( [includeMargin ] )](#outerWidth-includeMargin)
* [.outerWidth( value [, includeMargin ] )](#outerWidth2)
	+ [.outerWidth( value [, includeMargin ] )](#outerWidth-value-includeMargin)
	+ [.outerWidth( function )](#outerWidth-function)

 
 .outerWidth( [includeMargin ] )Returns: [Number](types#Number)
---------------------------------------------------------------

  **Description:** Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.outerWidth( [includeMargin ] )](#outerWidth-includeMargin)


	+ **includeMargin** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to include the element's margin in the calculation.

  Returns the width of the element, including left and right padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns `undefined` (`null` before jQuery 3.0).

 This method is not applicable to `window` and `document` objects; for these, use `[.width()](width)` instead. Although `.outerWidth()` can be used on table elements, it may give unexpected results on tables using the `border-collapse: collapse` CSS property.

  ![] Figure 1 - Illustration of the measured width   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.outerWidth()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
* The value reported by `.outerWidth()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.outerWidth()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
 Example:
--------


 Get the outerWidth of a paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerWidth demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text(
  "outerWidth:" + p.outerWidth() +
  " , outerWidth( true ):" + p.outerWidth( true ) );
</script>
 
</body>
</html>
```
 #### Demo:

   .outerWidth( value [, includeMargin ] )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------------------

  **Description:** Set the CSS outer width of each element in the set of matched elements.

 * ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.outerWidth( value [, includeMargin ] )](#outerWidth-value-includeMargin)


	+ **value** Type: [String](types#String) or [Number](types#Number)  A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
	+ **includeMargin** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to new value should account for the element's margin.
* ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.outerWidth( function )](#outerWidth-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Number](types#Number) width ) => [String](types#String) or [Number](types#Number)  A function returning the outer width to set. Receives the index position of the element in the set and the old outer width as arguments. Within the function, `this` refers to the current element in the set.

  When calling `.outerWidth(value)`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as `100px`, `50%`, or `auto`).

  Example:
--------


 Change the outer width of each div the first time it is clicked (and change its color).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerWidth demo</title>
  <style>
  div {
    width: 60px;
    padding: 10px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modWidth = 60;
$( "div" ).one( "click", function() {
  $( this ).outerWidth( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/outerWidth>

.position()
===========

   .position()Returns: [Object](types#Object)
-------------------------------------------

  **Description:** Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.position()](#position)


	+ This method does not accept any arguments.

  The `.position()` method allows us to retrieve the current position of an element (specifically its margin box) *relative to the offset parent* (specifically its padding box, which excludes margins and borders). Contrast this with `[.offset()](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.

 Returns an object containing the properties `top` and `left`.

  **Note:** jQuery does not support getting the position coordinates of hidden elements or accounting for margins set on the `<html>` document element.

   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.position()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
 Example:
--------


 Access the position of the second paragraph:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <p>Hello</p>
</div>
<p></p>
 
<script>
var p = $( "p" ).first();
var position = p.position();
$( "p" ).last().text( "left: " + position.left + ", top: " + position.top );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/position>

.offsetParent()
===============

   .offsetParent()Returns: [jQuery](types#jQuery)
-----------------------------------------------

  **Description:** Get the closest ancestor element that is positioned.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.offsetParent()](#offsetParent)


	+ This method does not accept any arguments.

  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.

 Consider a page with a basic nested list on it, with a positioned element:

 
```
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
```
 If we begin at item A, we can find its positioned ancestor:

 
```
$( "li.item-a" ).offsetParent().css( "background-color", "red" );
```
 This will change the color of list item II, which is positioned.

  Example:
--------


 Find the offsetParent of item "A."

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offsetParent demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
 
<script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/offsetParent>

:only-child Selector
====================

  only-child selector
-------------------

  **Description:** Selects all elements that are the only child of their parent.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)jQuery( ":only-child" )

  If the parent has other child elements, nothing is matched.

  Example:
--------


 Change the text and add a border for each button that is the only child of its parent.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-child demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<script>
$( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/only-child-selector>

:only-of-type Selector
======================

  only-of-type selector
---------------------

  **Description:** Selects all elements that have no siblings with the same element name.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":only-of-type" )

  If the parent has other child elements with the same element name, nothing is matched.

  Example:
--------


 Change the text and add a border for each button that is the only child button of its parent.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-of-type demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  span {
    padding: 2px;
    margin: 3px;
    line-height: 1.4;
    border: 1px solid #000;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <span>Sibling!</span>
  <span>Sibling!</span>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<script>
  $( "button:only-of-type" ).text( "Alone" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/only-of-type-selector>

.outerHeight()
==============

  Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element. #### Contents:

 * [.outerHeight( [includeMargin ] )](#outerHeight1)
	+ [.outerHeight( [includeMargin ] )](#outerHeight-includeMargin)
* [.outerHeight( value [, includeMargin ] )](#outerHeight2)
	+ [.outerHeight( value [, includeMargin ] )](#outerHeight-value-includeMargin)
	+ [.outerHeight( function )](#outerHeight-function)

 
 .outerHeight( [includeMargin ] )Returns: [Number](types#Number)
----------------------------------------------------------------

  **Description:** Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.outerHeight( [includeMargin ] )](#outerHeight-includeMargin)


	+ **includeMargin** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to include the element's margin in the calculation.

  Returns the height of the element, including top and bottom padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns `undefined` (`null` before jQuery 3.0).

 This method is not applicable to `window` and `document` objects; for these, use `[.height()](height)` instead. Although `.outerHeight()` can be used on table elements, it may give unexpected results on tables using the `border-collapse: collapse` CSS property.

  ![] Figure 1 - Illustration of the measured height   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.outerHeight()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
* The value reported by `.outerHeight()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.outerHeight()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
 Example:
--------


 Get the outerHeight of a paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerHeight demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text(
  "outerHeight:" + p.outerHeight() +
  " , outerHeight( true ):" + p.outerHeight( true ) );
</script>
 
</body>
</html>
```
 #### Demo:

   .outerHeight( value [, includeMargin ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------------------------

  **Description:** Set the CSS outer height of each element in the set of matched elements.

 * ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.outerHeight( value [, includeMargin ] )](#outerHeight-value-includeMargin)


	+ **value** Type: [String](types#String) or [Number](types#Number)  A number representing the number of pixels, or a number along with an optional unit of measure appended (as a string).
	+ **includeMargin** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to new value should account for the element's margin.
* ####  version added: [1.8.0](https://api.jquery.com/category/version/1.8.0/)[.outerHeight( function )](#outerHeight-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Number](types#Number) height ) => [String](types#String) or [Number](types#Number)  A function returning the outer height to set. Receives the index position of the element in the set and the old outer height as arguments. Within the function, `this` refers to the current element in the set.

  When calling `.outerHeight(value)`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as `100px`, `50%`, or `auto`).

  Example:
--------


 Change the outer height of each div the first time it is clicked (and change its color).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>outerHeight demo</title>
  <style>
  div {
    width: 50px;
    padding: 10px;
    height: 60px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modHeight = 60;
$( "div" ).one( "click", function() {
  $( this ).outerHeight( modHeight ).addClass( "mod" );
  modHeight -= 8;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/outerHeight>

:parent Selector
================

  parent selector
---------------

  **Description:** Select all elements that have at least one child node (either an element or text).

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":parent" )

  This is the inverse of `:empty`. 

 One important thing to note regarding the use of `:parent` (and `:empty`) is that child nodes include text nodes.

 The W3C recommends that the `<p>` element have at least one child node, even if that child is merely text (see <https://www.w3.org/TR/html401/struct/text.html#edef-P>). Some other elements, on the other hand, are empty (i.e. have no children) by definition: `<input>`, `<img>`, `<br>`, and `<hr>`, for example.

 To obtain the parents or ancestors of an existing jQuery set, see the `[.parent()](parent)` and `[.parents()](parents)` methods.

  ### Additional Notes:

 * Because `:parent` is a jQuery extension and not part of the CSS specification, queries using `:parent` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:parent` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":parent")`](filter).
 Example:
--------


 Finds all tds with children, including text.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parent demo</title>
  <style>
  td {
    width: 40px;
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
 
<script>
$( "td:parent" ).fadeTo( 1500, 0.3 );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/parent-selector>

:password Selector
==================

  password selector
-----------------

  **Description:** Selects all elements of type password.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":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. 

  ### Additional Notes:

 * Because `:password` is a jQuery extension and not part of the CSS specification, queries using `:password` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="password"]` instead.
 Example:
--------


 Finds all password inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>password demo</title>
  <style>
  textarea {
    height: 45px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>
 
<script>
var input = $( "input:password" ).css({
  background: "yellow",
  border: "3px red solid"
});
$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );
 
// Prevent form submission
$( "form" ).submit(function() {
  return false;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/password-selector>

.prependTo()
============

   .prependTo( target )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Insert every element in the set of matched elements to the beginning of the target.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.prependTo( target )](#prependTo-target)


	+ **target** Type: [Selector](types#Selector) or [htmlString](types#htmlString) or [Element](types#Element) or [Array](types#Array) or [jQuery](types#jQuery)  A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.

  The `[.prepend()](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.

 Consider the following HTML:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 We can create content and insert it into several elements at once:

 
```
$( "<p>Test</p>" ).prependTo( ".inner" );
```
 Each inner `<div>` element gets this new content:

 
```
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>
```
 We can also select an element on the page and insert it into another:

 
```
$( "h2" ).prependTo( $( ".container" ) );
```
 If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

 
```
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 If there is more than one target element, however, cloned copies of the inserted element will be created for each target except the last.

  ### Additional Notes:

 * By design, any jQuery constructor or method that accepts an HTML string — [jQuery()](jquery), [.append()](append), [.after()](after), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, `<img onload="">`). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
* jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are `addClass` and `removeClass`.
 Example:
--------


 Prepend all spans to the element with the ID "foo" (Check .prepend() documentation for more examples)

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prependTo demo</title>
  <style>
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/prependTo>

.parentsUntil()
===============

   .parentsUntil( [selector ] [, filter ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------------------------

  **Description:** Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.parentsUntil( [selector ] [, filter ] )](#parentsUntil-selector-filter)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to indicate where to stop matching ancestor elements.
	+ **filter** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.parentsUntil( [element ] [, filter ] )](#parentsUntil-element-filter)


	+ **element** Type: [Element](types#Element) or [jQuery](types#jQuery)  A DOM node or jQuery object indicating where to stop matching ancestor elements.
	+ **filter** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a selector expression 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.

 If the selector is not matched or is not supplied, all ancestors will be selected; in these cases it selects the same elements as the `.parents()` method does when no selector is provided.

 **As of jQuery 1.6**, A DOM node or jQuery object, instead of a selector, may be used for the first **.parentsUntil()** argument.

 The method optionally accepts a selector expression for its second argument. If this argument is supplied, the elements will be filtered by testing whether they match it.

  Example:
--------


 Find the ancestors of <li class="item-a"> up to <ul class="level-1"> and give them a red background color. Also, find ancestors of <li class="item-2"> that have a class of "yes" up to <ul class="level-1"> and give them a green border.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parentsUntil demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
 
<script>
$( "li.item-a" )
  .parentsUntil( ".level-1" )
    .css( "background-color", "red" );
 
$( "li.item-2" )
  .parentsUntil( $( "ul.level-1" ), ".yes" )
    .css( "border", "3px solid green" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/parentsUntil>

.prev()
=======

   .prev( [selector ] )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.prev( [selector ] )](#prev-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a jQuery object that represents a set of DOM elements, the `.prev()` method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.

 The method optionally accepts a selector expression of the same type that can be passed to the `$()` function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 To select the element that comes immediately before item three:

 
```
$( "li.third-item" ).prev().css( "background-color", "red" );
```
 The result of this call is a red background behind item 2. Since no selector expression is supplied, this preceding element is unequivocally included as part of the object. If one had been supplied, the element would be tested for a match before it was included.

 If no previous sibling exists, or if the previous sibling element does not match a supplied selector, an empty jQuery object is returned.

 To select *all* preceding sibling elements, rather than just the preceding *adjacent* sibling, use the [.prevAll()](prevall) method.

  Examples:
---------


 Find the very previous sibling of each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prev demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px blue solid;
    padding: 2px;
  }
  span {
    font-size: 14px;
  }
  p {
    clear: left;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div><span>has child</span></div>
<div></div>
<div></div>
<div></div>
<div id="start"></div>
<div></div>
<p><button>Go to Prev</button></p>
 
<script>
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).click(function() {
  $curr = $curr.prev();
  $( "div" ).css( "background", "" );
  $curr.css( "background", "#f99" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   For each paragraph, find the very previous sibling that has a class "selected".

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prev demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
 
<script>
$( "p" ).prev( ".selected" ).css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/prev>

:radio Selector
===============

  radio selector
--------------

  **Description:** Selects all elements of type radio.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":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. 

 To select a set of associated radio buttons, you might use: `$( "input[name=gender]:radio" )`

  ### Additional Notes:

 * Because `:radio` is a jQuery extension and not part of the CSS specification, queries using `:radio` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="radio"]` instead.
 Example:
--------


 Finds all radio inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>radio demo</title>
  <style>
  textarea {
    height: 25px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio" name="asdf">
  <input type="radio" name="asdf">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>
 
<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" );
 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/radio-selector>

.ready()
========

   .ready( handler )Returns: [jQuery](types#jQuery)
-------------------------------------------------

  **Description:** Specify a function to execute when the DOM is fully loaded.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.ready( handler )](#ready-handler)


	+ **handler** Type: [Function](types#Function)() A function to execute after the DOM is ready.

  The `.ready()` method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins. When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added. As of jQuery 3.0, jQuery ensures that an exception occuring in one handler does not prevent subsequently added handlers from executing.

 Most browsers [provide similar functionality](https://caniuse.com/#search=DOMContentLoaded) in the form of a `DOMContentLoaded` event. However, jQuery's `.ready()` method differs in an important and useful way: If the DOM becomes ready and the browser fires `DOMContentLoaded` before the code calls `.ready( handler )`, the function `handler` will still be executed. In contrast, a `DOMContentLoaded` event listener added after the event fires is never executed.

 Browsers also provide the `load` event on the `window` object. When this event fires it indicates that all assets on the page have loaded, including images. This event can be watched in jQuery using `$( window ).on( "load", handler )`. In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the `load` event instead.

 Note that although the DOM always becomes ready before the page is fully loaded, it is *usually not safe* to attach a `load` event listener in code executed during a `.ready()` handler. For example, scripts can be loaded dynamically long after the page has loaded using methods such as `$.getScript()`. Although handlers added by `.ready()` will always be executed in a dynamically loaded script, the `window`'s `load` event has already occurred and those listeners will never run.

 jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

 * `$( handler )`
* `$( document ).ready( handler )`
* `$( "document" ).ready( handler )`
* `$( "img" ).ready( handler )`
* `$().ready( handler )`

 As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the `.ready()` method, which is inefficient and can lead to incorrect assumptions about the method's behavior. For example, the third syntax works with `"document"` which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready. 

 There is also `$(document).on( "ready", handler )`, *deprecated as of jQuery 1.8 and removed in jQuery 3.0*. Note that if the DOM becomes ready before this event is attached, the handler *will not be executed*.

 The `.ready()` method is typically used with an anonymous function:

 
```
$( document ).ready(function() {
  // Handler for .ready() called.
});
```
 Which is equivalent to the recommended way of calling:

 
```
$(function() {
  // Handler for .ready() called.
});
```
 #### Aliasing the jQuery Object

 When `[$.noConflict()](jquery.noconflict)` is used to avoid namespace conflicts, the `$` shortcut is no longer available. However, the `.ready()` handler is passed a reference to the `jQuery` object that called the method. This allows the handler to use a jQuery object, for example as `$`, without knowing its aliased name:

 
```
jq2 = jQuery.noConflict();
jq2(function( $ ) {
  // Code using $ as usual goes here; the actual jQuery object is jq2
});
```
  Example:
--------


 Display a message when the DOM is loaded.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ready demo</title>
  <style>
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script>
 
  $(function() {
    $( "p" ).text( "The DOM is now loaded and can be manipulated." );
  });
 
  </script>
 
</head>
<body>
 
<p>Not loaded yet.</p>
 
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/ready>

.prevUntil()
============

   .prevUntil( [selector ] [, filter ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------------

  **Description:** Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.prevUntil( [selector ] [, filter ] )](#prevUntil-selector-filter)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to indicate where to stop matching preceding sibling elements.
	+ **filter** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.prevUntil( [element ] [, filter ] )](#prevUntil-element-filter)


	+ **element** Type: [Element](types#Element) or [jQuery](types#jQuery)  A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
	+ **filter** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a selector expression that represents a set of DOM elements, the `.prevUntil()` method searches 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; the elements are returned in order from the closest sibling to the farthest.

 If the selector is not matched or is not supplied, all previous siblings will be selected; in these cases it selects the same elements as the `[.prevAll()](prevall)` method does when no filter selector is provided.

 **As of jQuery 1.6**, A DOM node or jQuery object, instead of a selector, may be used for the first **.prevUntil()** argument.

 The method optionally accepts a selector expression for its second argument. If this argument is supplied, the elements will be filtered by testing whether they match it.

  Example:
--------


 Find the siblings that precede <dt id="term-2"> up to the preceding <dt> and give them a red background color. Also, find previous <dd> siblings of <dt id="term-3"> up to <dt id="term-1"> and give them a green text color.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevUntil demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
 
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
 
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>
 
<script>
$( "#term-2" ).prevUntil( "dt" )
  .css( "background-color", "red" );
 
var term1 = document.getElementById( "term-1" );
$( "#term-3" ).prevUntil( term1, "dd" )
  .css( "color", "green" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/prevUntil>

.promise()
==========

   .promise( [type ] [, target ] )Returns: [Promise](types#Promise)
-----------------------------------------------------------------

  **Description:**  Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished. 

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.promise( [type ] [, target ] )](#promise-type-target)


	+ **type** (default: `fx`) Type: [String](types#String)   The type of queue that needs to be observed.
	+ **target** Type: [PlainObject](types#PlainObject)  Object onto which the promise methods have to be attached

  The `.promise()` method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.

  By default, `type` is `"fx"`, which means the returned Promise is resolved when all animations of the selected elements have completed.

  Resolve context and sole argument is the collection onto which `.promise()` has been called. 

  If `target` is provided, `.promise()` will attach the methods onto it and then return this object rather than create a new one. This can be useful to attach the Promise behavior to an object that already exists.

  **Note:** The returned Promise is linked to a Deferred object stored on the `.data()` for an element. Since the`.remove()` method removes the element's data as well as the element itself, it will prevent any of the element's unresolved Promises from resolving. If it is necessary to remove an element from the DOM before its Promise is resolved, use `.detach()` instead and follow with `.removeData()` after resolution.

   Examples:
---------


 Using `.promise()` on a collection with no active animation returns a resolved Promise:

 
```
var div = $( "<div>" );
 
div.promise().done(function( arg1 ) {
  // Will fire right away and alert "true"
  alert( this === div && arg1 === div );
});
```
   Resolve the returned Promise when all animations have ended (including those initiated in the animation callback or added later on):

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise demo</title>
  <style>
  div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).append( "Started..." );
 
  $( "div" ).each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
  });
 
  $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   Resolve the returned Promise using a `$.when()` statement (the `.promise()` method makes it possible to do this with jQuery collections):

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise demo</title>
  <style>
  div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
var effect = function() {
  return $( "div" ).fadeIn( 800 ).delay( 1200 ).fadeOut();
};
 
$( "button" ).on( "click", function() {
  $( "p" ).append( " Started... " );
 
  $.when( effect() ).done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/promise>

.prevAll()
==========

   .prevAll( [selector ] )Returns: [jQuery](types#jQuery)
-------------------------------------------------------

  **Description:** Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.prevAll( [selector ] )](#prevAll-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  Given a jQuery object that represents a set of DOM elements, the `.prevAll()` method searches through the predecessors of these elements in the DOM tree and construct a new jQuery object from the matching elements; the elements are returned in order beginning with the closest sibling.

 The method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 If we begin at the third item, we can find the elements which come before it:

 
```
$( "li.third-item" ).prevAll().css( "background-color", "red" );
```
 The result of this call is a red background behind items 1 and 2. Since we do not supply a selector expression, these preceding elements are unequivocally included as part of the object. If we had supplied one, the elements would be tested for a match before they were included.

  Example:
--------


 Locate all the divs preceding the last div and give them a class.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevAll demo</title>
  <style>
  div {
    width: 70px;
    height: 70px;
    background: #abc;
    border: 2px solid black;
    margin: 10px;
    float: left;
  }
  div.before {
    border-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).last().prevAll().addClass( "before" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/prevAll>

.prop()
=======

  Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. #### Contents:

 * [.prop( propertyName )](#prop1)
	+ [.prop( propertyName )](#prop-propertyName)
* [.prop( propertyName, value )](#prop2)
	+ [.prop( propertyName, value )](#prop-propertyName-value)
	+ [.prop( properties )](#prop-properties)
	+ [.prop( propertyName, function )](#prop-propertyName-function)

 
 .prop( propertyName )Returns: [Anything](types#Anything)
---------------------------------------------------------

  **Description:** Get the value of a property for the first element in the set of matched elements.

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.prop( propertyName )](#prop-propertyName)


	+ **propertyName** Type: [String](types#String)  The name of the property to get.

  The `.prop()` method gets the property value for only the *first* element in the matched set. It returns `undefined` for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's `.each()` or `.map()` method.

  **Note:** Attempting to change the `type` property (or attribute) of an `input` element created via HTML or already in an HTML document will result in an error being thrown by Internet Explorer 6, 7, or 8.

  #### Attributes vs. Properties

 The difference between *attributes* and *properties* can be important in specific situations. **Before jQuery 1.6**, the `[.attr()](attr)` method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. **As of jQuery 1.6**, the `.prop()` method provides a way to explicitly retrieve property values, while `.attr()` retrieves attributes.

 For example, `selectedIndex`, `tagName`, `nodeName`, `nodeType`, `ownerDocument`, `defaultChecked`, and `defaultSelected` should be retrieved and set with the `.prop()` method. Prior to jQuery 1.6, these properties were retrievable with the `.attr()` method, but this was not within the scope of `attr`. These do not have corresponding attributes and are only properties.

 Concerning boolean attributes, consider a DOM element defined by the HTML markup `<input type="checkbox" checked="checked" />`, and assume it is in a JavaScript variable named `elem`:

 

|  |  |
| --- | --- |
| `elem.checked` | `true` (Boolean) Will change with checkbox state |
| `$( elem ).prop( "checked" )` | `true` (Boolean) Will change with checkbox state |
| `elem.getAttribute( "checked" )` | `"checked"` (String) Initial state of the checkbox; does not change |
| `$( elem ).attr( "checked" )` *(1.6)* | `"checked"` (String) Initial state of the checkbox; does not change |
| `$( elem ).attr( "checked" )` *(1.6.1+)* | `"checked"` (String) Will change with checkbox state |
| `$( elem ).attr( "checked" )` *(pre-1.6)* | `true` (Boolean) Changed with checkbox state |

   
 According to the [W3C forms specification](https://www.w3.org/TR/html401/interact/forms.html#h-17.4), the `checked` attribute is a *[boolean attribute](https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2)*, which means the corresponding property is **true** if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.

 Nevertheless, the most important concept to remember about the `checked` attribute is that it does not correspond to the `checked` property. The attribute actually corresponds to the `defaultChecked` property and should be used only to set the *initial* value of the checkbox. The `checked` attribute value does not change with the state of the checkbox, while the `checked` property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

 * `if ( elem.checked )`
* `if ( $( elem ).prop( "checked" ) )`
* `if ( $( elem ).is( ":checked" ) )`

 The same is true for other dynamic attributes, such as `selected` and `value`.

  ### Additional Notes:

 * In Internet Explorer prior to version 9, using `[.prop()](prop)` to set a DOM element property to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks if the property is not removed (using [`.removeProp()`](removeprop)) before the DOM element is removed from the document. To safely set values on DOM objects without memory leaks, use [`.data()`](data).
 Example:
--------


 Display the checked property and attribute of a checkbox as it changes.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>
```
 #### Demo:

   .prop( propertyName, value )Returns: [jQuery](types#jQuery)
------------------------------------------------------------

  **Description:** Set one or more properties for the set of matched elements.

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.prop( propertyName, value )](#prop-propertyName-value)


	+ **propertyName** Type: [String](types#String)  The name of the property to set.
	+ **value** Type: [Anything](types#Anything)  A value to set for the property.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.prop( properties )](#prop-properties)


	+ **properties** Type: [PlainObject](types#PlainObject)  An object of property-value pairs to set.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.prop( propertyName, function )](#prop-propertyName-function)


	+ **propertyName** Type: [String](types#String)  The name of the property to set.
	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Anything](types#Anything) oldPropertyValue ) => [Anything](types#Anything)  A function returning the value to set. Receives the index position of the element in the set and the old property value as arguments. Within the function, the keyword `this` refers to the current element.

  The `.prop()` method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting `selectedIndex`, `tagName`, `nodeName`, `nodeType`, `ownerDocument`, `defaultChecked`, or `defaultSelected`. Since jQuery 1.6, these properties can no longer be set with the `.attr()` method. They do not have corresponding attributes and are only properties.

 Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the `value` property of input elements, the `disabled` property of inputs and buttons, or the `checked` property of a checkbox. The `.prop()` method should be used to set disabled and checked instead of the `[.attr()](attr)` method. The `[.val()](val)` method should be used for getting and setting value.

 
```
$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );
$( "input" ).val( "someValue" );
```
 **Important:** the `[.removeProp()](removeprop)` method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See `[.removeProp()](removeprop)` for more information.

 #### Computed property values

 By using a function to set properties, you can compute the value based on other properties of the element. For example, to toggle all checkboxes based off their individual values:

 
```
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});
```
 **Note:** If nothing is returned in the setter function (ie. `function( index, prop ){})`, or if `undefined` is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

  ### Additional Notes:

 * In Internet Explorer prior to version 9, using `[.prop()](prop)` to set a DOM element property to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks if the property is not removed (using [`.removeProp()`](removeprop)) before the DOM element is removed from the document. To safely set values on DOM objects without memory leaks, use [`.data()`](data).
 Example:
--------


 Disable all checkboxes on the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <input type="checkbox" checked="checked">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox" checked="checked">
 
<script>
$( "input[type='checkbox']" ).prop({
  disabled: true
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/prop>

.pushStack()
============

   .pushStack( elements )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Add a collection of DOM elements onto the jQuery stack.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.pushStack( elements )](#pushStack-elements)


	+ **elements** Type: [Array](types#Array)  An array of elements to push onto the stack and make into a new jQuery object.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.pushStack( elements, name, arguments )](#pushStack-elements-name-arguments)


	+ **elements** Type: [Array](types#Array)  An array of elements to push onto the stack and make into a new jQuery object.
	+ **name** Type: [String](types#String)  The name of a jQuery method that generated the array of elements.
	+ **arguments** Type: [Array](types#Array)  The arguments that were passed in to the jQuery method (for serialization).

 Example:
--------


 Add some elements onto the jQuery stack, then pop back off again.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/pushStack>

.queue()
========

  Show or manipulate the queue of functions to be executed on the matched elements. #### Contents:

 * [.queue( [queueName ] )](#queue1)
	+ [.queue( [queueName ] )](#queue-queueName)
* [.queue( [queueName ], newQueue )](#queue2)
	+ [.queue( [queueName ], newQueue )](#queue-queueName-newQueue)
	+ [.queue( [queueName ], callback )](#queue-queueName-callback)

 
 .queue( [queueName ] )Returns: [Array](types#Array)
----------------------------------------------------

  **Description:** Show the queue of functions to be executed on the matched elements.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.queue( [queueName ] )](#queue-queueName)


	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.

 Example:
--------


 Show the length of the queue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 60px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  p {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>The queue length is: <span></span></p>
<div></div>
 
<script>
var div = $( "div" );
 
function runIt() {
  div
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( "fast" )
    .animate({ left: "-=200" }, 1500 )
    .hide( "slow" )
    .show( 1200 )
    .slideUp( "normal", runIt );
}
 
function showIt() {
  var n = div.queue( "fx" );
  $( "span" ).text( n.length );
  setTimeout( showIt, 100 );
}
 
runIt();
showIt();
</script>
 
</body>
</html>
```
 #### Demo:

   .queue( [queueName ], newQueue )Returns: [jQuery](types#jQuery)
----------------------------------------------------------------

  **Description:** Manipulate the queue of functions to be executed, once for each matched element.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.queue( [queueName ], newQueue )](#queue-queueName-newQueue)


	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.
	+ **newQueue** Type: [Array](types#Array)  An array of functions to replace the current queue contents.
* ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.queue( [queueName ], callback )](#queue-queueName-callback)


	+ **queueName** Type: [String](types#String)  A string containing the name of the queue. Defaults to `fx`, the standard effects queue.
	+ **callback** Type: [Function](types#Function)( [Function](types#Function) next() ) The new function to add to the queue, with a function to call that will dequeue the next item.

  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:

 
```
$( "#foo" ).slideUp().fadeIn();
```
 When this statement is executed, the element begins its sliding animation immediately, but the fading transition is placed on the `fx` queue to be called only once the sliding transition is complete.

 The `.queue()` method allows us to directly manipulate this queue of functions. Calling `.queue()` with a callback is particularly useful; it allows us to place a new function at the end of the queue. The callback function is executed once for each element in the jQuery set.

 This feature is similar to providing a callback function with an animation method, but does not require the callback to be given at the time the animation is performed.

 
```
$( "#foo" ).slideUp();
$( "#foo" ).queue(function() {
  alert( "Animation complete." );
  $( this ).dequeue();
});
```
 This is equivalent to:

 
```
$( "#foo" ).slideUp(function() {
  alert( "Animation complete." );
});
```
 Note that when adding a function with `.queue()`, we should ensure that `.dequeue()` is eventually called so that the next function in line executes.

 **As of jQuery 1.4**, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving. We use it as follows:

 
```
$( "#test" ).queue(function( next ) {
    // Do some stuff...
    next();
});
```
  Examples:
---------


 Queue a custom function.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Click here...
<div></div>
 
<script>
$( document.body ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 2000 )
    .queue(function() {
      $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: "-=200" }, 500 )
    .queue(function() {
      $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Set a queue array to delete the queue.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>queue demo</title>
  <style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
 
<script>
$( "#start" ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 )
    .queue(function() {
      $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: '-=200' }, 1500 )
    .queue(function() {
      $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();
});
$( "#stop" ).click(function() {
  $( "div" )
    .queue( "fx", [] )
    .stop();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/queue>

.remove()
=========

   .remove( [selector ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Remove the set of matched elements from the DOM.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.remove( [selector ] )](#remove-selector)


	+ **selector** Type: [String](types#String)  A selector expression that filters the set of matched elements to be removed.

  Similar to `[.empty()](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()](detach)` instead.

 Consider the following HTML:

 
```
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
```
 We can target any element for removal:

 
```
$( ".hello" ).remove();
```
 This will result in a DOM structure with the `<div>` element deleted:

 
```
<div class="container">
  <div class="goodbye">Goodbye</div>
</div>
```
 If we had any number of nested elements inside `<div class="hello">`, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.

 We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:

 
```
$( "div" ).remove( ".hello" );
```
 This would result in the same DOM structure:

 
```
<div class="container">
  <div class="goodbye">Goodbye</div>
</div>
```
  Examples:
---------


 Removes all paragraphs from the DOM

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
 
<script>
$( "button" ).click(function() {
  $( "p" ).remove();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing `$("p").filter(":contains('Hello')").remove()`.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove( ":contains('Hello')" ) on paragraphs</button>
 
<script>
$( "button" ).click(function() {
  $( "p" ).remove( ":contains('Hello')" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/remove>

.removeClass()
==============

   .removeClass( [className ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------------

  **Description:** Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.removeClass( [className ] )](#removeClass-className)


	+ **className** Type: [String](types#String)  One or more space-separated classes to be removed from the class attribute of each matched element.
* ####  version added: [3.3](https://api.jquery.com/category/version/3.3/)[.removeClass( classNames )](#removeClass-classNames)


	+ **classNames** Type: [Array](types#Array)  An array of classes to be removed from the class attribute of each matched element.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.removeClass( function )](#removeClass-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) className ) => [String](types#String)  A function returning one or more space-separated classes or an array of classes to be removed. Receives the index position of the element in the set and the old class value as arguments.

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

 Before jQuery version 1.12/2.2, the `.removeClass()` method manipulated the `className` *property* of the selected elements, not the `class` *attribute*. Once the property was changed, it was the browser that updated the attribute accordingly. This means that when the `class` attribute was updated and the last class name was removed, the browser might have set the attribute's value to an empty string instead of removing the attribute completely. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).

 As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the `class` *attribute* is used instead. So, `.removeClass()` can be used on XML or SVG documents.

 More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:

 
```
$( "p" ).removeClass( "myClass yourClass" )
```
 This method is often used with `.addClass()` to switch elements' classes from one to another, like so:

 
```
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
```
 Here, the `myClass` and `noClass` classes are removed from all paragraphs, while `yourClass` is added.

 To replace all existing classes with another class, we can use `.attr( "class", "newClass" )` instead.

 As of jQuery 1.4, the `.removeClass()` method allows us to indicate the class to be removed by passing in a function.

 
```
$( "li" ).last().removeClass(function() {
  return $( this ).prev().attr( "class" );
});
```
 This example removes the class name of the penultimate `<li>` from the last `<li>`.

  Examples:
---------


 Remove the class 'blue' from the matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p" ).even().removeClass( "blue" );
</script>
 
</body>
</html>
```
 #### Demo:

   Remove the class 'blue' and 'under' from the matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p" ).odd().removeClass( "blue under" );
</script>
 
</body>
</html>
```
 #### Demo:

   Remove the class 'blue' and 'under' from the matched elements (3.3+ syntax).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p" ).odd().removeClass( [ "blue", "under" ] );
</script>
 
</body>
</html>
```
 #### Demo:

   Remove all the classes from the matched elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
 
<script>
$( "p" ).eq( 1 ).removeClass();
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/removeClass>

.removeAttr()
=============

   .removeAttr( attributeName )Returns: [jQuery](types#jQuery)
------------------------------------------------------------

  **Description:** Remove an attribute from each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.removeAttr( attributeName )](#removeAttr-attributeName)


	+ **attributeName** Type: [String](types#String)  An attribute to remove; as of version 1.7, it can be a space-separated list of attributes.

  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.

 **Note:** Removing an inline `onclick` event handler using `.removeAttr()` doesn't achieve the desired effect in Internet Explorer 8, 9 and 11. To avoid potential problems, use `.prop()` instead:

 
```
$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );
```
  Example:
--------


 Clicking the button changes the title of the input next to it. Move the mouse pointer over the text input to see the effect of adding and removing the title attribute.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeAttr demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Change title</button>
<input type="text" title="hello there">
<div id="log"></div>
 
<script>
(function() {
  var inputTitle = $( "input" ).attr( "title" );
  $( "button" ).click(function() {
    var input = $( this ).next();
 
    if ( input.attr( "title" ) === inputTitle ) {
      input.removeAttr( "title" )
    } else {
      input.attr( "title", inputTitle );
    }
 
    $( "#log" ).html( "input title is now " + input.attr( "title" ) );
  });
})();
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/removeAttr>

.resize()
=========

   .resize( handler )Returns: [jQuery](types#jQuery)
--------------------------------------------------

  **Description:** Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.resize( handler )](#resize-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.resize( [eventData ], handler )](#resize-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.resize()](#resize)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on('resize', handler)` in the first and second variations, and `.trigger( "resize" )` in the third.

 The `resize` event is sent to the `window` element when the size of the browser window changes:

 
```
$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});
```
 Now whenever the browser window's size is changed, the message is appended to <div id="log"> one or more times, depending on the browser.

 Code in a `resize` handler should never rely on the number of times the handler is called. Depending on implementation, `resize` events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

  ### Additional Notes:

 * As the `.resize()` method is just a shorthand for `.on( "resize", handler )`, detaching is possible using `.off( "resize" )`.
 Example:
--------


 To see the window width while (or after) it is resized, try:

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/resize>

.select()
=========

   .select( handler )Returns: [jQuery](types#jQuery)
--------------------------------------------------

  **Description:** Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.select( handler )](#select-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.select( [eventData ], handler )](#select-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.select()](#select)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "select", handler )` in the first two variations, and `.trigger( "select" )` in the third.

 The `select` event is sent to an element when the user makes a text selection inside it. This event is limited to `<input type="text">` fields and `<textarea>` boxes.

 For example, consider the HTML:

 
```
<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the text input:

 
```
$( "#target" ).select(function() {
  alert( "Handler for .select() called." );
});
```
 Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, apply `.select()` without an argument:

 
```
$( "#other").click(function() {
  $( "#target" ).select();
});
```
 After this code executes, clicks on the Trigger button will also alert the message:

  `Handler for .select() called.` 

 In addition, the default `select` action on the field will be fired, so the entire text field will be selected.

  The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.

   ### Additional Notes:

 * As the `.select()` method is just a shorthand for `.on( "select", handler )`, detaching is possible using `.off( "select" )`.
 Examples:
---------


 To do something when text in input boxes is selected:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>select demo</title>
  <style>
  p {
    color: blue;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p>Click and drag the mouse to select text in the inputs.</p>
  <input type="text" value="Some text">
  <input type="text" value="to test on">
  <div></div>
 
<script>
$( ":input" ).select(function() {
  $( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   To trigger the select event on all input elements, try:

 
```
$( "input" ).select();
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/select>

:root Selector
==============

  root selector
-------------

  **Description:** Selects the element that is the root of the document.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":root" )

  In HTML, the root of the document, and thus the element that `$(":root")` selects, is always the `<html>` element.

  Example:
--------


 Display the tag name of the root element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>root demo</title>
  <style>
  span.fot {
    color: red;
    font-size: 120%;
    font-style: italic;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log">The root of this document is: </div>
 
<script>
$( "<b></b>" ).html( $( ":root" )[ 0 ].nodeName ).appendTo( "#log" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/root-selector>

.scrollLeft()
=============

  Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element. #### Contents:

 * [.scrollLeft()](#scrollLeft1)
	+ [.scrollLeft()](#scrollLeft)
* [.scrollLeft( value )](#scrollLeft2)
	+ [.scrollLeft( value )](#scrollLeft-value)

 
 .scrollLeft()Returns: [Integer](types#Integer)
-----------------------------------------------

  **Description:** Get the current horizontal position of the scroll bar for the first element in the set of matched elements.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.scrollLeft()](#scrollLeft)


	+ This method does not accept any arguments.

  The horizontal scroll position is the same as the number of pixels that are hidden from view to the left of the scrollable area. If the scroll bar is at the very left, or if the element is not scrollable, this number will be `0`.

  **Note:**`.scrollLeft()`, when called directly or animated as a property using `.animate()`, will not work if the element it is being applied to is hidden.

   Example:
--------


 Get the scrollLeft of a paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollLeft demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text( "scrollLeft:" + p.scrollLeft() );
</script>
 
</body>
</html>
```
 #### Demo:

   .scrollLeft( value )Returns: [jQuery](types#jQuery)
----------------------------------------------------

  **Description:** Set the current horizontal position of the scroll bar for each of the set of matched elements.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.scrollLeft( value )](#scrollLeft-value)


	+ **value** Type: [Number](types#Number)  An integer indicating the new position to set the scroll bar to.

  The horizontal scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the `scrollLeft` positions the horizontal scroll of each matched element.

  Example:
--------


 Set the scrollLeft of a div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollLeft demo</title>
  <style>
  div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
 
<script>
$( "div.demo" ).scrollLeft( 300 );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/scrollLeft>

.scrollTop()
============

   #### Contents:

 * [.scrollTop()](#scrollTop1)
	+ [.scrollTop()](#scrollTop)
* [.scrollTop( value )](#scrollTop2)
	+ [.scrollTop( value )](#scrollTop-value)

 
 .scrollTop()Returns: [Number](types#Number)
--------------------------------------------

  **Description:** Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.scrollTop()](#scrollTop)


	+ This method does not accept any arguments.

  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`.

  Example:
--------


 Get the scrollTop of a paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p></p>
 
<script>
var p = $( "p" ).first();
$( "p" ).last().text( "scrollTop:" + p.scrollTop() );
</script>
 
</body>
</html>
```
 #### Demo:

   .scrollTop( value )Returns: [jQuery](types#jQuery)
---------------------------------------------------

  **Description:** Set the current vertical position of the scroll bar for each of the set of matched elements.

 * ####  version added: [1.2.6](https://api.jquery.com/category/version/1.2.6/)[.scrollTop( value )](#scrollTop-value)


	+ **value** Type: [Number](types#Number)  A number indicating the new position to set the scroll bar to.

  The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the `scrollTop` positions the vertical scroll of each matched element.

  Example:
--------


 Set the scrollTop of a div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</title>
  <style>
  div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
 
<script>
$( "div.demo" ).scrollTop( 300 );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/scrollTop>

:selected Selector
==================

  selected selector
-----------------

  **Description:** Selects all elements that are selected.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":selected" )

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

  ### Additional Notes:

 * Because `:selected` is a jQuery extension and not part of the CSS specification, queries using `:selected` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:selected` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":selected")`](filter).
 Example:
--------


 Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selected demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/selected-selector>

.replaceWith()
==============

   .replaceWith( newContent )Returns: [jQuery](types#jQuery)
----------------------------------------------------------

  **Description:** Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.replaceWith( newContent )](#replaceWith-newContent)


	+ **newContent** Type: [htmlString](types#htmlString) or [Element](types#Element) or [Array](types#Array) or [jQuery](types#jQuery)  The content to insert. May be an HTML string, DOM element, array of DOM elements, or jQuery object.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.replaceWith( function )](#replaceWith-function)


	+ **function** Type: [Function](types#Function)() A function that returns content with which to replace the set of matched elements.

  The `.replaceWith()` method removes content from the DOM and inserts new content in its place with a single call. Consider this DOM structure:

 
```
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
```
 The second inner `<div>` could be replaced with the specified HTML:

 
```
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
```
 This results in the structure:

 
```
<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>
```
 *All* inner `<div>` elements could be targeted at once:

 
```
$( "div.inner" ).replaceWith( "<h2>New heading</h2>" );
```
 This causes all of them to be replaced:

 
```
<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>
```
 An element could also be selected as the replacement:

 
```
$( "div.third" ).replaceWith( $( ".first" ) );
```
 This results in the DOM structure:

 
```
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>
```
 This example demonstrates that the selected element replaces the target by being moved from its old location, not by being cloned.

 The `.replaceWith()` method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the *original* jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.

  ### Additional Notes:

 * The `.replaceWith()` method removes all data and event handlers associated with the removed nodes.
* Prior to jQuery 1.9, `.replaceWith()` would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, `.after()`, `.before()`, and `.replaceWith()` always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.
 Examples:
---------


 On click, replace the button with a div containing the same word.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  button {
    display: block;
    margin: 3px;
    color: red;
    width: 200px;
  }
  div {
    color: red;
    border: 2px solid blue;
    width: 200px;
    margin: 3px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>First</button>
<button>Second</button>
<button>Third</button>
 
<script>
$( "button" ).click(function() {
  $( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Replace all paragraphs with bold words.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).replaceWith( "<b>Paragraph. </b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   On click, replace each paragraph with a div that is already in the DOM and selected with the `$()` function. Notice it doesn't clone the object but rather moves it to replace the paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  div {
    border: 2px solid blue;
    color: red;
    margin: 3px;
  }
  p {
    border: 2px solid red;
    color: blue;
    margin: 3px;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div>Replaced!</div>
 
<script>
$( "p" ).click(function() {
  $( this ).replaceWith( $( "div" ) );
});
</script>
 
</body>
</html>
```
 #### Demo:

   On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceWith demo</title>
  <style>
  .container {
    background-color: #991;
  }
  .inner {
    color: #911;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>
  <button>Replace!</button>
</p>
<div class="container">
  <div class="inner">Scooby</div>
  <div class="inner">Dooby</div>
  <div class="inner">Doo</div>
</div>
 
<script>
$( "button" ).on( "click", function() {
  var $container = $( "div.container" ).replaceWith(function() {
    return $( this ).contents();
  });
 
  $( "p" ).append( $container.attr( "class" ) );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/replaceWith>

.removeProp()
=============

   .removeProp( propertyName )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------

  **Description:** Remove a property for the set of matched elements.

 * ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.removeProp( propertyName )](#removeProp-propertyName)


	+ **propertyName** Type: [String](types#String)  The name of the property to remove.

  The `.removeProp()` method removes properties set by the `[.prop()](prop)` method.

 With some built-in properties of a DOM element or `window` object, browsers may generate an error if an attempt is made to remove the property. jQuery first assigns the value `undefined` to the property and ignores any error the browser generates. In general, it is only necessary to remove custom properties that have been set on an object, and not built-in (native) properties.

 **Note:** Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use `[.prop()](prop)` to set these properties to `false` instead.

  ### Additional Notes:

 * In Internet Explorer prior to version 9, using `[.prop()](prop)` to set a DOM element property to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks if the property is not removed (using [`.removeProp()`](removeprop)) before the DOM element is removed from the document. To safely set values on DOM objects without memory leaks, use [`.data()`](data).
 Example:
--------


 Set a numeric property on a paragraph and then remove it. 

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeProp demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
  <p></p>
 
<script>
para = $( "p" );
para
  .prop( "luggageCode", 1234 )
  .append( "The secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " )
  .removeProp( "luggageCode" )
  .append( "Now the secret luggage code is: ", String( para.prop( "luggageCode" ) ), ". " );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/removeProp>

.replaceAll()
=============

   .replaceAll( target )Returns: [jQuery](types#jQuery)
-----------------------------------------------------

  **Description:** Replace each target element with the set of matched elements.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.replaceAll( target )](#replaceAll-target)


	+ **target** Type: [Selector](types#Selector) or [jQuery](types#jQuery) or [Array](types#Array) or [Element](types#Element)  A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.

  The `.replaceAll()` method is similar to `[.replaceWith()](replacewith)`, but with the source and target reversed. Consider this DOM structure:

 
```
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
```
 We can create an element, then replace other elements with it:

 
```
$( "<h2>New heading</h2>" ).replaceAll( ".inner" );
```
 This causes all of them to be replaced:

 
```
<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>
```
 Or, we could select an element to use as the replacement:

 
```
$( ".first" ).replaceAll( ".third" );
```
 This results in the DOM structure:

 
```
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>
```
 From this example, we can see that the selected element replaces the target by being moved from its old location, not by being cloned.

  ### Additional Notes:

 * The `.replaceAll()` method removes all data and event handlers associated with the removed nodes.
 Example:
--------


 Replace all the paragraphs with bold words.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>replaceAll demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "<b>Paragraph. </b>" ).replaceAll( "p" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/replaceAll>

:reset Selector
===============

  reset selector
--------------

  **Description:** Selects all elements of type reset.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":reset" )

  `:reset` is equivalent to `[type="reset"]`

  ### Additional Notes:

 * Because `:reset` is a jQuery extension and not part of the CSS specification, queries using `:reset` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="reset"]` instead.
 Example:
--------


 Finds all reset inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reset demo</title>
  <style>
  textarea {
    height: 45px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>
 
<script>
var input = $( "input:reset" ).css({
  background: "yellow",
  border: "3px red solid"
});
$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );
 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/reset-selector>

Category: DOM Replacement
=========================

 
These methods are used to remove content from the DOM and replace it with new content.

    [.replaceAll()](../../replaceall "Permalink to .replaceAll()")
===============================================================

  Replace each target element with the set of matched elements.

     [.replaceWith()](../../replacewith "Permalink to .replaceWith()")
==================================================================

  Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/dom-replacement>

.size()
=======

   .size()Returns: [Integer](types#Integer)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Return the number of elements in the jQuery object.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.size()](#size)


	+ This method does not accept any arguments.

   Note: This method has been removed in jQuery 3.0. Use the `[.length](length)` property instead.

  The `.size()` method is functionally equivalent to the `[.length](length)` property; however, **the `.length` property is preferred** because it does not have the overhead of a function call.

 Given a simple unordered list on the page:

 
```
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
```
 Both `.size()` and `.length` identify the number of items:

 
```
alert( "Size: " + $( "li" ).size() );
alert( "Size: " + $( "li" ).length );
```
 This results in two alerts:

  `Size: 2` 

  `Size: 2` 

  Example:
--------


 Count the divs.

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/size>

.selector
=========

   selectorReturns: [String](types#String)version deprecated: [1.7](https://api.jquery.com/category/version/1.7/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** A selector representing selector passed to jQuery(), if any, when creating the original set.

 * ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)selector

   Note: This API has been removed in jQuery 3.0. The property was never a reliable indicator of the selector that could be used to obtain the set of elements currently contained in the jQuery set where it was a property, since subsequent traversal methods may have changed the set. Plugins that need to use a selector string within their plugin can require it as a parameter of the method. For example, a "foo" plugin could be written as `$.fn.foo = function( selector, options ) { /* plugin code goes here */ };`, and the person using the plugin would write `$( "div.bar" ).foo( "div.bar", {dog: "bark"} );` with the `"div.bar"` selector repeated as the first argument of `.foo()`.

    

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/selector>

.removeData()
=============

   .removeData( [name ] )Returns: [jQuery](types#jQuery)
------------------------------------------------------

  **Description:** Remove a previously-stored piece of data.

 * ####  version added: [1.2.3](https://api.jquery.com/category/version/1.2.3/)[.removeData( [name ] )](#removeData-name)


	+ **name** Type: [String](types#String)  A string naming the piece of data to delete.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.removeData( [list ] )](#removeData-list)


	+ **list** Type: [Array](types#Array) or [String](types#String)  An array or space-separated string naming the pieces of data to delete.

  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, `.removeData()` removes all values.

  Note that `.removeData()` will only remove data from jQuery's internal `.data()` cache, and any corresponding `data-` attributes on the element will not be removed. A later call to `data()` will therefore re-retrieve the value from the `data-` attribute. To prevent this, use `.removeAttr()` alongside `.removeData()` to remove the `data-` attribute as well. Prior to jQuery 1.4.3, as `data()` did not use `data-` attributes, this was not an issue. 

 **As of jQuery 1.7**, when called with an array of keys or a string of space-separated keys, `.removeData()` deletes the value of each key in that array or string.

  Example:
--------


 Set a data store for 2 names then remove one of them.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeData demo</title>
  <style>
  div {
    margin: 2px;
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/removeData>

.show()
=======

   .show()Returns: [jQuery](types#jQuery)
---------------------------------------

  **Description:** Display the matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.show()](#show)


	+ This signature does not accept any arguments.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.show( [duration ] [, complete ] )](#show-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.show( options )](#show-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.show( duration [, easing ] [, complete ] )](#show-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

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

 
```
$( ".target" ).show();
```
 The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling `.css( "display", "block" )`, except that the `display` property is restored to whatever it was initially. If an element has a `display` value of `inline`, then is hidden and shown, it will once again be displayed `inline`.

 **Note:**  If using !important in your styles, such as `display: none !important`, `.show()` will not override `!important`. It is recommended to use different classes with `.addClass()`, `.removeClass()` or `.toggleClass()`. Another approach is using `.attr( "style", "display: block !important;" )`; be careful, though, as it overwrites the style attribute of the element.

 When a duration, a plain object, or a "complete" function is provided, `.show()` becomes an animation method. The `.show()` method animates the width, height, and opacity of the matched elements simultaneously.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively.

 As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

  **Note:** This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine whether this method is causing them. Moreover, this method can cause problems with responsive layouts if the display value differs at different viewport sizes.

  We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).show( "slow", function() {
    // Animation complete.
  });
});
```
  ![]` effect   ### Additional Notes:

 * All jQuery effects, including `.show()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Show it</button>
<p style="display: none">Hello  2</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).show( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Show the first div, followed by each next adjacent sibling div in order, with a 200ms animation. Each animation starts when the previous sibling div's animation ends.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  div {
    background: #def3ca;
    margin: 3px;
    width: 80px;
    display: none;
    float: left;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
 
<script>
$( "#showr" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});
 
$( "#hidr" ).click(function() {
  $( "div" ).hide( 1000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Show all span and input elements with an animation. Change the text once the animation is done.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  span {
    display: none;
  }
  div {
    display: none;
  }
  p {
    font-weight: bold;
    background-color: #fcd;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
  <form>
    <input type="text"  value="as;ldkfjalsdf">
  </form>
</div>
<p style="display:none;">I'm hidden...</p>
 
<script>
function doIt() {
  $( "span,div" ).show( "slow" );
}
// Can pass in function name
$( "button" ).click( doIt );
 
$( "form" ).submit(function( event ) {
  if ( $( "input" ).val() === "yes" ) {
    $( "p" ).show( 4000, function() {
      $( this ).text( "Ok, DONE! (now showing)" );
    });
  }
  $( "span,div" ).hide( "fast" );
 
  // Prevent form submission
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/show>

.scroll()
=========

   .scroll( handler )Returns: [jQuery](types#jQuery)
--------------------------------------------------

  **Description:** Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.scroll( handler )](#scroll-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.scroll( [eventData ], handler )](#scroll-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.scroll()](#scroll)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "scroll", handler )` in the first and second variations, and `.trigger( "scroll" )` in the third.

 The `scroll` event is sent to an element when the user scrolls to a different place in the element. It applies to `window` objects, but also to scrollable frames and elements with the `overflow` CSS property set to `scroll` (or `auto` when the element's explicit height or width is less than the height or width of its contents).

 For example, consider the HTML:

 
```
<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum.
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>
```
 The style definition is present to make the target element small enough to be scrollable:

  ![] Figure 1 - Illustration of the rendered HTML  The `scroll` event handler can be bound to this element:

 
```
$( "#target" ).scroll(function() {
  $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
});
```
 Now when the user scrolls the text up or down, one or more messages are appended to `<div id="log"></div>`:

  `Handler for .scroll() called.` 

 To trigger the event manually, apply `.scroll()` without an argument:

 
```
$( "#other" ).click(function() {
  $( "#target" ).scroll();
});
```
 After this code executes, clicks on `Trigger the handler` will also append the message.

 A `scroll` event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.

  ### Additional Notes:

 * As the `.scroll()` method is just a shorthand for `.on( "scroll", handler )`, detaching is possible using `.off( "scroll" )`.
 Example:
--------


 To do something when your page is scrolled:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/scroll>

.serialize()
============

   .serialize()Returns: [String](types#String)
--------------------------------------------

  **Description:** Encode a set of form elements as a string for submission.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.serialize()](#serialize)


	+ This method does not accept any arguments.

  The `.serialize()` method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as `<input>`, `<textarea>`, and `<select>`: `$( "input, textarea, select" ).serialize();`

 It is typically easier, however, to select the `<form>` itself for serialization:

 
```
$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});
```
 In this case, jQuery serializes the successful controls within the form. Only `form` elements are examined for inputs they contain, in all other cases the input elements to be serialized should be part of the set passed to the `.serialize()` method. Selecting both the form and its children in a set will cause duplicates in the serialized string.

 Note: Only ["successful controls"](https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2) are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a `name` attribute. Values from checkboxes and radio buttons (`input`s of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

  Example:
--------


 Serialize a form to a query string that could be sent to a server in an Ajax request.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serialize demo</title>
  <style>
  body, select {
    font-size: 12px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
    font-size: 14px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
 
  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>
 
<p><tt id="results"></tt></p>
 
<script>
  function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );
  showValues();
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/serialize>

.serializeArray()
=================

   .serializeArray()Returns: [Array](types#Array)
-----------------------------------------------

  **Description:** Encode a set of form elements as an array of names and values.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.serializeArray()](#serializeArray)


	+ This method does not accept any arguments.

  The `.serializeArray()` method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery collection of `form`s and/or form controls. The controls can be of several types:

 
```
<form>
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>
```
 The `.serializeArray()` method uses the standard W3C rules for [successful controls](https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2) to determine which elements it should include; in particular the element cannot be disabled and must contain a `name` attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized. Elements that do not contain a `value` attribute are represented with the empty string value.

 This method can act on a jQuery object that has selected individual form controls, such as `<input>`, `<textarea>`, and `<select>`. However, it is typically easier to select the `<form>` element itself for serialization:

 
```
$( "form" ).submit(function( event ) {
  console.log( $( this ).serializeArray() );
  event.preventDefault();
});
```
 This produces the following data structure (provided that the browser supports `console.log`):

 
```
[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]
```
  Example:
--------


 Get the values from a form, iterate through them, and append them to a results display.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serializeArray demo</title>
  <style>
  body, select {
    font-size: 14px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><b>Results:</b> <span id="results"></span></p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/serializeArray>

.siblings()
===========

   .siblings( [selector ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------

  **Description:** Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.siblings( [selector ] )](#siblings-selector)


	+ **selector** Type: [Selector](types#Selector)  A string containing a selector expression to match elements against.

  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.

 The method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 If we begin at the third item, we can find its siblings:

 
```
$( "li.third-item" ).siblings().css( "background-color", "red" );
```
 The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.

 The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree. However, if the original collection contains more than one element, they might be mutual siblings and will both be found. If you need an exclusive list of siblings, use `$collection.siblings().not($collection)`.

  Examples:
---------


 Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>siblings demo</title>
  <style>
  ul {
    float: left;
    margin: 5px;
    font-size: 16px;
    font-weight: bold;
  }
  p {
    color: blue;
    margin: 10px 20px;
    font-size: 16px;
    padding: 5px;
    font-weight: bolder;
  }
  .hilite {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li>One</li>
  <li>Two</li>
  <li class="hilite">Three</li>
  <li>Four</li>
</ul>
 
<ul>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
</ul>
 
<ul>
  <li>Eight</li>
  <li class="hilite">Nine</li>
  <li>Ten</li>
  <li class="hilite">Eleven</li>
</ul>
 
<p>Unique siblings: <b></b></p>
 
<script>
var len = $( ".hilite" ).siblings()
  .css( "color", "red" )
  .length;
$( "b" ).text( len );
</script>
 
</body>
</html>
```
 #### Demo:

   Find all siblings with a class "selected" of each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>siblings demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
 
<script>
$( "p" ).siblings( ".selected" ).css( "background", "yellow" );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/siblings>

.submit()
=========

   .submit( handler )Returns: [jQuery](types#jQuery)
--------------------------------------------------

  **Description:** Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.submit( handler )](#submit-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.submit( [eventData ], handler )](#submit-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  An object containing data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.submit()](#submit)


	+ This signature does not accept any arguments.

  This method is a shortcut for `.on( "submit", handler )` in the first variation, and `.trigger( "submit" )` in the third.

 The `submit` event is sent to an element when the user is attempting to submit a form. It can only be attached to `<form>` elements. Forms can be submitted either by clicking an explicit `<input type="submit">`, `<input type="image">`, or `<button type="submit">`, or by pressing `Enter` when certain form elements have focus.

  Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

  For example, consider the HTML:

 
```
<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>
```
 The event handler can be bound to the form:

 
```
$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});
```
 Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling `.preventDefault()` on the event object or by returning `false` from our handler. We can trigger the event manually when another element is clicked:

 
```
$( "#other" ).click(function() {
  $( "#target" ).submit();
});
```
 After this code executes, clicks on `Trigger the handler` will also display the message. In addition, the default `submit` action on the form will be fired, so the form will be submitted.

 The JavaScript `submit` event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the `submit` event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior. 

  ### Additional Notes:

 * As the `.submit()` method is just a shorthand for `.on( "submit", handler )`, detaching is possible using `.off( "submit" )`.
* Forms and their child elements should not use input names or ids that conflict with properties of a form, such as `submit`, `length`, or `method`. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see [DOMLint](https://kangax.github.com/domlint/).
 Examples:
---------


 If you'd like to prevent forms from being submitted unless a flag variable is set, try:

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text">
    <input type="submit">
  </div>
</form>
<span></span>
 
<script>
$( "form" ).submit(function( event ) {
  if ( $( "input" ).first().val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
 
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   If you'd like to prevent forms from being submitted unless a flag variable is set, try:

 
```
$( "form" ).submit(function() {
  return this.some_flag_variable;
});
```
   To trigger the submit event on the first form on the page, try:

 
```
$( "form" ).first().submit();
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/submit>

Category: Sliding
=================

   [.slideDown()](../../slidedown "Permalink to .slideDown()")
============================================================

  Display the matched elements with a sliding motion.

     [.slideToggle()](../../slidetoggle "Permalink to .slideToggle()")
==================================================================

  Display or hide the matched elements with a sliding motion.

     [.slideUp()](../../slideup "Permalink to .slideUp()")
======================================================

  Hide the matched elements with a sliding motion.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/effects/sliding>

.slideDown()
============

   .slideDown( [duration ] [, complete ] )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------------------

  **Description:** Display the matched elements with a sliding motion.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.slideDown( [duration ] [, complete ] )](#slideDown-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.slideDown( options )](#slideDown-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.slideDown( [duration ] [, easing ] [, complete ] )](#slideDown-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

  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.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively. If any other string is supplied, or if the `duration` parameter is omitted, the default duration of `400` milliseconds is used.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
```
 With the element initially hidden, we can show it slowly:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).slideDown( "slow", function() {
    // Animation complete.
  });
});
```
  ![]` effect  #### Easing

 **As of jQuery 1.4.3**, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 #### Callback Function

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 **As of jQuery 1.6**, the `[.promise()](promise)` method can be used in conjunction with the `[deferred.done()](deferred.done)` method to execute a single callback for the animation as a whole when *all* matching elements have completed their animations ( See the [example for .promise()](promise#example-1) ). 

  ### Additional Notes:

 * All jQuery effects, including `.slideDown()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
* If `.slideDown()` is called on an unordered list (`<ul>`) and its `<li>` elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the `<ul>` has "layout." To remedy the problem, add the `position: relative;` and `zoom: 1;` CSS declarations to the `ul`.
 Examples:
---------


 Animates all divs to slide down and show themselves over 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
  div {
    background: #de9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    display: none;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Click me!
<div></div>
<div></div>
<div></div>
 
<script>
$( document.body ).click(function () {
  if ( $( "div" ).first().is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).hide();
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
  div {
    background: #cfd;
    margin: 3px;
    width: 50px;
    text-align: center;
    float: left;
    cursor: pointer;
    border: 2px outset black;
    font-weight: bolder;
  }
  input {
    display: none;
    width: 120px;
    float: left;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">
 
<script>
$( "div" ).click(function() {
  $( this ).css({
    borderStyle: "inset",
    cursor: "wait"
  });
  $( "input" ).slideDown( 1000, function() {
    $( this )
      .css( "border", "2px red inset" )
      .filter( ".middle" )
        .css( "background", "yellow" )
        .focus();
    $( "div" ).css( "visibility", "hidden" );
  });
});
 
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/slideDown>

.slideToggle()
==============

   .slideToggle( [duration ] [, complete ] )Returns: [jQuery](types#jQuery)
-------------------------------------------------------------------------

  **Description:** Display or hide the matched elements with a sliding motion.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.slideToggle( [duration ] [, complete ] )](#slideToggle-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.slideToggle( options )](#slideToggle-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.slideToggle( [duration ] [, easing ] [, complete ] )](#slideToggle-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

  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.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
```
 We will cause `.slideToggle()` to be called when another element is clicked:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});
```
 With the element initially shown, we can hide it slowly with the first click:

  ![]` effect when hiding the image  A second click will show the element once again:

  ![]` effect when showing the image  #### Easing

 **As of jQuery 1.4.3**, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 #### Callback Function

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 **As of jQuery 1.6**, the `[.promise()](promise)` method can be used in conjunction with the `[deferred.done()](deferred.done)` method to execute a single callback for the animation as a whole when *all* matching elements have completed their animations ( See the [example for .promise()](promise#example-1) ). 

  ### Additional Notes:

 * All jQuery effects, including `.slideToggle()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
* If `.slideDown()` is called on an unordered list (`<ul>`) and its `<li>` elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the `<ul>` has "layout." To remedy the problem, add the `position: relative;` and `zoom: 1;` CSS declarations to the `ul`.
 Examples:
---------


 Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates divs between dividers with a toggle that makes some appear and some disappear.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  div {
    background: #b977d1;
    margin: 3px;
    width: 60px;
    height: 60px;
    float: left;
  }
  div.still {
    background: #345;
    width: 5px;
  }
  div.hider {
    display: none;
  }
  span {
    color: red;
  }
  p {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
 
<script>
$( "#aa" ).click(function() {
  $( "div:not(.still)" ).slideToggle( "slow", function() {
    var n = parseInt( $( "span" ).text(), 10 );
    $( "span" ).text( n + 1 );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/slideToggle>

.slideUp()
==========

   .slideUp( [duration ] [, complete ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------------

  **Description:** Hide the matched elements with a sliding motion.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.slideUp( [duration ] [, complete ] )](#slideUp-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.slideUp( options )](#slideUp-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.slideUp( [duration ] [, easing ] [, complete ] )](#slideUp-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.

  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 (or, if set, to whatever the CSS min-height property is), the `display` style property is set to `none` to ensure that the element no longer affects the layout of the page.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively. If any other string is supplied, or if the `duration` parameter is omitted, the default duration of `400` milliseconds is used.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
```
 With the element initially shown, we can hide it slowly:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).slideUp( "slow", function() {
    // Animation complete.
  });
});
```
  ![]` effect  #### Easing

 **As of jQuery 1.4.3**, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 #### Callback Function

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 **As of jQuery 1.6**, the `[.promise()](promise)` method can be used in conjunction with the `[deferred.done()](deferred.done)` method to execute a single callback for the animation as a whole when *all* matching elements have completed their animations ( See the [example for .promise()](promise#example-1) ). 

  ### Additional Notes:

 * All jQuery effects, including `.slideUp()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
* If `.slideDown()` is called on an unordered list (`<ul>`) and its `<li>` elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the `<ul>` has "layout." To remedy the problem, add the `position: relative;` and `zoom: 1;` CSS declarations to the `ul`.
 Examples:
---------


 Animates all divs to slide up, completing the animation within 400 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
  div {
    background: #3d9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( document.body ).click(function() {
  if ( $( "div" ).first().is( ":hidden" ) ) {
    $( "div" ).show( "slow" );
  } else {
    $( "div" ).slideUp();
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates the parent paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
 div {
   margin: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Hide One</button>
  <input type="text" value="One">
</div>
 
<div>
  <button>Hide Two</button>
  <input type="text" value="Two">
</div>
 
<div>
  <button>Hide Three</button>
  <input type="text" value="Three">
</div>
 
<div id="msg"></div>
 
<script>
$( "button" ).click(function() {
  $( this ).parent().slideUp( "slow", function() {
    $( "#msg" ).text( $( "button", this ).text() + " has completed." );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/slideUp>

.stop()
=======

   .stop( [clearQueue ] [, jumpToEnd ] )Returns: [jQuery](types#jQuery)
---------------------------------------------------------------------

  **Description:** Stop the currently-running animation on the matched elements.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.stop( [clearQueue ] [, jumpToEnd ] )](#stop-clearQueue-jumpToEnd)


	+ **clearQueue** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to remove queued animation as well. Defaults to `false`.
	+ **jumpToEnd** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to complete the current animation immediately. Defaults to `false`.
* ####  version added: [1.7](https://api.jquery.com/category/version/1.7/)[.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )](#stop-queue-clearQueue-jumpToEnd)


	+ **queue** Type: [String](types#String)  The name of the queue in which to stop animations.
	+ **clearQueue** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to remove queued animation as well. Defaults to `false`.
	+ **jumpToEnd** (default: `false`) Type: [Boolean](types#Boolean)  A Boolean indicating whether to complete the current animation immediately. Defaults to `false`.

  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.

 If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When `.stop()` is called, the next animation in the queue begins immediately. If the `clearQueue` parameter is provided with a value of `true`, then the rest of the animations in the queue are removed and never run.

 If the `jumpToEnd` argument is provided with a value of `true`, the current animation stops, but the element is immediately given its target values for each CSS property. In our above `.slideUp()` example, the element would be immediately hidden. The callback function is then immediately called, if provided.

 **As of jQuery 1.7**, if the first argument is provided as a string, only the animations in the queue represented by that string will be stopped.

 The usefulness of the `.stop()` method is evident when we need to animate an element on `mouseenter` and `mouseleave`:

 
```
<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123">
</div>
```
 We can create a nice fade effect without the common problem of multiple queued animations by adding `.stop(true, true)` to the chain:

 
```
$( "#hoverme-stop-2" ).hover(function() {
  $( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
  $( this ).find( "img" ).stop( true, true ).fadeIn();
});
```
 Toggling Animations
-------------------

 **As of jQuery 1.7,** stopping a toggled animation prematurely with `.stop()` will trigger jQuery's internal effects tracking. In previous versions, calling the `.stop()` method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing. To observe the new behavior, see the final example below.

  Animations may be stopped globally by setting the property `$.fx.off` to `true`. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

   Examples:
---------


 Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Click the slideToggle button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  .block {
    background-color: #abc;
    border: 2px solid black;
    width: 200px;
    height: 80px;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="toggle">slideToggle</button>
<div class="block"></div>
 
<script>
var $block = $( ".block" );
 
// Toggle a sliding animation animation
$( "#toggle" ).on( "click", function() {
  $block.stop().slideToggle( 1000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/stop>

.text()
=======

  Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements. #### Contents:

 * [.text()](#text1)
	+ [.text()](#text)
* [.text( text )](#text2)
	+ [.text( text )](#text-text)
	+ [.text( function )](#text-function)

 
 .text()Returns: [String](types#String)
---------------------------------------

  **Description:** Get the combined text contents of each element in the set of matched elements, including their descendants.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.text()](#text)


	+ This method does not accept any arguments.

  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:

 
```
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>
```
 The code `$( "div.demo-container" ).text()` would produce the following result:

  `Demonstration Box list item 1 list item 2` 

 The `.text()` method cannot be used on form inputs or scripts. To set or get the text value of `input` or `textarea` elements, use the [`.val()`](val) method. To get the value of a script element, use the [`.html()`](html) method.

 As of jQuery 1.4, the `.text()` method returns the value of text and CDATA nodes as well as element nodes.

  Example:
--------


 Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  b {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><b>Test</b> Paragraph.</p>
<p></p>
 
<script>
var str = $( "p" ).first().text();
$( "p" ).last().html( str );
</script>
 
</body>
</html>
```
 #### Demo:

   .text( text )Returns: [jQuery](types#jQuery)
---------------------------------------------

  **Description:** Set the content of each element in the set of matched elements to the specified text.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.text( text )](#text-text)


	+ **text** Type: [String](types#String) or [Number](types#Number) or [Boolean](types#Boolean)  The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.text( function )](#text-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) text ) => [String](types#String)  A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

  Unlike the `.html()` method, `.text()` can be used in both XML and HTML documents. 

 We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method `.createTextNode()`, does not interpret the string as HTML. Consider the following HTML:

 
```
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>
```
 The code `$( "div.demo-container" ).text( "<p>This is a test.</p>" );` will produce the following DOM output:

 
```
<div class="demo-container">
  &lt;p&gt;This is a test.&lt;/p&gt;
</div>
```
 It will appear on a rendered page as though the tags were exposed, like this:

 
```
<p>This is a test</p>
```
 The `.text()` method cannot be used on input elements. For input field text, use the [.val()](val) method.

 As of jQuery 1.4, the `.text()` method allows us to set the text content by passing in a function.

 
```
$( "ul li" ).text(function( index ) {
  return "item number " + ( index + 1 );
});
```
 Given an unordered list with three `<li>` elements, this example will produce the following DOM output:

 
```
<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>
```
  Example:
--------


 Add text to the paragraph (notice the bold tag is escaped).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Test Paragraph.</p>
 
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/text>

.toggle()
=========

   .toggle( [duration ] [, complete ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------------

  **Description:** Display or hide the matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.toggle( [duration ] [, complete ] )](#toggle-duration-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.toggle( options )](#toggle-options)


	+ **options** Type: [PlainObject](types#PlainObject)  A map of additional options to pass to the method.
		- **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
		- **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
		- **queue** (default: `true`) Type: [Boolean](types#Boolean) or [String](types#String)  A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **As of jQuery 1.7**, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call `.dequeue("queuename")` to start it.
		- **specialEasing** Type: [PlainObject](types#PlainObject)  An object containing one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: [1.4](https://api.jquery.com/category/version/1.4/))
		- **step** Type: [Function](types#Function)( [Number](types#Number) now, [Tween](types#Tween) tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
		- **progress** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Number](types#Number) progress, [Number](types#Number) remainingMs ) A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **complete** Type: [Function](types#Function)() A function that is called once the animation on an element is complete.
		- **start** Type: [Function](types#Function)( [Promise](types#Promise) animation ) A function to call when the animation on an element begins. (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **done** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes (its Promise object is resolved). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **fail** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element fails to complete (its Promise object is rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
		- **always** Type: [Function](types#Function)( [Promise](types#Promise) animation, [Boolean](types#Boolean) jumpedToEnd ) A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected). (version added: [1.8](https://api.jquery.com/category/version/1.8/))
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.toggle( duration [, easing ] [, complete ] )](#toggle-duration-easing-complete)


	+ **duration** (default: `400`) Type: [Number](types#Number) or [String](types#String)  A string or number determining how long the animation will run.
	+ **easing** (default: `swing`) Type: [String](types#String)  A string indicating which easing function to use for the transition.
	+ **complete** Type: [Function](types#Function)() A function to call once the animation is complete, called once per matched element.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.toggle( display )](#toggle-display)


	+ **display** Type: [Boolean](types#Boolean)  Use `true` to show the element or `false` to hide it.

   Note: The event handling suite also has a method named [.toggle()](toggle-event). Which one is fired depends on the set of arguments passed.

  With no parameters, the `.toggle()` method simply toggles the visibility of elements:

 
```
$( ".target" ).toggle();
```
 The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS `display` property. 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 a duration, a plain object, or a *single* "complete" function is provided, `.toggle()` becomes an animation method. The `.toggle()` method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 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.

 Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of `200` and `600` milliseconds, respectively.

 As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called `swing`, and one that progresses at a constant pace, called `linear`. More easing functions are available with the use of plug-ins, most notably the [jQuery UI suite](https://jqueryui.com).

 If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but `this` is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

 We can animate any element, such as a simple image:

 
```
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
```
 We will cause `.toggle()` to be called when another element is clicked:

 
```
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});
```
 With the element initially shown, we can hide it slowly with the first click: 

  ![]` effect when hiding the image  A second click will show the element once again:

  ![]` effect when showing the image  The second version of the method accepts a Boolean parameter. If this parameter is `true`, then the matched elements are shown; if `false`, the elements are hidden. In essence, the statement: 

 
```
$( "#foo" ).toggle( display );
```
 is equivalent to:

 
```
if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();
}
```
  ### Additional Notes:

 * All jQuery effects, including `.toggle()`, can be turned off globally by setting `jQuery.fx.off = true`, which effectively sets the duration to 0. For more information, see [jQuery.fx.off](jquery.fx.off).
 Examples:
---------


 Toggles all paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).toggle();
});
</script>
 
</body>
</html>
```
 #### Demo:

   Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
    font-size: 16px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).toggle( "slow" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Shows all paragraphs, then hides them all, back and forth.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
var flip = 0;
$( "button" ).click(function() {
  $( "p" ).toggle( flip++ % 2 === 0 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/toggle>

.slice()
========

   .slice( start [, end ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------

  **Description:** Reduce the set of matched elements to a subset specified by a range of indices.

 * ####  version added: [1.1.4](https://api.jquery.com/category/version/1.1.4/)[.slice( start [, end ] )](#slice-start-end)


	+ **start** Type: [Integer](types#Integer)  An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.
	+ **end** Type: [Integer](types#Integer)  An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.

  Given a jQuery object that represents a set of DOM elements, the `.slice()` method constructs a new jQuery object containing a subset of the elements specified by the `start` and, optionally, `end` argument. 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.

 Consider a page with a simple list on it:

 
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
```
 We can apply this method to the set of list items:

 
```
$( "li" ).slice( 2 ).css( "background-color", "red" );
```
 The result of this call is a red background for items 3, 4, and 5. Note that the supplied index is zero-based, and refers to the position of elements within the jQuery object, not within the DOM tree.

 The end parameter allows us to limit the selected range even further. For example:

 
```
$( "li" ).slice( 2, 4 ).css( "background-color", "red" );
```
 Now only items 3 and 4 are selected. The index is once again zero-based; the range extends up to but not including the specified index.

 #### Negative Indices

 The jQuery `.slice()` method is patterned after the JavaScript .slice() method for arrays. One of the features that it mimics is the ability for negative numbers to be passed as either the `start` or `end` parameter. If a negative number is provided, this indicates a position starting from the end of the set, rather than the beginning. For example:

 
```
$( "li" ).slice( -2, -1 ).css( "background-color", "red" );
```
 This time only list item 4 is turned red, since it is the only item in the range between two from the end (`-2`) and one from the end (`-1`).

  Examples:
---------


 Turns divs yellow based on a random slice.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slice demo</title>
  <style>
  div {
    width: 40px;
    height: 40px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
  }
  span {
    color: red;
    font-weight: bold;
  }
  button {
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button>Turn slice yellow</button>
  <span>Click the button!</span></p>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   Selects all paragraphs, then slices the selection to include only the first element.

 
```
$( "p" ).slice( 0, 1 ).wrapInner( "<b></b>" );
```
   Selects all paragraphs, then slices the selection to include only the first and second element.

 
```
$( "p" ).slice( 0, 2 ).wrapInner( "<b></b>" );
```
   Selects all paragraphs, then slices the selection to include only the second element.

 
```
$( "p" ).slice( 1, 2 ).wrapInner( "<b></b>" );
```
   Selects all paragraphs, then slices the selection to include only the second and third element.

 
```
$( "p" ).slice( 1 ).wrapInner( "<b></b>" );
```
   Selects all paragraphs, then slices the selection to include only the third element.

 
```
$( "p" ).slice( -1 ).wrapInner( "<b></b>" );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/slice>

:submit Selector
================

  submit selector
---------------

  **Description:** Selects all elements of type submit.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":submit" )

  The `:submit` selector typically applies to button or input elements. Note that some browsers treat `<button>` element as `type="submit"` implicitly while others (such as Internet Explorer) do not. To ensure that markup works consistently across all browsers and guarantee that it is possible to consistently select buttons that will submit a form, always specify a `type` property.

  ### Additional Notes:

 * Because `:submit` is a jQuery extension and not part of the CSS specification, queries using `:submit` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `input[type="submit"], button[type="submit"]` instead.
 Example:
--------


 Finds all submit elements that are descendants of a td element.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  textarea {
    height: 45px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
  <tr>
    <th>
      Element Type
    </th>
    <th>
      Element
    </th>
  </tr>
  <tr>
    <td>
      <input type="button" value="Input Button">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="file">
    </td>
  </tr>
  <tr>
    <td>
      <input type="hidden">
    </td>
  </tr>
  <tr>
    <td>
      <input type="image">
    </td>
  </tr>
  <tr>
    <td>
      <input type="password">
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio">
    </td>
  </tr>
  <tr>
    <td>
      <input type="reset">
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>
      <select><option>Option</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <textarea></textarea>
    </td>
  </tr>
  <tr>
    <td>
      <button>Button</button>
    </td>
  </tr>
  <tr>
    <td>
      <button type="submit">Button type="submit"</button>
    </td>
  </tr>
</table>
</form>
<div id="result"></div>
 
<script>
var submitEl = $( "td :submit" )
  .parent( "td" )
    .css({
      background: "yellow",
      border: "3px red solid"
    })
  .end();
 
$( "#result" ).text( "jQuery matched " + submitEl.length + " elements." );
 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
 
// 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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/submit-selector>

:target Selector
================

  target selector
---------------

  **Description:** Selects the target element indicated by the fragment identifier of the document's URI.

 * ####  version added: [1.9](https://api.jquery.com/category/version/1.9/)jQuery( ":target" )

  If the document's URI contains a fragment identifier, or hash, then the `:target` selector will match the element with an ID that matches the identifier. For example, given a document with a URI of https://example.com/#foo, `$( "p:target" )` will select the `<p id="foo">` element.

 Further discussion of this usage can be found in the [W3C CSS specification](https://www.w3.org/TR/css3-selectors/#target-pseudo).

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/target-selector>

:text Selector
==============

  text selector
-------------

  **Description:** Selects all input elements of type text.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":text" )

  `$( ":text" )` allows us to select 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. 

 **Note:** As of jQuery 1.5.2, `:text` selects `input` elements that have no specified `type` attribute (in which case `type="text"` is implied). 

 This difference in behavior between `$( ":text" )` and `$( "[type=text]" )`, can be seen below:

 
```
$( "<input>" ).is( "[type=text]" ); // false
$( "<input>" ).is( ":text" ); // true
```
  ### Additional Notes:

 * Because `:text` is a jQuery extension and not part of the CSS specification, queries using `:text` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. For better performance in modern browsers, use `[type="text"]` instead.
 Example:
--------


 Finds all text inputs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  textarea {
    height: 25px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>
<div></div>
 
<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" );
 
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/text-selector>

.toArray()
==========

   .toArray()Returns: [Array](types#Array)
----------------------------------------

  **Description:** Retrieve all the elements contained in the jQuery set, as an array.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.toArray()](#toArray)


	+ This method does not accept any arguments.

  `.toArray()` returns all of the elements in the jQuery set:

 
```
alert( $( "li" ).toArray() );
```
 All of the matched DOM nodes are returned by this call, contained in a standard array:

  [<li id="foo">, <li id="bar">] 

  Example:
--------


 Select all divs in the document and return the DOM Elements as an Array; then use the built-in reverse() method to reverse that array.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toArray demo</title>
  <style>
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Reversed - <span></span>
 
<div>One</div>
<div>Two</div>
<div>Three</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/toArray>

.toggle()
=========

   .toggle( handler, handler [, handler ] )Returns: [jQuery](types#jQuery)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/), removed: [1.9](https://api.jquery.com/category/version/1.9/)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Bind two or more handlers to the matched elements, to be executed on alternate clicks.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.toggle( handler, handler [, handler ] )](#toggle-handler-handler-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute every even time the element is clicked.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute every odd time the element is clicked.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) Additional handlers to cycle through after clicks.

   Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named [.toggle()](toggle) that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

  The `.toggle()` method binds a handler for the `click` event, so the rules outlined for the triggering of `click` apply here as well.

 For example, consider the HTML:

 
```
<div id="target">
  Click here
</div>
```
 Event handlers can then be bound to the `<div>`:

 
```
$( "#target" ).toggle(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});
```
 As the element is clicked repeatedly, the messages alternate:

  `First handler for .toggle() called.`   
 `Second handler for .toggle() called.`   
 `First handler for .toggle() called.`   
 `Second handler for .toggle() called.`   
 `First handler for .toggle() called.` 

 If more than two handlers are provided, `.toggle()` will cycle among all of them. For example, if there are three handlers, then the first handler will be called on the first click, the fourth click, the seventh click, and so on.

 The `.toggle()` method is provided for convenience. It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into `.toggle()` prove limiting. For example, `.toggle()` is not guaranteed to work correctly if applied twice to the same element. Since `.toggle()` internally uses a `click` handler to do its work, we must unbind `click` to remove a behavior attached with `.toggle()`, so other `click` handlers can be caught in the crossfire. The implementation also calls `.preventDefault()` on the event, so links will not be followed and buttons will not be clicked if `.toggle()` has been called on the element.

  Example:
--------


 Toggle a style on table cells. (Not recommended. Use .toggleClass() instead.):

 
```
$( "td" ).toggle(
  function() {
    $( this ).addClass( "selected" );
  }, function() {
    $( this ).removeClass( "selected" );
  }
);
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/toggle-event>

.toggleClass()
==============

   #### Contents:

 * [.toggleClass( className )](#toggleClass1)
	+ [.toggleClass( className )](#toggleClass-className)
	+ [.toggleClass( className, state )](#toggleClass-className-state)
	+ [.toggleClass( classNames )](#toggleClass-classNames)
	+ [.toggleClass( classNames, state )](#toggleClass-classNames-state)
	+ [.toggleClass( function [, state ] )](#toggleClass-function-state)
* [.toggleClass( [state ] )](#toggleClass2)
	+ [.toggleClass( [state ] )](#toggleClass-state)

 
 .toggleClass( className )Returns: [jQuery](types#jQuery)
---------------------------------------------------------

  **Description:** 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 state argument.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.toggleClass( className )](#toggleClass-className)


	+ **className** Type: [String](types#String)  One or more classes (separated by spaces) to be toggled for each element in the matched set.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.toggleClass( className, state )](#toggleClass-className-state)


	+ **className** Type: [String](types#String)  One or more classes (separated by spaces) to be toggled for each element in the matched set.
	+ **state** Type: [Boolean](types#Boolean)  A boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
* ####  version added: [3.3](https://api.jquery.com/category/version/3.3/)[.toggleClass( classNames )](#toggleClass-classNames)


	+ **classNames** Type: [Array](types#Array)  An array of classes to be toggled for each element in the matched set.
* ####  version added: [3.3](https://api.jquery.com/category/version/3.3/)[.toggleClass( classNames, state )](#toggleClass-classNames-state)


	+ **classNames** Type: [Array](types#Array)  An array of classes to be toggled for each element in the matched set.
	+ **state** Type: [Boolean](types#Boolean)  A boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.toggleClass( function [, state ] )](#toggleClass-function-state)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) className, [Boolean](types#Boolean) state ) => [String](types#String)  A function that returns one or more space-separated classes or an array of classes to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the state as arguments.
	+ **state** Type: [Boolean](types#Boolean)  A boolean value to determine whether the class should be added or removed.

  This method takes one or more classes 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>`: 

 
```
<div class="tumble">Some text.</div>
```
 The first time we apply `$( "div.tumble" ).toggleClass( "bounce" )`, we get the following:

 
```
<div class="tumble bounce">Some text.</div>
```
 The second time we apply `$( "div.tumble" ).toggleClass( "bounce" )`, the `<div>` class is returned to the single `tumble` value:

 
```
<div class="tumble">Some text.</div>
```
 Applying `.toggleClass( "bounce spin" )` to the same `<div>` alternates between `<div class="tumble bounce spin">` and `<div class="tumble">`.

 The second version of `.toggleClass()` uses the second parameter for determining whether the class should be added or removed. If this parameter's value is `true`, then the class is added; if `false`, the class is removed. In essence, the statement:

 
```
$( "#foo" ).toggleClass( className, addOrRemove );
```
 is equivalent to:

 
```
if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}
```
 **As of jQuery 1.4**, if no arguments are passed to `.toggleClass()`, all classes on the element the first time `.toggleClass()` is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.

 
```
$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});
```
 This example will toggle the `happy` class for `<div class="foo">` elements if their parent element has a class of `bar`; otherwise, it will toggle the `sad` class.

  Examples:
---------


 Toggle the class 'highlight' when a paragraph is clicked.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
 
<script>
$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
  }
  .blue {
    color: blue;
  }
  .highlight {
    background: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
<p class="blue">on these (<span>clicks: 0</span>)</p>
<p class="blue">paragraphs (<span>clicks: 0</span>)</p>
 
<script>
var count = 0;
$( "p" ).each(function() {
  var $thisParagraph = $( this );
  var count = 0;
  $thisParagraph.click(function() {
    count++;
    $thisParagraph.find( "span" ).text( "clicks: " + count );
    $thisParagraph.toggleClass( "highlight", count % 3 === 0 );
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   Toggle the class name(s) indicated on the buttons for each div.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <style>
  .wrap > div {
    float: left;
    width: 100px;
    margin: 1em 1em 0 0;
    padding-left: 3px;
    border: 1px solid #abc;
  }
  div.a {
    background-color: aqua;
  }
  div.b {
    background-color: burlywood;
  }
  div.c {
    background-color: cornsilk;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="buttons">
  <button>toggle</button>
  <button class="a">toggle a</button>
  <button class="a b">toggle a b</button>
  <button class="a b c">toggle a b c</button>
  <a href="#">reset</a>
</div>
<div class="wrap">
  <div></div>
  <div class="b"></div>
  <div class="a b"></div>
  <div class="a c"></div>
</div>
 
<script>
var cls = [ "", "a", "a b", "a b c" ];
var divs = $( "div.wrap" ).children();
var appendClass = function() {
  divs.append(function() {
    return "<div>" + ( this.className || "none" ) + "</div>";
  });
};
 
appendClass();
 
$( "button" ).on( "click", function() {
  var tc = this.className || undefined;
  divs.toggleClass( tc );
  appendClass();
});
 
$( "a" ).on( "click", function( event ) {
  event.preventDefault();
  divs.empty().each(function( i ) {
    this.className = cls[ i ];
  });
  appendClass();
});
</script>
 
</body>
</html>
```
 #### Demo:

   .toggleClass( [state ] )Returns: [jQuery](types#jQuery)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
-------------------------------------------------------------------------------------------------------------------------------

  **Description:** 

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.toggleClass( [state ] )](#toggleClass-state)


	+ **state** Type: [Boolean](types#Boolean)  A boolean value to determine whether the class should be added or removed.

   **This signature (only!) is deprecated as of jQuery 3.0**.   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/toggleClass>

.trigger()
==========

   .trigger( eventType [, extraParameters ] )Returns: [jQuery](types#jQuery)
--------------------------------------------------------------------------

  **Description:** Execute all handlers and behaviors attached to the matched elements for the given event type.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.trigger( eventType [, extraParameters ] )](#trigger-eventType-extraParameters)


	+ **eventType** Type: [String](types#String)  A string containing a JavaScript event type, such as `click` or `submit`.
	+ **extraParameters** Type: [Array](types#Array) or [PlainObject](types#PlainObject)  Additional parameters to pass along to the event handler.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.trigger( event [, extraParameters ] )](#trigger-event-extraParameters)


	+ **event** Type: [Event](types#Event)  A [`jQuery.Event`](category/events/event-object) object.
	+ **extraParameters** Type: [Array](types#Array) or [PlainObject](types#PlainObject)  Additional parameters to pass along to the event handler.

  Any event handlers attached with `.on()` 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:

 
```
$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
```
 As of jQuery 1.3, `.trigger()`ed events bubble up the DOM tree; an event handler can stop the bubbling by returning `false` from the handler or calling the [`.stopPropagation()`](event.stoppropagation) method on the event object passed into the event. Although `.trigger()` simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

 To trigger handlers bound via jQuery without also triggering the native event, use [`.triggerHandler()`](triggerhandler) instead. 

 When we define a custom event type using the `.on()` method, the second argument to `.trigger()` can become useful. For example, suppose we have bound a handler for the `custom` event to our element instead of the built-in `click` event as we did above:

 
```
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
```
 The event object is always passed as the first parameter to an event handler. An array of arguments can also be passed to the .trigger() call, and these parameters will be passed along to the handler as well following the event object. As of jQuery 1.6.2, single string or numeric argument can be passed without being wrapped in an array.

 Note the difference between the extra parameters passed here and the `eventData` parameter to the [.on()](on) method. Both are mechanisms for passing information to an event handler, but the `extraParameters` argument to `.trigger()` allows information to be determined at the time the event is triggered, while the `eventData` argument to `.on()` requires the information to be already computed at the time the handler is bound.

 The `.trigger()` method can be used on jQuery collections that wrap plain JavaScript objects similar to a pub/sub mechanism; any event handlers bound to the object will be called when the event is triggered. 

  **Note:** For both plain objects and DOM objects other than `window`, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls [`event.preventDefault()`](event.preventdefault). If this behavior is not desired, use [`.triggerHandler()`](triggerhandler) instead.  **Note:** As with [`.triggerHandler()`](triggerhandler), when calling `.trigger()` with an event name matches the name of a property on the object, prefixed by `on` (e.g. triggering `click` on `window` that has a non null `onclick` method), jQuery will attempt to invoke that property as a method.  **Note:** When triggering with a plain object that is not array-like but still contains a `length` property, you should pass the object in an array (e.g. `[ { length: 1 } ]`).  Examples:
---------


 Clicks to button #2 also trigger a click for button #1.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <style>
  button {
    margin: 10px;
  }
  div {
    color: blue;
    font-weight: bold;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   To submit the first form without using the submit() function, try:

 
```
$( "form" ).first().trigger( "submit" );
```
   To submit the first form without using the submit() function, try:

 
```
var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}
```
   To pass arbitrary data to an event:

 
```
$( "p" )
  .click(function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
  })
  .trigger( "click", [ "foo", "bar" ] );
```
   To pass arbitrary data through an event object:

 
```
var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );
```
   Alternative way to pass data through an event object:

 
```
$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/trigger>

.triggerHandler()
=================

   .triggerHandler( eventType [, extraParameters ] )Returns: [Object](types#Object)
---------------------------------------------------------------------------------

  **Description:** Execute all handlers attached to an element for an event.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.triggerHandler( eventType [, extraParameters ] )](#triggerHandler-eventType-extraParameters)


	+ **eventType** Type: [String](types#String)  A string containing a JavaScript event type, such as `click` or `submit`.
	+ **extraParameters** Type: [Array](types#Array) or [PlainObject](types#PlainObject)  Additional parameters to pass along to the event handler.
* ####  version added: [1.3](https://api.jquery.com/category/version/1.3/)[.triggerHandler( event [, extraParameters ] )](#triggerHandler-event-extraParameters)


	+ **event** Type: [Event](types#Event)  A [`jQuery.Event`](category/events/event-object) object.
	+ **extraParameters** Type: [Array](types#Array) or [PlainObject](types#PlainObject)  Additional parameters to pass along to the event handler.

  `.triggerHandler( eventType )` executes all handlers bound with jQuery for the event type. It will also execute any method called `on{eventType}()` found on the element. The behavior of this method is similar to [`.trigger()`](trigger), with the following exceptions:

 * The `.triggerHandler( "event" )` method will not call `.event()` on the element it is triggered on. This means `.triggerHandler( "submit" )` on a form will not call `.submit()` on the form.
* While `.trigger()` will operate on all elements matched by the jQuery object, `.triggerHandler()` only affects the first matched element.
* Events triggered with `.triggerHandler()` do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.
* Instead of returning the jQuery object (to allow chaining), `.triggerHandler()` returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns `undefined`

 For more information on this method, see the discussion for `[.trigger()](trigger)`.

  Example:
--------


 If you called .triggerHandler() on a focus event - the browser's default focus action would not be triggered, only the event handlers bound to the focus event.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>triggerHandler demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
 
<input type="text" value="To Be Focused">
 
<script>
$( "#old" ).click(function() {
  $( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
  $( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
  $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/triggerHandler>

.unload()
=========

   .unload( handler )Returns: [jQuery](types#jQuery)version deprecated: [1.8](https://api.jquery.com/category/version/1.8/), removed: [3.0](https://api.jquery.com/category/version/3.0/)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Bind an event handler to the "unload" JavaScript event.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.unload( handler )](#unload-handler)


	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute when the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.unload( [eventData ], handler )](#unload-eventData-handler)


	+ **eventData** Type: [Anything](types#Anything)  A plain object of data that will be passed to the event handler.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute each time the event is triggered.

   Note: This API has been removed in jQuery 3.0; please use `.on( "unload", handler )` instead of `.unload( handler )` and `.trigger( "unload" )` instead of `.unload()`.

  This method is a shortcut for `.on( "unload", handler )`.

 The `unload` event is sent to the `window` element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an `unload` event.

  The exact handling of the `unload` event has varied from version to version of browsers. For example, some versions of Firefox trigger the event when a link is followed, but not when the window is closed. In practical usage, behavior should be tested on all supported browsers and contrasted with the similar `beforeunload` event.

  Any `unload` event handler should be bound to the `window` object:

 
```
$( window ).unload(function() {
  return "Handler for .unload() called.";
});
```
 This event is available so that scripts can perform cleanup when the user leaves the page. Most browsers will ignore calls to `alert()`, `confirm()` and `prompt()` inside the event handler. The string you return may be used in a confirmation dialog, but not all browsers support this. It is not possible to cancel the `unload` event with `.preventDefault()`.

  ### Additional Notes:

 * As the `.unload()` method is just a shorthand for `.on( "unload", handler )`, detaching is possible using `.off( "unload" )`.
 Example:
--------


 To display an alert when a page is unloaded:

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

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/unload>

.unbind()
=========

   .unbind( eventType [, handler ] )Returns: [jQuery](types#jQuery)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
----------------------------------------------------------------------------------------------------------------------------------------

  **Description:** Remove a previously-attached event handler from the elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.unbind( eventType [, handler ] )](#unbind-eventType-handler)


	+ **eventType** Type: [String](types#String)  A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) The function that is to be no longer executed.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.unbind( eventType, false )](#unbind-eventType-false)


	+ **eventType** Type: [String](types#String)  A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
	+ **false** Type: [Boolean](types#Boolean)  Unbinds the corresponding 'return false' function that was bound using `.bind( eventType, false )`.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.unbind( event )](#unbind-event)


	+ **event** Type: [Event](types#Event)  A [`jQuery.Event`](category/events/event-object) object.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.unbind()](#unbind)


	+ This signature does not accept any arguments.

  As of jQuery 3.0, `.unbind()` has been deprecated. It was superseded by the [`.off()`](off) method since jQuery 1.7, so its use was already discouraged.

 Event handlers attached with `.bind()` can be removed with `.unbind()`. In the simplest case, with no arguments, `.unbind()` removes all handlers attached to the elements:

 
```
$( "#foo" ).unbind();
```
 This version removes the handlers regardless of type. To be more precise, we can pass an event type:

 
```
$( "#foo").unbind( "click" );
```
 By specifying the `click` event type, only handlers for that event type will be unbound. This approach can still have negative ramifications if other scripts might be attaching behaviors to the same element, however. Robust and extensible applications typically demand the two-argument version for this reason:

 
```
var handler = function() {
  alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );
```
 By naming the handler, we can be assured that no other functions are accidentally removed. Note that the following will *not* work:

 
```
$( "#foo" ).bind( "click", function() {
  alert( "The quick brown fox jumps over the lazy dog." );
});
 
// Will NOT work
$( "#foo" ).unbind( "click", function() {
  alert( "The quick brown fox jumps over the lazy dog." );
});
```
 Even though the two functions are identical in content, they are created separately and so JavaScript is free to keep them as distinct function objects. To unbind a particular handler, we need a reference to that function and not a different one that happens to do the same thing.

  **Note:** Using a proxied function to unbind an event on an element will unbind all proxied functions on that element, as the same proxy function is used for all proxied events. To allow unbinding a specific event, use unique class names on the event (e.g. `click.proxy1`, `click.proxy2`) when attaching them.

  #### Using Namespaces

 Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions. As shown in the discussion for the `.bind()` method, namespaces are defined by using a period (`.`) character when binding a handler:

 
```
$( "#foo" ).bind( "click.myEvents", handler );
```
 When a handler is bound in this fashion, we can still unbind it the normal way:

 
```
$( "#foo" ).unbind( "click" );
```
 However, if we want to avoid affecting other handlers, we can be more specific:

 
```
$( "#foo" ).unbind( "click.myEvents" );
```
 We can also unbind all of the handlers in a namespace, regardless of event type:

 
```
$( "#foo" ).unbind( ".myEvents" );
```
 It is particularly useful to attach namespaces to event bindings when we are developing plug-ins or otherwise writing code that may interact with other event-handling code in the future.

 #### Using the Event Object

 The third form of the `.unbind()` method is used when we wish to unbind a handler from within itself. For example, suppose we wish to trigger an event handler only three times:

 
```
var timesClicked = 0;
$( "#foo" ).bind( "click", function( event ) {
  alert( "The quick brown fox jumps over the lazy dog." );
  timesClicked++;
  if ( timesClicked >= 3 ) {
    $( this ).unbind( event );
  }
});
```
 The handler in this case must take a parameter, so that we can capture the event object and use it to unbind the handler after the third click. The event object contains the context necessary for `.unbind()` to know which handler to remove. This example is also an illustration of a closure. Since the handler refers to the `timesClicked` variable, which is defined outside the function, incrementing the variable has an effect even between invocations of the handler.

  Examples:
---------


 Can bind and unbind events to the colored button.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unbind demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
 
<script>
function aClick() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
});
</script>
 
</body>
</html>
```
 #### Demo:

   To unbind all events from all paragraphs, write:

 
```
$( "p" ).unbind();
```
   To unbind all click events from all paragraphs, write:

 
```
$( "p" ).unbind( "click" );
```
   To unbind just one previously bound handler, pass the function in as the second argument:

 
```
var foo = function() {
  // Code to handle some kind of event
};
 
$( "p" ).bind( "click", foo ); // ... Now foo will be called when paragraphs are clicked ...
 
$( "p" ).unbind( "click", foo ); // ... foo will no longer be called.
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/unbind>

.undelegate()
=============

   .undelegate()Returns: [jQuery](types#jQuery)version deprecated: [3.0](https://api.jquery.com/category/version/3.0/)
--------------------------------------------------------------------------------------------------------------------

  **Description:** Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

 * ####  version added: [1.4.2](https://api.jquery.com/category/version/1.4.2/)[.undelegate()](#undelegate)


	+ This signature does not accept any arguments.
* ####  version added: [1.4.2](https://api.jquery.com/category/version/1.4.2/)[.undelegate( selector, eventType )](#undelegate-selector-eventType)


	+ **selector** Type: [String](types#String)  A selector which will be used to filter the event results.
	+ **eventType** Type: [String](types#String)  A string containing a JavaScript event type, such as "click" or "keydown"
* ####  version added: [1.4.2](https://api.jquery.com/category/version/1.4.2/)[.undelegate( selector, eventType, handler )](#undelegate-selector-eventType-handler)


	+ **selector** Type: [String](types#String)  A selector which will be used to filter the event results.
	+ **eventType** Type: [String](types#String)  A string containing a JavaScript event type, such as "click" or "keydown"
	+ **handler** Type: [Function](types#Function)( [Event](types#Event) eventObject ) A function to execute at the time the event is triggered.
* ####  version added: [1.4.3](https://api.jquery.com/category/version/1.4.3/)[.undelegate( selector, events )](#undelegate-selector-events)


	+ **selector** Type: [String](types#String)  A selector which will be used to filter the event results.
	+ **events** Type: [PlainObject](types#PlainObject)  An object of one or more event types and previously bound functions to unbind from them.
* ####  version added: [1.6](https://api.jquery.com/category/version/1.6/)[.undelegate( namespace )](#undelegate-namespace)


	+ **namespace** Type: [String](types#String)  A string containing a namespace to unbind all events from.

  As of jQuery 3.0, `.undelegate()` has been deprecated. It was superseded by the [`.off()`](off) method since jQuery 1.7, so its use was already discouraged.

 The `.undelegate()` method is a way of removing event handlers that have been bound using [`.delegate()`](delegate).

  Examples:
---------


 Can bind and unbind events to the colored button.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>undelegate demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
 
<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>
 
</body>
</html>
```
 #### Demo:

   To unbind all delegated events from all paragraphs, write:

 
```
$( "p" ).undelegate();
```
   To unbind all delegated click events from all paragraphs, write:

 
```
$( "p" ).undelegate( "click" );
```
   To undelegate just one previously bound handler, pass the function in as the third argument:

 
```
var foo = function () {
  // Code to handle some kind of event
};
 
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).delegate( "p", "click", foo );
 
// ... foo will no longer be called.
$( "body" ).undelegate( "p", "click", foo );
```
   To unbind all delegated events by their namespace:

 
```
var foo = function() {
  // Code to handle some kind of event
};
 
// Delegate events under the ".whatever" namespace
$( "form" ).delegate( ":button", "click.whatever", foo );
 
$( "form" ).delegate( "input[type='text'] ", "keypress.whatever", foo );
 
// Unbind all events delegated under the ".whatever" namespace
$( "form" ).undelegate( ".whatever" );
```
   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/undelegate>

Category: DOM Insertion, Around
===============================

 
These methods allow us to insert new content surrounding existing content.

    [.unwrap()](../../unwrap "Permalink to .unwrap()")
===================================================

  Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

     [.wrap()](../../wrap "Permalink to .wrap()")
=============================================

  Wrap an HTML structure around each element in the set of matched elements.

     [.wrapAll()](../../wrapall "Permalink to .wrapAll()")
======================================================

  Wrap an HTML structure around all elements in the set of matched elements.

     [.wrapInner()](../../wrapinner "Permalink to .wrapInner()")
============================================================

  Wrap an HTML structure around the content of each element in the set of matched elements.

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/category/manipulation/dom-insertion-around>

.width()
========

  Get the current computed width for the first element in the set of matched elements or set the width of every matched element. #### Contents:

 * [.width()](#width1)
	+ [.width()](#width)
* [.width( value )](#width2)
	+ [.width( value )](#width-value)
	+ [.width( function )](#width-function)

 
 .width()Returns: [Number](types#Number)
----------------------------------------

  **Description:** Get the current computed width for the first element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.width()](#width)


	+ This method does not accept any arguments.

  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.

  ![] Figure 1 - Illustration of the measured width  This method is also able to find the width of the window and document.

 
```
// Returns width of browser viewport
$( window ).width();
 
// Returns width of HTML document
$( document ).width();
```
 Note that `.width()` will always return the content width, regardless of the value of the CSS `box-sizing` property. As of jQuery 1.8, this may require retrieving the CSS width plus `box-sizing` property and then subtracting any potential border and padding on each element when the element has `box-sizing: border-box`. To avoid this penalty, use `.css( "width" )` rather than `.width()`.

  **Note:** Although `style` and `script` tags will report a value for `.width()` or `height()` when absolutely positioned and given `display:block`, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.

   ### Additional Notes:

 * The number returned by dimensions-related APIs, including `.width()`, may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
* The value reported by `.width()` is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using `.width()`. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
 Example:
--------


 Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div>&nbsp;</div>
<p>
  Sample paragraph to test width
</p>
 
<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>
 
</body>
</html>
```
 #### Demo:

   .width( value )Returns: [jQuery](types#jQuery)
-----------------------------------------------

  **Description:** Set the CSS width of each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.width( value )](#width-value)


	+ **value** Type: [String](types#String) or [Number](types#Number)  An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
* ####  version added: [1.4.1](https://api.jquery.com/category/version/1.4.1/)[.width( function )](#width-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [Integer](types#Integer) value ) => [String](types#String) or [Number](types#Number)  A function returning the width to set. Receives the index position of the element in the set and the old width as arguments. Within the function, `this` refers to the current element in the set.

  When calling `.width("value")`, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the width (such as `100px`, `50%`, or `auto`). Note that in modern browsers, the CSS width property does not include padding, border, or margin, unless the `box-sizing` CSS property is used.

 If no explicit unit is specified (like "em" or "%") then "px" is assumed.

 Note that `.width("value")` sets the content width of the box regardless of the value of the CSS `box-sizing` property.

  Example:
--------


 Change the width of each div the first time it is clicked (and change its color).

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demo</title>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/width>

.unwrap()
=========

   .unwrap()Returns: [jQuery](types#jQuery)
-----------------------------------------

  **Description:** Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.unwrap()](#unwrap)


	+ This signature does not accept any arguments.
* ####  version added: [3.0](https://api.jquery.com/category/version/3.0/)[.unwrap( [selector ] )](#unwrap-selector)


	+ **selector** Type: [String](types#String)  A selector to check the parent element against. If an element's parent does not match the selector, the element won't be unwrapped.

  The `.unwrap()` method removes the element's parent and returns the unwrapped content. This is effectively the inverse of the `[.wrap()](wrap)` method. The matched elements (and their siblings, if any) replace their parents within the DOM structure.

  Example:
--------


 Wrap/unwrap a div around each of the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unwrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <button>wrap/unwrap</button>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
var pTags = $( "p" );
$( "button" ).click(function() {
  if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
  } else {
    pTags.wrap( "<div></div>" );
  }
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/unwrap>

.val()
======

  Get the current value of the first element in the set of matched elements or set the value of every matched element. #### Contents:

 * [.val()](#val1)
	+ [.val()](#val)
* [.val( value )](#val2)
	+ [.val( value )](#val-value)
	+ [.val( function )](#val-function)

 
 .val()Returns: [String](types#String) or [Number](types#Number) or [Array](types#Array)
----------------------------------------------------------------------------------------

  **Description:** Get the current value of the first element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.val()](#val)


	+ This method does not accept any arguments.

  The `.val()` method is primarily used to get the values of form elements such as `input`, `select` and `textarea`. When called on an empty collection, it returns `undefined`.

 When the first element in the collection is a `select-multiple` (i.e., a `select` element with the `multiple` attribute set), `.val()` returns an array containing the value of each selected option. **As of jQuery 3.0**, if no options are selected, it returns an empty array; **prior to jQuery 3.0**, it returns `null`.

 For selects, checkboxes and radio buttons, you can use [:checked](checked-selector) to select the right elements. For example:

 
```
// Get the value from the selected option in a dropdown
$( "select#foo option:checked" ).val();
 
// Get the value from a dropdown select directly
$( "select#foo" ).val();
 
// Get the value from a checked checkbox
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// Get the value from a set of radio buttons
$( "input[type=radio][name=baz]:checked" ).val();
```
  **Note:**  At present, using `.val()` on `<textarea>` elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR, however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:

  
```
$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};
```
  Examples:
---------


 Get the single value from a single select and an array of values from a multiple select and display their values.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: red;
    margin: 4px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p></p>
 
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
 
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
 
<script>
function displayVals() {
  var singleValues = $( "#single" ).val();
  var multipleValues = $( "#multiple" ).val() || [];
  // When using jQuery 3:
  // var multipleValues = $( "#multiple" ).val();
  $( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
 
$( "select" ).change( displayVals );
displayVals();
</script>
 
</body>
</html>
```
 #### Demo:

   Find the value of an input box.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input type="text" value="some text">
<p></p>
 
<script>
$( "input" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  })
  .keyup();
</script>
 
</body>
</html>
```
 #### Demo:

   .val( value )Returns: [jQuery](types#jQuery)
---------------------------------------------

  **Description:** Set the value of each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.val( value )](#val-value)


	+ **value** Type: [String](types#String) or [Number](types#Number) or [Array](types#Array)  A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.val( function )](#val-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index, [String](types#String) value ) => [String](types#String)  A function returning the value to set. `this` is the current element. Receives the index position of the element in the set and the old value as arguments.

  This method is typically used to set the values of form fields. 

 `val()` allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like `<input type="checkbox">`, `<input type="radio">`, and `<option>`s inside of a `<select>`. In this case, the `input`s and the `option`s having a `value` that matches one of the elements of the array will be checked or selected while those having a `value` that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type. In the case of `<input type="radio">`s that are part of a radio group and `<select>`s, any previously selected element will be deselected.

 Setting values using this method (or using the native `value` property) does not cause the dispatch of the `change` event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call `.trigger( "change" )` after setting the value.

 The `.val()` method allows setting the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: 

 
```
$( "input[type=text].tags" ).val(function( index, value ) {
  return value.trim();
});
```
 This example removes leading and trailing whitespace from the values of text inputs with a "tags" class.

  Examples:
---------


 Set the value of an input box.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
$( "button" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Use the function argument to modify the value of an input box.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Type something and then click or tab out of the input.</p>
<input type="text" value="type something">
 
<script>
$( "input" ).on( "blur", function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});
</script>
 
</body>
</html>
```
 #### Demo:

   Set a single select, a multiple select, checkboxes and a radio button .

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  body {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
 
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
 
<br>
<input type="checkbox" name="checkboxname" value="check1"> check1
<input type="checkbox" name="checkboxname" value="check2"> check2
<input type="radio" name="r" value="radio1"> radio1
<input type="radio" name="r" value="radio2"> radio2
 
<script>
$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input").val([ "check1", "check2", "radio1" ]);
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/val>

:visible Selector
=================

  visible selector
----------------

  **Description:** Selects all elements that are visible.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)jQuery( ":visible" )

  Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

 Elements with `visibility: hidden` or `opacity: 0` are considered visible, since they still consume space in the layout.

 Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

 This selector is the opposite of the [`:hidden`](hidden-selector) selector. So, every element selected by `:visible` isn't selected by `:hidden` and vice versa.

 All `option` elements are considered hidden, regardless of their `selected` state.

 During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.

 How `:visible` is calculated was changed in jQuery 1.3.2. The [release notes](https://blog.jquery.com/2009/02/20/jquery-1-3-2-released/) outline the changes in more detail.

 jQuery 3 slightly modifies the meaning of `:visible` (and therefore of [`:hidden`](hidden-selector)). Starting with this version, elements will be considered `:visible` if they have any layout boxes, including those of zero width and/or height. For example, `br` elements and inline elements with no content will be selected by the `:visible` selector.

  ### Additional Notes:

 * Because `:visible` is a jQuery extension and not part of the CSS specification, queries using `:visible` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method. To achieve the best performance when using `:visible` to select elements, first select the elements using a pure CSS selector, then use [`.filter(":visible")`](filter).
* Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.
 Example:
--------


 Make all visible divs turn yellow on click.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>visible demo</title>
  <style>
  div {
    width: 50px;
    height: 40px;
    margin: 5px;
    border: 3px outset green;
    float: left;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
 
<script>
$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/visible-selector>

.wrap()
=======

   .wrap( wrappingElement )Returns: [jQuery](types#jQuery)
--------------------------------------------------------

  **Description:** Wrap an HTML structure around each element in the set of matched elements.

 * ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.wrap( wrappingElement )](#wrap-wrappingElement)


	+ **wrappingElement** Type: [Selector](types#Selector) or [htmlString](types#htmlString) or [Element](types#Element) or [jQuery](types#jQuery)  A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements. When you pass a jQuery collection containing more than one element, or a selector matching more than one element, the first element will be used.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.wrap( function )](#wrap-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index ) => [String](types#String) or [jQuery](types#jQuery)  A callback function returning the HTML content or jQuery object to wrap around the matched elements. Receives the index position of the element in the set as an argument. Within the function, `this` refers to the current element in the set.

  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. A copy of this 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.

 Consider the following HTML:

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 Using `.wrap()`, we can insert an HTML structure around the inner `<div>` elements like so:

 
```
$( ".inner" ).wrap( "<div class='new'></div>" );
```
 The new `<div>` element is created on the fly and added to the DOM. The result is a new `<div>` wrapped around each matched element:

 
```
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>
```
 The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:

 
```
$( ".inner" ).wrap(function() {
  return "<div class='" + $( this ).text() + "'></div>";
});
```
 This will cause each `<div>` to have a class corresponding to the text it wraps:

 
```
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>
```
  Examples:
---------


 Wrap a new div around all of the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrap( "<div></div>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.>

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px blue solid;
    margin: 2px;
    padding: 2px;
  }
  p {
    background: yellow;
    margin: 2px;
    padding: 2px;
  }
  strong {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
 
<script>
$( "span" ).wrap( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Wrap a new div around all of the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrap( document.createElement( "div" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
  }
  .doublediv {
    border-color: red;
  }
  p {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div class="doublediv"><div></div></div>
 
<script>
$( "p" ).wrap( $( ".doublediv" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/wrap>

.wrapAll()
==========

   .wrapAll( wrappingElement )Returns: [jQuery](types#jQuery)
-----------------------------------------------------------

  **Description:** Wrap an HTML structure around all elements in the set of matched elements.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.wrapAll( wrappingElement )](#wrapAll-wrappingElement)


	+ **wrappingElement** Type: [Selector](types#Selector) or [htmlString](types#htmlString) or [Element](types#Element) or [jQuery](types#jQuery)  A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.wrapAll( function )](#wrapAll-function)


	+ **function** Type: [Function](types#Function)() => [String](types#String) or [jQuery](types#jQuery)  A callback function returning the HTML content or jQuery object to wrap around all the matched elements. Within the function, `this` refers to the first element in the set. **Prior to jQuery 3.0**, the callback was incorrectly called for every element in the set and received the index position of the element in the set as an argument.

  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.

 Consider the following HTML:

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 Using `.wrapAll()`, we can insert an HTML structure around the inner `<div>` elements like so:

 
```
$( ".inner" ).wrapAll( "<div class='new' />");
```
 The new `<div>` element is created on the fly and added to the DOM. The result is a new `<div>` wrapped around all matched elements:

 
```
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>
```
  Examples:
---------


 Wrap a new div around all of the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapAll demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapAll( "<div></div>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapAll demo</title>
  <style>
  div {
    border: 2px blue solid;
    margin: 2px;
    padding: 2px;
  }
  p {
    background: yellow;
    margin: 2px;
    padding: 2px;
  }
  strong {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
 
<script>
$( "span").wrapAll( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Wrap a new div around all of the paragraphs.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapAll demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapAll( document.createElement( "div" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapAll demo</title>
  <style>
  div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
  }
  .doublediv {
    border-color: red;
  }
  p {
    background: yellow;
    margin: 4px;
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div class="doublediv"><div></div></div>
 
<script>
$( "p" ).wrapAll( $( ".doublediv" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/wrapAll>

.wrapInner()
============

   .wrapInner( wrappingElement )Returns: [jQuery](types#jQuery)
-------------------------------------------------------------

  **Description:** Wrap an HTML structure around the content of each element in the set of matched elements.

 * ####  version added: [1.2](https://api.jquery.com/category/version/1.2/)[.wrapInner( wrappingElement )](#wrapInner-wrappingElement)


	+ **wrappingElement** Type: [htmlString](types#htmlString) or [Selector](types#Selector) or [jQuery](types#jQuery) or [Element](types#Element)  An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the content of the matched elements.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.wrapInner( function )](#wrapInner-function)


	+ **function** Type: [Function](types#Function)( [Integer](types#Integer) index ) => [String](types#String)  A callback function which generates a structure to wrap around the content of the matched elements. Receives the index position of the element in the set as an argument. Within the function, `this` refers to the current element in the set.

  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.

 Consider the following HTML:

 
```
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
 Using `.wrapInner()`, we can insert an HTML structure around the content of each inner `<div>` elements like so:

 
```
$( ".inner" ).wrapInner( "<div class='new'></div>");
```
 The new `<div>` element is created on the fly and added to the DOM. The result is a new `<div>` wrapped around the content of each matched element:

 
```
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>
```
 The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the content of the corresponding element. For example:

 
```
$( ".inner" ).wrapInner(function() {
  return "<div class='" + this.nodeValue + "'></div>";
});
```
 This will cause each `<div>` to have a class corresponding to the text it wraps:

 
```
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>
```
 **Note:** When passing a selector string to the `.wrapInner()` function, the expected input is well formed HTML with correctly closed tags. Examples of valid input include:

 
```
$( elem ).wrapInner( "<div class='test'></div>" );
$( elem ).wrapInner( "<div class=\"test\"></div>" );
```
  Examples:
---------


 Selects all paragraphs and wraps a bold tag around each of its contents.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner demo</title>
  <style>
  p {
    background: #bbf;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapInner( "<b></b>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Wraps a newly created tree of objects around the inside of the body.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner demo</title>
  <style>
  div {
    border: 2px green solid;
    margin: 2px;
    padding: 2px;
  }
  p {
    background: yellow;
    margin: 2px;
    padding: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Plain old text, or is it?
 
<script>
$( "body" ).wrapInner( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>
```
 #### Demo:

   Selects all paragraphs and wraps a bold tag around each of its contents.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner demo</title>
  <style>
  p {
    background: #9f9;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapInner( document.createElement( "b" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Selects all paragraphs and wraps a jQuery object around each of its contents.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrapInner demo</title>
  <style>
  p {
    background: #9f9;
  }
  .red {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrapInner( $( "<span class='red'></span>" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/wrapInner>

.index()
========

   .index()Returns: [Integer](../types#Integer)
---------------------------------------------

  **Description:** Search for a given element from among the matched elements.

 * ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.index()](#index)


	+ This signature does not accept any arguments.
* ####  version added: [1.4](https://api.jquery.com/category/version/1.4/)[.index( selector )](#index-selector)


	+ **selector** Type: [Selector](../types#Selector)  A selector representing a jQuery collection in which to look for an element.
* ####  version added: [1.0](https://api.jquery.com/category/version/1.0/)[.index( element )](#index-element)


	+ **element** Type: [Element](../types#Element) or [jQuery](../types#jQuery)  The DOM element or first element within the jQuery object to look for.

  #### Return Values

 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.

 If `.index()` is called on a collection of elements and a DOM element or jQuery object is passed in, `.index()` returns an integer indicating the position of the passed element relative to the original collection.

 If a selector string is passed as an argument, `.index()` returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, `.index()` will return -1.

 #### Detail

 The complementary operation to `.get()`, which accepts an index and returns a DOM node, `.index()` can take a DOM node and returns an index. Suppose we have a simple unordered list on the page:

 
```
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
```
 If we retrieve one of the three list items (for example, through a DOM function or as the context to an event handler), `.index()` can search for this list item within the set of matched elements:

 
```
var listItem = document.getElementById( "bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
```
 We get back the zero-based position of the list item:

  `Index: 1` 

 Similarly, if we retrieve a jQuery object consisting of one of the three list items, `.index()` will search for that list item:

 
```
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
```
 We get back the zero-based position of the list item:

  `Index: 1` 

 Note that if the jQuery collection used as the `.index()` method's argument contains more than one element, the first element within the matched set of elements will be used.

 
```
var listItems = $( "li" ).slice( 1 );
alert( "Index: " + $( "li" ).index( listItems ) );
```
 We get back the zero-based position of the first list item within the matched set:

  `Index: 1` 

 If we use a string as the `.index()` method's argument, it is interpreted as a jQuery selector string. The first element among the object's matched elements which also matches this selector is located.

 
```
var listItem = $( "#bar" );
alert( "Index: " + listItem.index( "li" ) );
```
 We get back the zero-based position of the list item:

  `Index: 1` 

 If we omit the argument, `.index()` will return the position of the first element within the set of matched elements in relation to its siblings:

 
```
alert( "Index: " + $( "#bar" ).index() );
```
 Again, we get back the zero-based position of the list item:

  `Index: 1` 

  Examples:
---------


 On click, returns the index (zero-based) of that div in the page.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    background: yellow;
    margin: 5px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
 
<script>
$( "div" ).click(function() {
  // `this` is the DOM element that was clicked
  var index = $( "div" ).index( this );
  $( "span" ).text( "That was div index #" + index );
});
</script>
 
</body>
</html>
```
 #### Demo:

   Returns the index for the element with ID bar.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
 
<script>
var listItem = $( "#bar" );
$( "div" ).html( "Index: " + $( "li" ).index( listItem ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Returns the index for the first item in the jQuery collection.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
 
<script>
var listItems = $( "li" ).slice( 1 );
$( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Returns the index for the element with ID bar in relation to all <li> elements.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
 
<script>
$( "div" ).html( "Index: " +  $( "#bar" ).index( "li" ) );
</script>
 
</body>
</html>
```
 #### Demo:

   Returns the index for the element with ID bar in relation to its siblings.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
 
<script>
var barIndex = $( "#bar" ).index();
$( "div" ).html( "Index: " +  barIndex );
</script>
 
</body>
</html>
```
 #### Demo:

   Returns -1, as there is no element with ID foobar.

 
```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>index demo</title>
  <style>
  div {
    font-weight: bold;
    color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
 
<script>
var foobar = $( "li" ).index( $( "#foobar" ) );
$( "div" ).html( "Index: " + foobar );
</script>
 
</body>
</html>
```
 #### Demo:

   

 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/index/index>

Ajax Events
===========

 Ajax requests produce a number of different events that you can subscribe to. Here's a full list of the events and in what order they are triggered.

 There are two types of events:

 ### Local Events

 These are callbacks that you can subscribe to within the Ajax request object, like so:

 
```
 $.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });
```
 ### Global Events

 These events are triggered on the `document`, calling any handlers which may be listening. You can listen for these events like so:

 
```
 $(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

```
 Global events can be disabled for a particular Ajax request by passing in the global option, like so:

 
```
 $.ajax({
   url: "test.html",
   global: false,
   // ...
 });
```
 ### Events

 This is the full list of Ajax events, and in the order in which they are triggered. The indented events are triggered for each and every Ajax request (unless a global option has been set). The ajaxStart and ajaxStop events are events that relate to all Ajax requests together. 

 * **ajaxStart** (Global Event)  
This event is triggered if an Ajax request is started and no other Ajax requests are currently running.
	+ **beforeSend** (Local Event)  
	This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
	+ **ajaxSend** (Global Event)  
	This global event is also triggered before the request is run.
	+ **success** (Local Event)  
	This event is only called if the request was successful (no errors from the server, no errors with the data).
	+ **ajaxSuccess** (Global Event)  
	This event is also only called if the request was successful.
	+ **error** (Local Event)  
	This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
	+ **ajaxError** (Global Event)  
	This global event behaves the same as the local error event.
	+ **complete** (Local Event)  
	This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
	+ **ajaxComplete** (Global Event)  
	This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
* **ajaxStop** (Global Event)  
This global event is triggered if there are no more Ajax requests being processed.



 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/Ajax_Events>

Types
=====

 This page documents data types appearing in jQuery function signatures, whether defined by JavaScript itself or further restricted by jQuery. Unless explicitly stated otherwise, jQuery functions require primitive values where applicable, and do not accept their Object-wrapped forms. If you want to study these concepts in depth, take a look at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript). 

 You should be able to try out most of the examples below by just copying them to your browser's JavaScript Console. 

 Whenever an example mentions that a type defaults to a boolean value, the result is good to know when using that type in a boolean context: 

 
```
var x = "";
if ( x ) {
  console.log( "x defaulted to true" );
} else {
  console.log( "x defaulted to false" );
}
```
 In this case, `"x defaulted to false"` is printed. 

 To keep the examples short, the invert ("not") operator and double-negation are used to show a boolean context: 

 
```
var x = "";
!x // true
!!x // false (Double negation: Since "not (empty string)" is true, negating that makes it false)
```
 On to the actual types. 

 Contents
--------

 1. [Anything](#Anything)
2. [String](#String)
	* [Quoting](#Quoting)
	* [Built-in Methods](#Built-in_Methods)
	* [Length Property](#Length_Property)
	* [Boolean Default](#Boolean_Default)
3. [htmlString](#htmlString)
4. [Number](#Number)
	* [Boolean Default](#Boolean_Default_2)
	* [Math](#Math)
	* [Parsing Numbers](#Parsing_Numbers)
	* [Numbers to Strings](#Numbers_to_Strings)
	* [NaN and Infinity](#NaN_and_Infinity)
	* [Integer](#Integer)
	* [Float](#Float)
5. [Boolean](#Boolean)
6. [Object](#Object)
	* [Dot Notation](#Dot_Notation)
	* [Array Notation](#Array_Notation)
	* [Iteration](#Iteration)
	* [Boolean default](#Boolean_default_3)
	* [Prototype](#Prototype)
7. [Array](#Array)
	* [Iteration](#Iteration_2)
	* [Boolean Default](#Boolean_Default_4)
	* [Array<Type> Notation](#Array.3CType.3E_Notation)
8. [Array-Like Object](#ArrayLikeObject)
9. [PlainObject](#PlainObject)
10. [Date](#Date)
11. [Function](#Function)
	* [Arguments](#Arguments)
	* [Context, Call and Apply](#Context.2C_Call_and_Apply)
	* [Scope](#Scope)
	* [Closures](#Closures)
	* [Proxy Pattern](#Proxy_Pattern)
12. [Error](#Error)
13. [Selector](#Selector)
14. [Event](#Event)
15. [Element](#Element)
16. [Text](#Text)
17. [jQuery](#jQuery)
18. [XMLHttpRequest](#XMLHttpRequest)
19. [jqXHR](#jqXHR)
20. [Thenable](#Thenable)
21. [Deferred Object](#Deferred)
22. [Promise Object](#Promise)
23. [Callbacks Object](#Callbacks)
24. [XML Document](#XMLDocument)
25. [Qunit's Assert Object](#Assert)

  Anything
---------

 The **Anything** virtual type is used in jQuery documentation to indicate that any type can be used or should be expected. 

  String
-------

 A string in JavaScript is an immutable primitive value that contains none, one or many characters. 

 
```
"I'm a String in JavaScript!"
'So am I!'
```
 The type of a string is "string". 

 
```
typeof "some string"; // "string"
```
 ###  Quoting

 A string can be defined using single or double quotes. You can nest single quotes inside of double quotes, and the other way around. To mix double quotes with double quotes (or single with single), the nested ones have to be escaped with a backslash. 

 
```
"You make 'me' sad."
'That\'s "cranking" good fun!'
"<a href=\"home\">Home</a>"
```
 ###  Built-in Methods

 A string in JavaScript has some built-in methods to manipulate the string, though the result is always a new string - or something else, eg. split returns an [array](types#Array "Types"). 

 
```
"hello".charAt( 0 ) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace( /e|o/g, "x" ) // "hxllx"
"1,2,3".split( "," ) // [ "1", "2", "3" ]
```
 ###  Length Property

 All strings have a length property. 

 
```
"Hello".length // 5
"".length // 0
```
 ###  Boolean Default

 An empty string defaults to false: 

 
```
!"" // true
!!"" // false
!"hello" // false
!"true" // false
!new Boolean( false ) // false
```
  htmlString
-----------

 A string is designated **htmlString** in jQuery documentation when it is used to represent one or more DOM elements, typically to be created and inserted in the document. When passed as an argument of the `jQuery()` function, the string is identified as HTML if it starts with `<tag ... >`) and is parsed as such until the final `>` character. Prior to jQuery 1.9, a string was considered to be HTML if it contained `<tag ... >` *anywhere within the string*.

 When a string is passed as an argument to a manipulation method such as `.append()`, it is always considered to be HTML since jQuery's other common interpretation of a string (CSS selectors) does not apply in those contexts.

 For explicit parsing of a string to HTML, the `[$.parseHTML()](jquery.parsehtml)` method is available as of jQuery 1.8.

 
```
// Appends <b>hello</b>:
$( "<b>hello</b>" ).appendTo( "body" );
 
// Appends <b>hello</b>:
$( "<b>hello</b>bye" ).appendTo( "body" );
 
// Syntax error, unrecognized expression: bye<b>hello</b>
$( "bye<b>hello</b>" ).appendTo( "body" );
 
// Appends bye<b>hello</b>:
$( $.parseHTML( "bye<b>hello</b>" ) ).appendTo( "body" );
 
// Appends <b>hello</b>wait<b>bye</b>:
$( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" );
```
  Number
-------

 Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable primitive values, just like [strings](#String). All operators common in c-based languages are available to work with numbers (+, -, \*, /, %, =, +=, -=, \*=, /=, ++, --). 

 
```
12
3.543
```
 The type of a number is "number". 

 
```
typeof 12 // "number"
typeof 3.543 // "number"
```
 ###  Boolean Default

 If a number is zero, it defaults to false: 

 
```
!0 // true
!!0 // false
!1 // false
!-1 // false
```
 Due to the implementation of numbers as double-precision values, the following result is not an error: 

 
```
0.1 + 0.2 // 0.30000000000000004
```
   
 

 ###  Math

 JavaScript provides utilities to work with numbers in the Math object: 

 
```
Math.PI // 3.141592653589793
Math.cos( Math.PI ) // -1
```
 ###  Parsing Numbers

 parseInt and parseFloat help parsing strings into numbers. Both do some implicit conversion if the base isn't specified: 

 
```
parseInt( "123" ) = 123 // (implicit decimal)
parseInt( "010" ) = 8 // (implicit octal)
parseInt( "0xCAFE" ) = 51966 // (implicit hexadecimal)
parseInt( "010", 10 ) = 10 // (explicit decimal)
parseInt( "11", 2 ) = 3 // (explicit binary)
parseFloat( "10.10" ) = 10.1
```
 ###  Numbers to Strings

 When appending numbers to string, the result is always a string. The operator is the same, so be careful: If you want to add numbers and then append them to a string, put parentheses around the numbers: 

 
```
"" + 1 + 2; // "12"
"" + ( 1 + 2 ); // "3"
"" + 0.0000001; // "1e-7"
parseInt( 0.0000001 ); // 1 (!)
```
 Or you use the String class provided by javascript, which try to parse a value as string: 

 
```
String( 1 ) + String( 2 ); // "12"
String( 1 + 2 ); // "3"
```
 ###  NaN and Infinity

 Parsing something that isn't a number results in NaN. isNaN helps to detect those cases: 

 
```
parseInt( "hello", 10 ) // NaN
isNaN( parseInt("hello", 10) ) // true
```
 Division by zero results in Infinity: 

 
```
1 / 0 // Infinity
```
 Both NaN and Infinity are of type "number": 

 
```
typeof NaN // "number"
typeof Infinity // "number"
```
 Note that NaN compares in a strange way: 

 
```
NaN === NaN // false (!)
```
 But: 

 
```
Infinity === Infinity // true
```
 ###  Integer

 An integer is a plain Number type, but whenever explicitly mentioned, indicates that a non-floating-point number is expected. 

 ###  Float

 A float is a plain Number type, just as Integer, but whenever explicitly mentioned, indicates that a floating-point number is expected. 

   
 

  Boolean
--------

 A boolean in JavaScript can be either true or false: 

 
```
if ( true ) console.log( "always!" );
if ( false ) console.log( "never!" );
```
  Object
-------

 Everything in JavaScript is an object, though some are more objective (haha). The easiest way to create an object is the object literal: 

 
```
var x = {};
var y = {
  name: "Pete",
  age: 15
};
```
 The type of an object is "object": 

 
```
typeof {} // "object"
```
 ###  Dot Notation

 You can write and read properties of an object using the dot notation: 

 
```
y.name // "Pete"
y.age // 15
x.name = y.name + " Pan" // "Pete Pan"
x.age = y.age + 1 // 16
```
 ###  Array Notation

 Or you write and read properties using the array notation, which allows you to dynamically choose the property: 

 
```
var operations = {
  increase: "++",
  decrease: "--"
};
var operation = "increase";
operations[ operation ] // "++"
operations[ "multiply" ] = "*"; // "*"
```
 ###  Iteration

 Iterating over objects is easy with the for-in-loop: 

 
```
var obj = {
  name: "Pete",
  age: 15
};
for( key in obj ) {
  alert( "key is " + [ key ] + ", value is " + obj[ key ] );
}
```
 Note that for-in-loop can be spoiled by extending Object.prototype (see [Object.prototype is verboten](http://erik.eae.net/archives/2005/06/06/22.13.54/ "http://erik.eae.net/archives/2005/06/06/22.13.54/")) so take care when using other libraries. 

 jQuery provides a generic [*each* function](jquery.each) to iterate over properties of objects, as well as elements of arrays: 

 
```
jQuery.each( obj, function( key, value ) {
  console.log( "key", key, "value", value );
});
```
 The drawback is that the callback is called in the context of each value and you therefore lose the context of your own object if applicable. More on this below at Functions. 

 ###  Boolean default

 An object, no matter if it has properties or not, never defaults to false: 

 
```
!{} // false
!!{} // true
```
 ###  Prototype

 All objects have a prototype property. Whenever the interpreter looks for a property, it also checks in the object's prototype if the property is not found on the object itself. jQuery uses the prototype extensively to add methods to jQuery instances. Internally, jQuery makes `jQuery.fn` an alias of `jQuery.prototype` so you can use either one (though plugin developers have standardized on `fn`). 

 
```
var form = $("#myform");
console.log( form.clearForm ); // undefined
 
// jQuery.fn === jQuery.prototype
jQuery.fn.clearForm = function() {
  return this.find( ":input" ).each(function() {
    this.value = "";
  }).end();
};
 
// works for all instances of jQuery objects, because
// the new method was added to the prototype
console.log( form.clearForm ); // function
form.clearForm();
```
  Array
------

 Arrays in JavaScript are mutable lists with a few built-in methods. You can define arrays using the array literal: 

 
```
var x = [];
var y = [ 1, 2, 3 ];
```
 The type of an array is "object": 

 
```
typeof []; // "object"
typeof [ 1, 2, 3 ]; // "object"
```
 Reading and writing elements to an array uses the array-notation: 

 
```
x[ 0 ] = 1;
y[ 2 ] // 3
```
 ###  Iteration

 An array has a length property that is useful for iteration: 

 
```
for ( var i = 0; i < a.length; i++ ) {
  // Do something with a[i]
}
```
 When performance is critical, reading the length property only once can help to speed things up. This should be used only when a performance bottleneck was discovered: 

 
```
for ( var i = 0, j = a.length; i < j; i++ ) {
  // Do something with a[i]
}
```
 Another variation defines a variable that is filled for each iteration, removing the array-notation from the loop-body. It does not work when the array contains 0 or empty strings! 

 
```
for ( var i = 0, item; item = a[i]; i++ ) {
  // Do something with item
}
```
 jQuery provides a generic [*each* function](jquery.each) to iterate over element of arrays, as well as properties of objects: 

 
```
var x = [ 1, 2, 3 ];
jQuery.each( x, function( index, value ) {
  console.log( "index", index, "value", value );
});
```
 The drawback is that the callback is called in the context of each value and you therefore lose the context of your own object if applicable. More on this below at Functions. 

 The length property can also be used to add elements to the end of an array. That is equivalent to using the push-method: 

 
```
var x = [];
x.push( 1 );
x[ x.length ] = 2;
x // [ 1, 2 ]
```
 You'll see both variations a lot when looking through JavaScript library code. 

 Other built-in methods are reverse, join, shift, unshift, pop, slice, splice and sort: 

 
```
var x = [ 0, 3, 1, 2 ];
x.reverse()      // [ 2, 1, 3, 0 ]
x.join(" – ")    // "2 - 1 - 3 - 0"
x.pop()          // [ 2, 1, 3 ]
x.unshift( -1 )  // [ -1, 2, 1, 3 ]
x.shift()        // [ 2, 1, 3 ]
x.sort()         // [ 1, 2, 3 ]
x.splice( 1, 2 ) // [ 2, 3 ]
```
 Note: .unshift() method does not return a length property in Internet Explorer. 

 ###  Boolean Default

 An array, no matter if it has elements or not, never defaults to false: 

 
```
![] // false
!![] // true
```
 ###  Array<Type> Notation

 In the jQuery API you'll often find the notation of Array<Type>: 

 
```
dragPrevention    Array<String>

```
 This indicates that the method doesn't only expect an array as the argument, but also specifies the expected type. The notation is borrowed from Java 5's generics notation (or C++ templates). 

 Array-Like Object
-----------------

 Either a true JavaScript Array or a JavaScript Object that contains a nonnegative integer `length` property and index properties from `0` up to `length - 1`. This latter case includes array-like objects commonly encountered in web-based code such as the `arguments` object and the `NodeList` object returned by many DOM methods.

 When a jQuery API accepts either plain Objects or Array-Like objects, a plain Object with a numeric `length` property will trigger the Array-Like behavior.

  PlainObject
------------

 The PlainObject type is a JavaScript object containing zero or more key-value pairs. The plain object is, in other words, an `Object` object. It is designated "plain" in jQuery documentation to distinguish it from other kinds of JavaScript objects: for example, `null`, user-defined arrays, and host objects such as `document`, all of which have a `typeof` value of "object." The `[jQuery.isPlainObject()](jquery.isplainobject)` method identifies whether the passed argument is a plain object or not, as demonstrated below: 

 
```
  var a = [];
  var d = document;
  var o = {};
 
  typeof a; // object
  typeof d; // object
  typeof o; // object
 
  jQuery.isPlainObject( a ); // false
  jQuery.isPlainObject( d ); // false
  jQuery.isPlainObject( o ); // true
```
 Null
----

 The `null` keyword is a JavaScript literal that is commonly used to express the absence of an intentional value.

  Date
-----

 The Date type is a JavaScript object that represents a single moment in time. Date objects are instantiated using their constructor function, which by default creates an object that represents the current date and time. 

 
```
new Date();
```
 To create a Date object for an alternative date and time, pass numeric arguments in the following order: year, month, day, hour, minute, second, millisecond — although note that the month is zero-based, whereas the other arguments are one-based. The following creates a Date object representing January 1st, 2014, at 8:15. 

 
```
new Date( 2014, 0, 1, 8, 15 );
```
  Function
---------

 A function in JavaScript can be either named or anonymous. Any function can be assigned to a variable or passed to a method, but passing member functions this way can cause them to be called in the context of another object (i.e. with a different "this" object). 

 
```
function named() {}
var handler = function() {}
```
 You see a lot of anonymous functions in jQuery code: 

 
```
$( document ).ready(function() {});
$( "a" ).click(function() {});
$.ajax({
  url: "someurl.php",
  success: function() {}
});
```
 The type of a function is "function". 

 ###  Arguments

 Inside a function a special variable "arguments" is always available. It's similar to an array in that it has a length property, but it lacks the built-in methods of an array. The elements of the pseudo-array are the argument of the function call. 

 
```
function log( x ) {
  console.log( typeof x, arguments.length );
}
log(); // "undefined", 0
log( 1 ); // "number", 1
log( "1", "2", "3" ); // "string", 3
```
 The arguments object also has a callee property, which refers to the function you're inside of. For instance: 

 
```
var awesome = function() { return arguments.callee; }
awesome() === awesome // true
```
 ###  Context, Call and Apply

 In JavaScript, the variable "this" always refers to the current context. By default, "this" refers to the window object. Within a function this context can change, depending on how the function is called. 

 All event handlers in jQuery are called with the handling element as the context. 

 
```
$( document ).ready(function() {
  // this refers to window.document
});
$( "a" ).click(function() {
  // this refers to an anchor DOM element
});
```
 You can specify the context for a function call using the function-built-in methods call and apply. The difference between them is how they pass arguments. Call passes all arguments through as arguments to the function, while apply accepts an array as the arguments. 

 
```
function scope() {
  console.log( this, arguments.length );
}
scope() // window, 0
scope.call( "foobar", [ 1, 2 ] ); // "foobar", 1
scope.apply( "foobar", [ 1, 2 ] ); // "foobar", 2
```
 ###  Scope

 In JavaScript, all variables defined inside a function are only visible inside that function scope. Consider the following example: 

 
```
// global
var x = 0;
(function() {
  // private
  var x = 1;
  console.log( x ); // 1
})();
console.log( x ); // 0
```
 It defines a variable *x* in the global scope, then defines an anonymous function and executes it immediately (the additional parentheses are required for immediate execution). Inside the function another variable *x* is defined with a different value. It is only visible within that function and doesn't overwrite the global variable. 

 ###  Closures

 Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope. In the following example, the variable *counter* is visible within the create, increment, and print functions, but not outside of them. 

 
```
function create() {
  var counter = 0;
  return {
    increment: function() {
      counter++;
    },
    print: function() {
      console.log( counter );
    }
  }
}
var c = create();
c.increment();
c.print(); // 1
```
 The pattern allows you to create objects with methods that operate on data that isn't visible to the outside—the very basis of object-oriented programming. 

 ###  Proxy Pattern

 Combining the above knowledge gives you as a JavaScript developer quite a lot of power. One way to combine that is to implement a proxy pattern in JavaScript, enabling the basics of aspect-oriented programming (AOP): 

 
```
(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log( this, arguments );
    return proxied.apply( this, arguments );
  };
})();
```
 The above wraps its code in a function to hide the "proxied"-variable. It saves jQuery's setArray-method in a closure and overwrites it. The proxy then logs all calls to the method and delegates the call to the original. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method. 

  Callback
---------

 A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered. jQuery's event system uses such callbacks everywhere: 

 
```
$( "body" ).click(function( event ) {
  console.log( "clicked: " + event.target );
});
```
 Most callbacks provide arguments and a context. In the event-handler example, the callback is called with one argument, an Event. The context is set to the handling element, in the above example, document.body. 

 Some callbacks are required to return something, others make that return value optional. To prevent a form submission, a submit event handler can return false: 

 
```
$( "#myform" ).submit(function() {
  return false;
});
```
 Instead of always returning false, the callback could check fields of the form for validity, and return false only when the form is invalid. 

  Error
------

 An instance of an Error object is thrown as an exception when a runtime error occurs. Error can also be used as base to define user custom exception classes. In JavaScript an error can be thrown as shown below: 

 
```
throw new Error( "The argument provided is incorrect" );
```
 An error can also be thrown by the engine under some circumstances. For example, when trying to access a property of `null`: 

 
```
var obj = null;
console.log( obj.foo() );
```
  Selector
---------

 A selector is used in jQuery to select DOM elements from a DOM document. That document is, in most cases, the DOM document present in all browsers, but can also be an XML document received via Ajax. 

 The selectors are a composition of CSS and custom additions. All selectors available in jQuery are documented on the [Selectors API page](category/selectors "Selectors"). 

 There are lot of plugins that leverage jQuery's selectors in other ways. The validation plugin accepts a selector to specify a dependency, whether an input is required or not: 

 
```
emailrules: {
  required: "#email:filled"
}
```
 This would make a checkbox with name "emailrules" required only if the user entered an email address in the email field, selected via its id, filtered via a custom selector ":filled" that the validation plugin provides. 

 If Selector is specified as the type of an argument, it accepts everything that the jQuery constructor accepts, eg. Strings, Elements, Lists of Elements. 

 Event
-----

 jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods. 

 Those properties are all documented, and accompanied by examples, on the [Event object](category/events/event-object "Events") page. 

 The standard events in the Document Object Model are: `blur`, `focus`, `load`, `resize`, `scroll`, `unload`, `beforeunload`, `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `change`, `select`, `submit`, `keydown`, `keypress,` and `keyup`. Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any. 

  Element
--------

 An element in the Document Object Model (DOM) can have attributes, text, and children. It provides methods to traverse the parent and children and to get access to its attributes. Due to inconsistencies in DOM API specifications and implementations, however, those methods can be a challenge to use. jQuery provides a "wrapper" around those elements to help interacting with the DOM. But sometimes you will be working directly with DOM elements, or see methods that (also) accept DOM elements as arguments. 

 Whenever you call jQuery's `.each()` method or one of its event methods on a jQuery collection, the context of the callback function — `this` — is set to a DOM element. 

 Some properties of DOM elements are quite consistent among browsers. Consider this example of a simple onblur validation: 

 
```
$( "input[type='text']" ).on( "blur", function() {
  if( !this.value ) {
    alert( "Please enter some text!" );
  }
});
```
 You could replace `this.value` with `$(this).val()` to access the value of the text input via jQuery, but in that case you wouldn't gain anything. 

  Text
-----

 Text is a node of the Document Object Model (DOM) that represents the textual content of an [element](#Element) or an attribute. Consider the following code: 

 
```
<p id="target"><b>Hello</b> world</p>
```
 If you retrieve the children of the paragraph of the example as follows: 

 
```
var children = document.getElementById( "target" ).childNodes;
```
 you obtain two children. The first one is the [element](#Element) representing the `b` tag. The second child is a text node containing the string " world". 

  jQuery
-------

 A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from a document. Since jQuery methods often use CSS selectors to match elements from a document, the set of elements in a jQuery object is often called a set of "matched elements" or "selected elements". 

 The jQuery object itself behaves much like an array; it has a `length` property and the elements in the object can be accessed by their numeric indices `[0]` to `[length-1]`. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as `join()`. 

 Most frequently, you will use the jQuery() function to create a jQuery object. `jQuery()` can also be accessed by its familiar single-character alias of `$()`, unless you have called `jQuery.noConflict()` to disable this option. Many jQuery methods return the jQuery object itself, so that method calls can be chained: 

 In API calls that return `jQuery`, the value returned will be the original jQuery object unless otherwise documented by that API. API methods such as `.filter()` or `.not()` modify their incoming set and thus return a new jQuery object. 

 
```
$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );
```
 Whenever you use a "destructive" jQuery method that potentially changes the set of elements in the jQuery object, such as `.filter()` or `.find()`, that method actually returns a new jQuery object with the resulting elements. To return to the previous jQuery object, you use the `.end()` method. 

 A jQuery object may be empty, containing no DOM elements. You can create an empty jQuery object with `$()` (that is, passing no arguments at all). A jQuery object may also be empty if a selector doesn't select any elements, or if a chained method filters out all the elements. It is not an error; any further methods called on that jQuery object simply have no effect since they have no elements to act upon. So, in this example if there are no bad entries on the page then no elements will be colored red: 

 
```
$( ".badEntry" ).css({ color: "red" });
```
  XMLHttpRequest
---------------

 Some of jQuery's Ajax functions return the native XMLHttpRequest (XHR) object, or pass it as an argument to success/error/complete handlers, so that you can do additional processing or monitoring on the request. Note that Ajax functions only return or pass an XHR object when an XHR object is actually used in the request. For example, JSONP requests and cross-domain GET requests use a script element rather than an XHR object. 

 Although the XHR object is a standard, there are variations in its behavior on different browsers. Refer to the WHATWG site and Mozilla Developer Network for more information: 

 * [WHATWG living standard](https://xhr.spec.whatwg.org/ "https://xhr.spec.whatwg.org/")
* [Mozilla Developer Network](https://developer.mozilla.org/docs/DOM/XMLHttpRequest "https://developer.mozilla.org/docs/DOM/XMLHttpRequest")

  jqXHR
------

 As of jQuery 1.5, the [$.ajax()](jquery.ajax) method returns the jqXHR object, which is a superset of the XMLHTTPRequest object. For more information, see the [jqXHR section of the $.ajax entry](jquery.ajax#jqXHR) 

 Thenable
--------

 Any object that has a `then` method.

  Deferred Object
----------------

 As of jQuery 1.5, the [Deferred](category/deferred-object) object provides a way to register multiple callbacks into self-managed callback queues, invoke callback queues as appropriate, and relay the success or failure state of any synchronous or asynchronous function. 

  Promise Object
---------------

 This object provides a subset of the methods of the [Deferred](category/deferred-object) object ([`then`](deferred.then), [`done`](deferred.done), [`fail`](deferred.fail), [`always`](deferred.always), [`pipe`](deferred.pipe), [`progress`](deferred.progress), [`state`](deferred.state) and [`promise`](deferred.promise)) to prevent users from changing the state of the Deferred. 

 Callbacks Object
----------------

 A multi-purpose object that provides a powerful way to manage callback lists. It supports adding, removing, firing, and disabling callbacks. The Callbacks object is created and returned by the `$.Callbacks` function and subsequently returned by most of that function's methods. 

 Document
--------

 A document object created by the browser's DOM parser, usually from a string representing HTML or XML.

 XML Document
------------

 A document object created by the browser's XML DOM parser, usually from a string representing XML. XML documents have different semantics than HTML documents, but most of the traversing and manipulation methods provided by jQuery will work with them.

 Assert
------

 A reference to or instance of the object holding all of QUnit's assertions. See the [API documentation for `QUnit.assert`](https://api.qunitjs.com/config/QUnit.assert) for details.



 © The jQuery Foundation and other contributors  
Licensed under the MIT License.  

<https://api.jquery.com/Types>

jquery