What is 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. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

    Why choose jQuery?
  • Lightweight Footprint - Only 30kB minified and gzipped. Can also be included as an AMD module
  • CSS3 Compliant - Supports CSS3 selectors to find elements as well as in style property manipulation
  • Cross-Browser - Chrome, Edge, Firefox, IE, Safari, Android, iOS, and more
  • DOM Traversal and Manipulation
  • Event Handling
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. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

All Selector (“*”)

Selects all elements.

:animated Selector

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

:button Selector

Selects all button elements and elements of type button.

:checkbox Selector

Selects all elements of type checkbox.

:checked Selector

Matches all elements that are checked or selected.

Child Selector (“parent > child”)

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

Class Selector (“.class”)

Selects all elements with the given class.

:contains() Selector

Select all elements that contain the specified text.

:disabled Selector

Selects all elements that are disabled.

:focus Selector

Selects element if it is currently focused.

Attributes

These methods get and set DOM attributes of elements.

.addClass()

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

.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()

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

.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()

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()

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.

.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()

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

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()

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

callbacks.disable()

Disable a callback list from doing anything more.

callbacks.disabled()

Determine if the callbacks list has been disabled.

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.

jQuery.holdReady()

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

jQuery.ready

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

CSS

These methods get and set CSS-related properties of elements.

.addClass()

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

.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()

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

.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()

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.

Data

These methods allow us to associate arbitrary data with specific DOM elements.

.clearQueue()

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

.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()

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

jQuery.data()

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

jQuery.dequeue()

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

Deferred Object

The Deferred object, introduced in jQuery 1.5, is a chainable utility object created by calling the 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()

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

jQuery.dequeue()

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

deferred.catch()

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

deferred.done()

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

deferred.fail()

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

Dimensions

These methods are used to get and set the CSS dimensions for the various 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.

.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.

.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()

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()

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

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()

Perform a custom animation of a set of CSS properties.

.clearQueue()

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

.delay()

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

.dequeue()

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

.fadeIn()

Display the matched elements by fading them to opaque.

.fadeOut()

Hide the matched elements by fading them to transparent.

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()

Attach a handler to an event for the elements.

.blur()

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

.change()

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

.click()

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