JQuery API

jQuery API
Traversing > Miscellaneous Traversing
.add()
Create a new jQuery object with elements added to the set of matched elements.
.addBack()
Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
Attributes | Manipulation > Class Attribute | CSS
.addClass()
Adds the specified class(es) to each of the set of matched elements.
Manipulation > DOM Insertion, Outside
.after()
Insert content, specified by the parameter, after each element in the set of matched elements.
Ajax > Global Ajax Event Handlers
.ajaxComplete()
Register a handler to be called when Ajax requests complete. This is an AjaxEvent.
.ajaxError()
Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
.ajaxSend()
Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
.ajaxStart()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
.ajaxStop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
.ajaxSuccess()
Attach a function to be executed whenever an Ajax request completes successfully. This is an
Ajax Event.
Selectors > Basic
All Selector (*)
Selects all elements.

Deprecated > Deprecated 1.8 | Traversing > Miscellaneous Traversing
.andSelf()
Add the previous set of elements on the stack to the current set.
Effects > Custom
.animate()
Perform a custom animation of a set of CSS properties.
Selectors > Basic Filter | Selectors > jQuery Extensions
:animated Selector
Select all elements that are in the progress of an animation at the time the selector is run.
Manipulation > DOM Insertion, Inside
.append()
Insert content, specified by the parameter, to the end of each element in the set of matched
elements.
.appendTo()
Insert every element in the set of matched elements to the end of the target.
Attributes | Manipulation > General Attributes
.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.
Selectors > Attribute
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"]

Selects elements that have the specified attribute with a value containing a given substring.
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"]

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"]

Selects elements that have the specified attribute with a value exactly equal to a certain value.
Selectors > Attribute | Selectors > jQuery Extensions
Attribute Not Equal Selector [name!="value"]

Select elements that either dont have the specified attribute, or do have the specified attribute
but not with a certain value.
Attribute Starts With Selector [name^="value"]

Selects elements that have the specified attribute with a value beginning exactly with a given
string.
.before()
Insert content, specified by the parameter, before each element in the set of matched elements.
Events > Event Handler Attachment
.bind()
Attach a handler to an event for the elements.
Events > Form Events | Forms
.blur()
Bind an event handler to the blur JavaScript event, or trigger that event on an element.
Selectors > Form | Selectors > jQuery Extensions
:button Selector
Selects all button elements and elements of type button.
Callbacks Object
callbacks.add()
Add a callback or a collection of callbacks to a callback list.
Callbacks Object
callbacks.disable()
Disable a callback list from doing anything more.
Callbacks Object
callbacks.disabled()
Determine if the callbacks list has been disabled.
Callbacks Object
callbacks.empty()
Remove all of the callbacks from a list.
Callbacks Object
callbacks.fire()
Call all of the callbacks with the given arguments
Callbacks Object
callbacks.fired()
Determine if the callbacks have already been called at least once.
Callbacks Object
callbacks.fireWith()
Call all callbacks in a list with the given context and arguments.
Callbacks Object
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 Object
callbacks.lock()
Lock a callback list in its current state.
Callbacks Object
callbacks.locked()
Determine if the callbacks list has been locked.
Callbacks Object
callbacks.remove()
Remove a callback or a collection of callbacks from a callback list.
.change()
Bind an event handler to the change JavaScript event, or trigger that event on an element.
:checkbox Selector
Selects all elements of type checkbox.
Selectors > Form
:checked Selector
Matches all elements that are checked or selected.
Selectors > Hierarchy
Child Selector (parent > child)

Selects all direct child elements specified by child of elements specified by parent.
Traversing > Tree Traversal
.children()
Get the children of each element in the set of matched elements, optionally filtered by a selector.
Selectors > Basic
Class Selector (.class)

Selects all elements with the given class.
Effects > Custom | Data | Utilities
.clearQueue()
Remove from the queue all items that have not yet been run.
Events > Mouse Events
.click()
Bind an event handler to the click JavaScript event, or trigger that event on an element.
Manipulation > Copying
.clone()
Create a deep copy of the set of matched elements.
.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.
Selectors > Content Filter
:contains() Selector
Select all elements that contain the specified text.
.contents()
Get the children of each element in the set of matched elements, including text and comment
nodes.
Deprecated > Deprecated 1.10 | Internals | Properties > Properties of jQuery Object Instances
.context
The DOM node context originally passed to jQuery(); if none was passed then context will likely
be the document.
CSS | Manipulation > Style Properties
.css()
Get the value of a style property for the first element in the set of matched elements or set one or
more CSS properties for every matched element.
Data | Miscellaneous > Data Storage
.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()
Bind an event handler to the dblclick JavaScript event, or trigger that event on an element.
Deferred Object
deferred.always()
Add handlers to be called when the Deferred object is either resolved or rejected.
Deferred Object
deferred.done()
Add handlers to be called when the Deferred object is resolved.
Deferred Object
deferred.fail()
Add handlers to be called when the Deferred object is rejected.
Deferred Object | Deprecated > Deprecated 1.7 | Removed
deferred.isRejected()
Determine whether a Deferred object has been rejected.
Deferred Object | Deprecated > Deprecated 1.7 | Removed
deferred.isResolved()
Determine whether a Deferred object has been resolved.
Deferred Object
deferred.notify()
Call the progressCallbacks on a Deferred object with the given args.
Deferred Object
deferred.notifyWith()
Call the progressCallbacks on a Deferred object with the given context and args.
Deferred Object | Deprecated > Deprecated 1.8
deferred.pipe()
Utility method to filter and/or chain Deferreds.
Deferred Object
deferred.progress()
Add handlers to be called when the Deferred object generates progress notifications.
Deferred Object
deferred.promise()
Return a Deferreds Promise object.
Deferred Object
deferred.reject()
Reject a Deferred object and call any failCallbacks with the given args.
Deferred Object
deferred.rejectWith()
Reject a Deferred object and call any failCallbacks with the given context and args.
Deferred Object
deferred.resolve()
Resolve a Deferred object and call any doneCallbacks with the given args.
Deferred Object
deferred.resolveWith()
Resolve a Deferred object and call any doneCallbacks with the given context and args.
Deferred Object
deferred.state()
Determine the current state of a Deferred object.

Deferred Object
deferred.then()
Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.
Effects > Custom
.delay()
Set a timer to delay execution of subsequent items in the queue.
.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()
Execute the next function on the queue for the matched elements.
Descendant Selector (ancestor descendant)

Selects all elements that are descendants of a given ancestor.
Manipulation > DOM Removal
.detach()
Remove the set of matched elements from the DOM.
Deprecated > Deprecated 1.7 | Events > Event Handler Attachment | Removed
.die()
Remove event handlers previously attached using .live() from the elements.
Selectors > Form
:disabled Selector
Selects all elements that are disabled.
Miscellaneous > Collection Manipulation | Traversing
.each()
Iterate over a jQuery object, executing a function for each matched element.
Selectors > Basic
Element Selector (element)

Selects all elements with the given tag name.
.empty()
Remove all child nodes of the set of matched elements from the DOM.
Selectors > Content Filter
:empty Selector
Select all elements that have no children (including text nodes).
Selectors > Form
:enabled Selector
Selects all elements that are enabled.
.end()
End the most recent filtering operation in the current chain and return the set of matched
elements to its previous state.
Traversing > Filtering
.eq()
Reduce the set of matched elements to the one at the specified index.
:eq() Selector
Select the element at index n within the matched set.
Events > Browser Events | Deprecated > Deprecated 1.8
.error()
Bind an event handler to the error JavaScript event.
:even Selector
Selects even elements, zero-indexed. See also odd.
Events > Event Object
event.currentTarget
The current DOM element within the event bubbling phase.
event.data
An optional object of data passed to an event method when the current executing handler is
bound.
Events > Event Object | Events
event.delegateTarget
The element where the currently-called jQuery event handler was attached.
event.isDefaultPrevented()
Returns whether event.preventDefault() was ever called on this event object.
event.isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was ever called on this event object.
event.isPropagationStopped()
Returns whether event.stopPropagation() was ever called on this event object.
event.metaKey
Indicates whether the META key was pressed when the event fired.
event.namespace
The namespace specified when the event was triggered.
event.pageX
The mouse position relative to the left edge of the document.
event.pageY
The mouse position relative to the top edge of the document.
event.preventDefault()
If this method is called, the default action of the event will not be triggered.
event.relatedTarget
The other DOM element involved in the event, if any.
event.result
The last value returned by an event handler that was triggered by this event, unless the value was
undefined.
event.stopImmediatePropagation()
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the
DOM tree.
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being
notified of the event.
event.target
The DOM element that initiated the event.
event.timeStamp
The difference in milliseconds between the time the browser created the event and January 1,
1970.
event.type
Describes the nature of the event.
event.which
For key or mouse events, this property indicates the specific key or button that was pressed.
Effects > Fading
.fadeIn()
Display the matched elements by fading them to opaque.
Effects > Fading
.fadeOut()
Hide the matched elements by fading them to transparent.
Effects > Fading
.fadeTo()
Adjust the opacity of the matched elements.
Effects | Effects > Fading
.fadeToggle()
Display or hide the matched elements by animating their opacity.
:file Selector
Selects all elements of type file.
.filter()
Reduce the set of matched elements to those that match the selector or pass the functions test.
.find()
Get the descendants of each element in the current set of matched elements, filtered by a selector,
jQuery object, or element.
Effects > Custom
.finish()
Stop the currently-running animation, remove all queued animations, and complete all
animations for the matched elements.
.first()
Reduce the set of matched elements to the first in the set.
Selectors > Child Filter
:first-child Selector
Selects all elements that are the first child of their parent.
:first-of-type Selector
Selects all elements that are the first among siblings of the same element name.
:first Selector
Selects the first matched element.
.focus()
Bind an event handler to the focus JavaScript event, or trigger that event on an element.
Selectors > Basic Filter | Selectors > Form
:focus Selector
Selects element if it is currently focused.
Events > Form Events
.focusin()
Bind an event handler to the focusin event.
Events > Keyboard Events | Events > Mouse Events
.focusout()
Bind an event handler to the focusout JavaScript event.
Miscellaneous > DOM Element Methods
.get()
Retrieve the DOM elements matched by the jQuery object.
:gt() Selector
Select all elements at an index greater than index within the matched set.
.has()
Reduce the set of matched elements to those that have a descendant that matches the selector or
DOM element.
Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.
Selectors > Content Filter | Selectors > jQuery Extensions
:has() Selector
Selects elements which contain at least one element that matches the specified selector.
.hasClass()
Determine whether any of the matched elements are assigned the given class.
:header Selector
Selects all elements that are headers, like h1, h2, h3 and so on.
CSS | Dimensions | Manipulation > Style Properties
.height()
Get the current computed height for the first element in the set of matched elements or set the
height of every matched element.
Selectors > jQuery Extensions | Selectors > Visibility Filter
:hidden Selector
Selects all elements that are hidden.
Effects > Basics
.hide()
Hide the matched elements.
.hover()
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters
and leaves the elements.
Attributes | Manipulation > DOM Insertion, Inside
.html()
Get the HTML contents of the first element in the set of matched elements or set the HTML
contents of every matched element.
Selectors > Basic
ID Selector (#id)
Selects a single element with the given id attribute.
:image Selector
Selects all elements of type image.
.index()
Search for a given element from among the matched elements.
.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()
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
Selects all input, textarea, select and button elements.
.insertAfter()
Insert every element in the set of matched elements after the target.
.insertBefore()
Insert every element in the set of matched elements before the target.
.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.
Core
jQuery()
Return a collection of matched elements either found in the DOM based on passed argument(s)
or created by passing an HTML string.
Internals | Properties > Properties of jQuery Object Instances
.jquery
A string containing the jQuery version number.
Ajax > Low-Level Interface
jQuery.ajax()
Perform an asynchronous HTTP (Ajax) request.
jQuery.ajaxPrefilter()
Handle custom Ajax options or modify existing options before each request is sent and before
they are processed by $.ajax().
jQuery.ajaxSetup()
Set default values for future Ajax requests. Its use is not recommended.
jQuery.ajaxTransport()
Creates an object that handles the actual transmission of Ajax data.
Deprecated > Deprecated 1.3 | Removed | Utilities
jQuery.boxModel
States if the current page, in the users browser, is being rendered using the W3C CSS Box
Model. This property was removed in jQuery 1.8. Please try to use feature detection instead.
Deprecated > Deprecated 1.3 | Properties > Properties of the Global jQuery Object | Removed | Utilities
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.
Callbacks Object
jQuery.Callbacks()
A multi-purpose callbacks list object that provides a powerful way to manage callback lists.
Utilities
jQuery.contains()
Check to see if a DOM element is a descendant of another DOM element.
CSS
jQuery.cssHooks
Hook directly into jQuery to override how particular CSS properties are retrieved or set,
normalize CSS property naming, or create custom properties.
Data | Utilities
jQuery.data()
Store arbitrary data associated with the specified element and/or return the value that was set.
Deferred Object
jQuery.Deferred()
A constructor 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.
Data | Utilities
jQuery.dequeue()
Execute the next function on the queue for the matched element.
Utilities
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 functions arguments object) are
iterated by numeric index, from 0 to length-1. Other objects are iterated via their named
properties.
Internals
jQuery.error()
Takes a string and throws an exception containing it.
Utilities
jQuery.extend()
Merge the contents of two or more objects together into the first object.
Utilities
jQuery.fn.extend()
Merge the contents of an object onto the jQuery prototype to provide new jQuery instance
methods.
Effects > Custom | Properties > Properties of the Global jQuery Object
jQuery.fx.interval
The rate (in milliseconds) at which animations fire.
Effects > Custom | Properties > Properties of the Global jQuery Object
jQuery.fx.off
Globally disable all animations.
Ajax > Shorthand Methods
jQuery.get()
Load data from the server using a HTTP GET request.
jQuery.getJSON()
Load JSON-encoded data from the server using a GET HTTP request.
jQuery.getScript()
Load a JavaScript file from the server using a GET HTTP request, then execute it.
Utilities
jQuery.globalEval()
Execute some JavaScript code globally.
Utilities
jQuery.grep()
Finds the elements of an array which satisfy a filter function. The original array is not affected.
Data
jQuery.hasData()
Determine whether an element has any jQuery data associated with it.
Core
jQuery.holdReady()
Holds or releases the execution of jQuerys ready event.
Utilities
jQuery.inArray()
Search for a specified value within an array and return its index (or -1 if not found).
Utilities
jQuery.isArray()
Determine whether the argument is an array.
Utilities
jQuery.isEmptyObject()
Check to see if an object is empty (contains no enumerable properties).
Utilities
jQuery.isFunction()
Determine if the argument passed is a Javascript function object.
Utilities
jQuery.isNumeric()
Determines whether its argument is a number.
Utilities
jQuery.isPlainObject()
Check to see if an object is a plain object (created using {} or new Object).
Utilities
jQuery.isWindow()
Determine whether the argument is a window.
Utilities
jQuery.isXMLDoc()
Check to see if a DOM node is within an XML document (or is an XML document).
Utilities
jQuery.makeArray()
Convert an array-like object into a true JavaScript array.
Utilities
jQuery.map()
Translate all items in an array or object to new array of items.
Utilities
jQuery.merge()
Merge the contents of two arrays together into the first array.
Core | Miscellaneous > Setup Methods
jQuery.noConflict()
Relinquish jQuerys control of the $ variable.
Utilities
jQuery.noop()
An empty function.
Utilities
jQuery.now()
Return a number representing the current time.
Miscellaneous > Collection Manipulation | Forms | Ajax > Helper Functions
jQuery.param()
Create a serialized representation of an array or object, suitable for use in a URL query string or
Ajax request.
Utilities
jQuery.parseHTML()
Parses a string into an array of DOM nodes.
Utilities
jQuery.parseJSON()
Takes a well-formed JSON string and returns the resulting JavaScript value.
Utilities
jQuery.parseXML()
Parses a string into an XML document.
jQuery.post()
Load data from the server using a HTTP POST request.
Events > Event Handler Attachment | Utilities
jQuery.proxy()
Takes a function and returns a new one that will always have a particular context.
Data | Utilities
jQuery.queue()
Show or manipulate the queue of functions to be executed on the matched element.
Data | Utilities
jQuery.removeData()
Remove a previously-stored piece of data.
Core | Deprecated > Deprecated 1.7 | Removed
jQuery.sub()
Creates a new copy of jQuery whose properties and methods can be modified without affecting
the original jQuery object.
Deprecated > Deprecated 1.9 | Properties > Properties of the Global jQuery Object | Utilities
jQuery.support
A collection of properties that represent the presence of different browser features or bugs.
Intended for jQuerys internal use; specific properties may be removed when they are no longer
needed internally to improve page startup performance. For your own projects feature-detection
needs, we strongly recommend the use of an external library such as Modernizr instead of
dependency on properties in jQuery.support.
Utilities
jQuery.trim()
Remove the whitespace from the beginning and end of a string.
Utilities
jQuery.type()
Determine the internal JavaScript [[Class]] of an object.
Utilities
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.
Core | Deferred Object
jQuery.when()
Provides a way to execute callback functions based on one or more objects, usually Deferred
objects that represent asynchronous events.
Events > Keyboard Events
.keydown()
Bind an event handler to the keydown JavaScript event, or trigger that event on an element.
.keypress()
Bind an event handler to the keypress JavaScript event, or trigger that event on an element.
.keyup()
Bind an event handler to the keyup JavaScript event, or trigger that event on an element.
Selectors > Basic Filter
:lang() Selector
Selects all elements of the specified language.
.last()
Reduce the set of matched elements to the final one in the set.
:last-child Selector
Selects all elements that are the last child of their parent.
:last-of-type Selector
Selects all elements that are the last among siblings of the same element name.
:last Selector
Selects the last matched element.
Properties > Properties of jQuery Object Instances
.length
The number of elements in the jQuery object.
Deprecated > Deprecated 1.7 | Events > Event Handler Attachment | Removed
.live()
Attach an event handler for all elements which match the current selector, now and in the future.
.load()
Load data from the server and place the returned HTML into the matched element.
Deprecated > Deprecated 1.8 | Events > Document Loading
.load()
Bind an event handler to the load JavaScript event.
:lt() Selector
Select all elements at an index less than index within the matched set.
.map()
Pass each element in the current matched set through a function, producing a new jQuery object
containing the return values.
.mousedown()
Bind an event handler to the mousedown JavaScript event, or trigger that event on an element.
.mouseenter()
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an
element.
.mouseleave()
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an
element.
.mousemove()
Bind an event handler to the mousemove JavaScript event, or trigger that event on an element.
.mouseout()
Bind an event handler to the mouseout JavaScript event, or trigger that event on an element.
.mouseover()
Bind an event handler to the mouseover JavaScript event, or trigger that event on an element.
.mouseup()
Bind an event handler to the mouseup JavaScript event, or trigger that event on an element.
Multiple Attribute Selector [name="value"][name2="value2"]

Matches elements that match all of the specified attribute filters.
Selectors > Basic
Multiple Selector (selector1, selector2, selectorN)

Selects the combined results of all the specified selectors.
.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)

Selects all next elements matching next that are immediately preceded by a sibling prev.
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()
Get all following siblings of each element in the set of matched elements, optionally filtered by a
selector.
.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.
Traversing > Filtering | Traversing > Miscellaneous Traversing
.not()
Remove elements from the set of matched elements.
:not() Selector
Selects all elements that do not match the given selector.
:nth-child() Selector
Selects all elements that are the nth-child of their parent.
: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
Selects all elements that are the nth-child of their parent, counting from the last element to the
first.
: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
Selects odd elements, zero-indexed. See also even.
.off()
Remove an event handler.
CSS | Offset | Manipulation > Style Properties
.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.
Offset | Traversing > Tree Traversal
.offsetParent()
Get the closest ancestor element that is positioned.
.on()
Attach an event handler function for one or more events to the selected elements.
.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
Selects all elements that are the only child of their parent.
:only-of-type Selector
Selects all elements that have no siblings with the same element name.
.outerHeight()
Get the current computed height for the first element in the set of matched elements, including
padding, border, and optionally margin. Returns a number (without px) representation of the
value or null if called on an empty set of elements.
.outerWidth()
Get the current computed width for the first element in the set of matched elements, including
padding and border.
.parent()
Get the parent of each element in the current set of matched elements, optionally filtered by a
selector.
Selectors > Content Filter | Selectors > jQuery Extensions
:parent Selector
Select all elements that have at least one child node (either an element or text).
.parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a
selector.
.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
Selects all elements of type password.
.position()
Get the current coordinates of the first element in the set of matched elements, relative to the
offset parent.
.prepend()
Insert content, specified by the parameter, to the beginning of each element in the set of matched
elements.
.prependTo()
Insert every element in the set of matched elements to the beginning of the target.
.prev()
Get the immediately preceding sibling of each element in the set of matched elements, optionally
filtered by a selector.
.prevAll()
Get all preceding siblings of each element in the set of matched elements, optionally filtered by a
selector.
.prevUntil()
Get all preceding siblings of each element up to but not including the element matched by the
selector, DOM node, or jQuery object.
Deferred Object
.promise()
Return a Promise object to observe when all actions of a certain type bound to the collection,
queued or not, have finished.
.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.
Internals
.pushStack()
Add a collection of DOM elements onto the jQuery stack.
.queue()
Show or manipulate the queue of functions to be executed on the matched elements.
:radio Selector
Selects all elements of type radio.
Events > Document Loading
.ready()
Specify a function to execute when the DOM is fully loaded.
.remove()
Remove the set of matched elements from the DOM.
.removeAttr()
Remove an attribute from each element in the set of matched elements.
.removeClass()
Remove a single class, multiple classes, or all classes from each element in the set of matched
elements.
Data | Miscellaneous > Data Storage
.removeData()
Remove a previously-stored piece of data.
.removeProp()
Remove a property for the set of matched elements.
Manipulation > DOM Replacement
.replaceAll()
Replace each target element with the set of matched elements.
Manipulation > DOM Replacement
.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
Selects all elements of type reset.
Events > Browser Events
.resize()
Bind an event handler to the resize JavaScript event, or trigger that event on an element.
:root Selector
Selects the element that is the root of the document.
Events > Browser Events
.scroll()
Bind an event handler to the scroll JavaScript event, or trigger that event on an element.
.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()
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()
Bind an event handler to the select JavaScript event, or trigger that event on an element.
:selected Selector
Selects all elements that are selected.
Deprecated > Deprecated 1.7 | Internals | Properties > Properties of the Global jQuery Object | Removed
.selector
A selector representing selector passed to jQuery(), if any, when creating the original set.
Forms | Ajax > Helper Functions
.serialize()
Encode a set of form elements as a string for submission.
Forms | Ajax > Helper Functions
.serializeArray()
Encode a set of form elements as an array of names and values.
Effects > Basics
.show()
Display the matched elements.
.siblings()
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Deprecated > Deprecated 1.8 | Miscellaneous > DOM Element Methods
.size()
Return the number of elements in the jQuery object.
.slice()
Reduce the set of matched elements to a subset specified by a range of indices.
Effects > Sliding
.slideDown()
Display the matched elements with a sliding motion.
Effects > Sliding
.slideToggle()
Display or hide the matched elements with a sliding motion.
Effects > Sliding
.slideUp()
Hide the matched elements with a sliding motion.
Effects > Custom
.stop()
Stop the currently-running animation on the matched elements.
.submit()
Bind an event handler to the submit JavaScript event, or trigger that event on an element.
:submit Selector
Selects all elements of type submit.
:target Selector
Selects the target element indicated by the fragment identifier of the documents URI.
.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
Selects all elements of type text.
.toArray()
Retrieve all the elements contained in the jQuery set, as an array.
Effects > Basics
.toggle()
Display or hide the matched elements.
Deprecated > Deprecated 1.8 | Events > Mouse Events | Removed
.toggle()
Bind two or more handlers to the matched elements, to be executed on alternate clicks.
.toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending
on either the classs presence or the value of the switch argument.
.trigger()
Execute all handlers and behaviors attached to the matched elements for the given event type.
.triggerHandler()
Execute all handlers attached to an element for an event.
.unbind()
Remove a previously-attached event handler from the elements.
.undelegate()
Remove a handler from the event for all elements which match the current selector, based upon a
specific set of root elements.
Deprecated > Deprecated 1.8 | Events > Document Loading
.unload()
Bind an event handler to the unload JavaScript event.
Manipulation > DOM Insertion, Around | Manipulation > DOM Removal
.unwrap()
Remove the parents of the set of matched elements from the DOM, leaving the matched elements
in their place.
Attributes | Forms | Manipulation > General Attributes
.val()
Get the current value of the first element in the set of matched elements or set the value of every
matched element.
Selectors > jQuery Extensions | Selectors > Visibility Filter
:visible Selector
Selects all elements that are visible.
.width()
Get the current computed width for the first element in the set of matched elements or set the
width of every matched element.
Manipulation > DOM Insertion, Around
.wrap()
Wrap an HTML structure around each element in the set of matched elements.
.wrapAll()
Wrap an HTML structure around all elements in the set of matched elements.
.wrapInner()
Wrap an HTML structure around the content of each element in the set of matched elements.
jQuery Tutorial for Beginners:

Nothing But the Goods
By Louis Lazaris on March 24th, 2010 | 127 Comments
This jQuery tutorial is available as a PDF. See this post for details and download
link.
Not too long ago I wrote an article for Six Revisions

called Getting Started with jQuery that covered some important things
(concept-wise) that beginning jQuery developers should know. This article is
the complete opposite; theres no concepts, no principles, and very little
lecturing just some straight example code with brief descriptions
demonstrating what you can do with jQuery.
This fast-paced tutorial should be able to get beginners up and running with
jQuery very quickly, while also providing a good overview of what jQuery is
capable of (although jQuerys capabilities go far beyond this beginning
tutorial).
Keep in mind that this tutorial is just a bunch of straightforward, superficial
code examples and very brief explanations for beginners who want to avoid all
the jargon and complexities. But I still highly recommend that all beginners
get past this stuff by means of a good book, some more in-depth tutorials
online, or by using the jQuery documentation.
Link to jQuerys Source Code

Remotely
This is an optional technique that many developers are using today. Instead of
hosting the jQuery source code on your own server, you can link to it remotely.
This ensures the fastest possible download time of the source code, since many
users visiting your site might have the file already cached in their browser.
Here is how your <script> tag should look:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jq
uery.min.js"></script>
Running Code Unobtrusively When the

DOM is Ready
The first thing you need to be up and running with jQuery is whats called the
document ready handler. Pretty much everything you code in jQuery will be
contained inside one of these. This accomplishes two things: First, it ensures
that the code does not run until the DOM is ready. This confirms that any
elements being accessed are actually in existence, so the script wont return
any errors. Second, this ensures that your code is unobtrusive. That is, its
separated from content (HTML) and presentation (CSS).
Here is what it looks like:
$(document).ready(function() {
// all jQuery code goes here
});
Although you will normally include your jQuery code inside the above handler,
for brevity the rest of the code examples in this tutorial will not include the
ready handler.
Selecting Elements in jQuery

The jQuery library allows you to select elements in your HTML by wrapping
them in $("") (you could also use single quotes), which is the jQuery wrapper.
Here are some examples of wrapped sets in jQuery:
$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID
"myElement"
$(".myClass"); // selects HTML elements with class
"myClass"
$("p#myElement"); // selects paragraph elements with ID
"myElement"
$("ul li a.navigation"); // selects anchors with class
"navigation" that are nested in list items
jQuery supports the use of all CSS selectors, even those in CSS3. Here are
some examples of alternate selectors:
$("p > a"); // selects anchors that are direct children
of paragraphs
$("input[type=text]"); // selects inputs that have
specified type
$("a:first"); // selects the first anchor on the page
$("p:odd"); // selects all odd numbered paragraphs
$("li:first-child"); // every list item that's first
child in a list
jQuery also allows the use of its own custom selectors. Here are some
examples:
$(":animated"); // selects elements currently being
animated
$(":button"); // selects any button elements (inputs or
buttons)
$(":radio"); // selects radio buttons
$(":checkbox"); // selects checkboxes
$(":checked"); // selects selected checkboxes or radio
buttons
$(":header"); // selects header elements (h1, h2, h3,
etc.)
View a list of jQuerys selectors and custom selectors
Manipulating and Accessing CSS

Class Names
jQuery allows you to easily add, remove, and toggle CSS classes, which comes
in handy for a variety of practical uses. Here are the different syntaxes for
accomplishing this:
$("div").addClass("content"); // adds class
all <div> elements
$("div").removeClass("content"); // removes
"content" from all <div> elements
$("div").toggleClass("content"); // toggles
"content" on all <div> elements (adds it if
exist, and removes it if it does)
"content" to
class
the class
it doesn't
You can also check to see if a selected element has a particular CSS class, and
then run some code if it does. You would check this using an if statement.
Here is an example:
if ($("#myElement").hasClass("content")) {
// do something here
}
You could also check a set of elements (instead of just one), and the result
would return true if any one of the elements contained the class.
Manipulating CSS Styles with jQuery

CSS styles can be added to elements easily using jQuery, and its done in a
cross-browser fashion. Here are some examples to demonstrate this:
$("p").css("width", "400px"); // adds a width to all
paragraphs
$("#myElement").css("color", "blue") // makes text color
blue on element #myElement
$("ul").css("border", "solid 1px #ccc") // adds a border

to all lists
View more CSS-related commands for jQuery
Adding, Removing, and Appending

Elements and Content
There are a number of ways to manipulate groups of elements with jQuery,
including manipulating the content of those elements (whether text, inline
elements, etc).
Get the HTML of any element (similar to innerHTML in JavaScript):
var myElementHTML = $("#myElement").html(); // variable
contains all HTML (including text) inside #myElement
If you dont want to access the HTML, but only want the text of an element:
var myElementHTML = $("#myElement").text(); // variable
contains all text (excluding HTML) inside #myElement
Using similar syntax to the above two examples, you can change the HTML or
text content of a specified element:
$("#myElement").html("<p>This is the new content.</p>");
// content inside #myElement will be replaced with that
specified
$("#myElement").text("This is the new content."); // text
content will be replaced with that specified
To append content to an element:
$("#myElement").append("<p>This is the new
content.</p>"); // keeps content intact, and adds the new
content to the end
$("p").append("<p>This is the new content.</p>"); // add

the same content to all paragraphs
jQuery also offers use of the
commands appendTo(),prepend(), prependTo(), before(), insertBefore(),
after(), insertAfter(), which work similarly to append but with their own
unique characteristics that go beyond the scope of this simple tutorial.
View more info on some of the above commands
Dealing with Events in jQuery

Specific event handlers can be established using the following code:
$("a").click(function() {
// do something here
// when any anchor is clicked
});
The code inside function() will only run when an anchor is clicked. Some
other common events you might use in jQuery include:
blur, focus, hover, keydown, load, mousemove,resize, scroll, submit, s
elect.
View a more comprehensive list of jQuery events
Showing and Hiding Elements with

jQuery
The syntax for showing, hiding an element (or toggling show/hide) is:
$("#myElement").hide("slow", function() {
// do something once the element is hidden
}
$("#myElement").show("fast", function() {
// do something once the element is shown
}
$("#myElement").toggle(1000, function() {
// do something once the element is shown/hidden
}
Remember that the toggle command will change whatever state the element
currently has, and the parameters are both optional. The first parameter
indicates the speed of the showing/hiding. If no speed is set, it will occur
instantly, with no animation. A number for speed represents the speed in
milliseconds. The second parameter is an optional function that will run when
the command is finished executing.
You can also specifically choose to fade an element in or out, which is always
done by animation:
$("#myElement").fadeOut("slow", function() {
// do something when fade out finished
}
$("#myElement").fadeIn("fast", function() {
// do something when fade in finished
}
To fade an element only partially, either in or out:
$("#myElement").fadeTo(2000, 0.4, function() {
// do something when fade is finished
}
The second parameter (0.4) represents opacity, and is similar tothe way
opacity is set in CSS. Whatever the opacity is to start with, it will animate
(fadeTo) until it reaches the setting specified, at the speed set (2000
milliseconds). The optional function (called a callback function) will run
when the opacity change is complete. This is the way virtually all callback
functions in jQuery work.
jQuery Animations and Effects

You can slide elements, animate elements, and even stop animations in midsequence. To slide elements up or down:
$("#myElement").slideDown("fast", function() {
// do something when slide down is finished
}
$("#myElement").slideUp("slow", function() {
// do something when slide up is finished
}
$("#myElement").slideToggle(1000, function() {
// do something when slide up/down is finished
}
To animate an element, you do so by telling jQuery the CSS styles that the item
should change to. jQuery will set the new styles, but instead of setting them
instantly (as CSS or raw JavaScript would do), it does so gradually, animating
the effect at the chosen speed:
$("#myElement").animate(
{
opacity: .3,
width: "500px",
height: "700px"
}, 2000, function() {
// optional callback after animation completes
}
);
Animation with jQuery is very powerful, and it does have its quirks (for
example, to animate colors, you need a special plugin). Its worth taking the
time to learn to use the animate command in depth, but it is quite easy to use
even for beginners.
More info on the animate() command
More info on other effects-related jQuery commands
This is Just the Beginning

There is so much more you can do with jQuery beyond these basics Ive
introduced here. I highly recommend that all developers buy a good book on
jQuery, and also take the time to learn some important JavaScript concepts
(like anonymous functions, closures, scope, etc.) in order to be able to use
jQuery in a more powerful way.
And please note that Ive introduced a lot of commands and syntaxes in a very
superficial manner, without explaining many of the problems you could have
with some of these, so if you do run into problems, you can check out
the jQuery documentation.
Basic Concepts in jQuery

There are some basic concepts in jQuery should be known before we dig into the jQuery
library
$/jQuery object and $()/jQuery() function

The $/jQuery object is a global object through which all jQuery functions are accessed.
It is also a function object, so the most common approach uses it is via $()/jQuery()
function. $()/jQuery() function can be used to select a group of elements in DOM. It is
also known as wrapper function. One simple example of using $()/jQuery() function is
this
$(#ABC);
or
jQuery(#ABC);
The parameter passed into $()/jQuery() function is selector. Selector is an expression
that has CSS selector style syntax. In above example, I am trying to select elements
that have id equal to #ABC.
Wrapped set
Wrapped set is an array-like structure that contains all the selected DOM elements. The
above $(#ABC) returns back a wrapped set. You can iterate over the wrapped set like
an array or access individual elements via indexer. More importantly, you can apply
jQuery functions against all the selected elements.
How the jQuery $()/jQuery() function

works behind the scene
Because majority of jQuery function calls are started with $()/jQuery() function, so we
need to understand what happening inside of it. Before go into $()/jQuery(), lets take a
look where $/jQuery object is defined. The $/jQuery object is the access point to jQuery
functions. Its a global function variable defined in jQuery. Here is the line of source code
in jQuery defines it
Collapse | Copy Code
// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;
The window object represents an open window in a browser, by putting $/jQuery right
under window, it is defined as a global object that can be accessed in current open
window.
But, what is the jQuery used at the end of above line of source code? It is declared in
the beginning of jQuery library
var jQuery = (function() {
All the magic are happening inside of jQuery object declaration expression, but if look
into it directly, you will get lost, so let me simplify it before we continue.
The simplified version jQuery library source code

Caveat: the simplified version is only for research purpose. It doesnt really have all
fundamental features jQuery provides. Never use it in real project.
var jQuery = (function ()

{
// Define a local copy of k
var k = function (selector, context)
{
// The k object is actually just the init constructor 'enhanced'
var kobj = new k.fn.init(selector, context);
return kobj;
};
//Define ks fn prototype, specially contains init method
k.fn = k.prototype = {
init: function (selector, context)
{
if (!selector)
{
return this;
}
}
};
// Give the init function the k prototype for later instantiation
k.fn.init.prototype = k.fn;
// Return k to the global object
return k;
})();
From the above source code, you can see jQuery function variable is defined and
assigned as result of an anonymous function call.
Sidebar: How to define anonymous function
In JavaScript, you can define an anonymous function and call it right away.
For example,
(function () { alert(hello world); })();
By putting function literal

function() { alert(hello word); }
into parentheses
(function() { alert(hello world); })
You can immediately invoke it with outside parentheses

Inside of the anonymous function, a function k is defined, it has signature like this
function (selector, context)
The first parameter is selector and the second parameter is context. In original jQuery
source code, function k is actually named as jQuery that can be confused with the outer
most jQuery function variable.
Inside of function k, a new instance of init function class is created and returned. The
init function class is defined later on as ks prototype method. It is a JavaScript style
class.
After the function k declaration, an anonymous function class is defined as ks
prototype. Prototype is a special property on JavaScripts function class that is used to
point to another function object. So, all the instances of that function class will have
access to member functions defined in the prototype function class. In here, init method
is available by all instance of k function class. The init method has signature like this
function (selector, context)
The ks prototype has init member method, in the meantime, init functions prototype is
assigned with k functions prototype. This is a circular reference that usually should be
avoided in normal programming practice, but, its the way jQuery make the return of init
function can have access to all the methods defined on k.
Sidebar: Function is the first class object in Javascript
JavaScript is a functional programming style language, but the function is not a pure
function in our traditional definition. The function can be created on fly, can have
properties and methods, and can be passed to other functions. If you want to invoke the
JavaScript function in traditional way, you can have something like this
function display()
{
alert(hello world);
}
display();
If you want to use function as class, then you can have something like this
function Car(model)
{
this.Model = model;
this.Drive = function() { alert(Go) }
}
var car = new Car(Ford);
So, the function statement is actually used to define a Car class. The Car class has a
property Model that is initialized with parameter in function class constructor and a
Drive method. So, you can create as many instance of Car class as you want. However,
JavaScripts class is not a true class because it doesnt really have the three key
characters of class in OO language.
The way ks prototype function defined is called function literal. It is used widely in
jQuery for different purposes.
Sidebar: Different ways defining function in JavaScript
1. Use function statement to define a function
function open() {
//open logic
}
2. Use function literal to define a function

The simplest function you can define with literal is like this
var o = { }
also, you can use literal to define a function class

var apple = {
type: macintosh,
color: red,
getInfo: function() {
return this.color + + this.type + apple;
}
}
3. Use Function object to define a function
Function Object is JavaScript built-in Object. In JavaScript, I can do this

var add = new Function(a, b, return a + b;);
to define a function add. The Function will treat the first two parameters a and b
as function parameters and the last parameter return a + b as function body.
After that, the internal k function is returned to outside variable jQuery. What the jQuery
got is not just a k function, and also a closure that k function lived in.
Sidebar: What is closure in JavaScript
A closure is a context that created by JavaScript when returning the inside function to
outside, so the inside function can still have access to those local variables.
An example of closure is like this
var addition = function(numberA) { return function(numberB) { alert (numberA + numberB); }}
so, you can create instance of addition with indicated numberA

var add2 = addition(2);

var add3 = addition(3);
add2(3); // it will display 5
add3(3); // it will display 6
At the end, k function is returned to the global variable jQuery.

The intricate and complex design inside of jQuery library is to make extending and using
this library simple and easy. You can attach custom function to jQuery.fn to add your
own business logic. And the custom function can be invoked same as built-in function by
wrapped set, such as this
// Define a plugin function Test

jQuery.fn.Test = function () { alert("Test"); }
// Invoke Test function via jQuery() function
jQuery().Test();
Summary
By understanding how jQuery works, we can better master this JavaScript library. What I
am showing in this article is just a skeleton of jQuery library. After grasp the basic
design principal and mechanism of jQuery library, you can look into the original source
code of jQuery library to learn more on how it take advantage of variant JavaScript
language features to accomplish the goal of simplicity and extensibility.
License
This article, along with any associated source code and files, is licensed under The Code
Project Open License (CPOL)

JQuery API

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JQuery API

Uploaded by

Copyright:

Available Formats

jQuery API

Traversing > Miscellaneous Traversing

All Selector (*)

Selects all elements.

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

Attribute Contains Selector [name*="value"]

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

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

Attribute Equals Selector [name="value"]

Selectors > Attribute | Selectors > jQuery Extensions

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

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

Child Selector (parent > child)

Class Selector (.class)

Determine the current state of a Deferred object.

Descendant Selector (ancestor descendant)

Element Selector (element)

Selectors > Form

Events > Event Object

Has Attribute Selector [name]

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

Selectors > Basic

Multiple Selector (selector1, selector2, selectorN)

Next Adjacent Selector (prev + next)

Next Siblings Selector (prev ~ siblings)

Selectors > Child Filter

Traversing > Tree Traversal

Forms | Ajax > Helper Functions

jQuery Tutorial for Beginners:

Not too long ago I wrote an article for Six Revisions

Link to jQuerys Source Code

Running Code Unobtrusively When the

Selecting Elements in jQuery

$("div"); // selects all HTML div elements

Manipulating and Accessing CSS

Manipulating CSS Styles with jQuery

$("ul").css("border", "solid 1px #ccc") // adds a border

Adding, Removing, and Appending

$("p").append("<p>This is the new content.</p>"); // add

Dealing with Events in jQuery

Showing and Hiding Elements with

jQuery Animations and Effects

This is Just the Beginning

Basic Concepts in jQuery

$/jQuery object and $()/jQuery() function

jQuery functions against all the selected elements.

How the jQuery $()/jQuery() function

// Expose jQuery to the global object

var jQuery = (function() {

The simplified version jQuery library source code

var jQuery = (function ()

(function () { alert(hello world); })();

By putting function literal

function() { alert(hello word); }

Collapse | Copy Code

(function() { alert(hello world); })

You can immediately invoke it with outside parentheses

function (selector, context)

function (selector, context)

2. Use function literal to define a function

also, you can use literal to define a function class

3. Use Function object to define a function

Function Object is JavaScript built-in Object. In JavaScript, I can do this

var add = new Function(a, b, return a + b;);