jQuery GlossaryS2C Home « jQuery Glossary

Ajax EventsTop

Description.

Ajax requests produce a number of local and global events that can be subscribed to.

Event Broadcasting.

Following is the full list of Ajax events and the sequence that they are broadcast in.

• .ajaxStart( handler() ) - global event
  Register an Ajax Event handler to be called when an Ajax request starts and no other requests are in progress.
  
  • beforeSend(jqXHR, settings) - local event
    A pre-request callback function that can be used to modify the jqXHR and will be called regardless of the type of request.
  • .ajaxSend( handler(event, jqXHR, ajaxSettings) ) - global event
    Register an Ajax Event handler to be called before Ajax requests are sent.
  • success(data, textStatus, jqXHR) - local event
    A function or an array of functions, where each function gets called in turn, that is called if the request succeeds.
  • .ajaxSuccess( handler(event, jqXHR, ajaxSettings) ) - global event
    Register an Ajax Event handler to be called whenever an Ajax request completes successfully.
  • error(jqXHR, textStatus, errorThrown) - local event
    A function or an array of functions, where each function gets called in turn, that is called if the request fails.
  • .ajaxError( handler(event, jqXHR, ajaxSettings) ) - global event
    Register an Ajax Event handler to be called when Ajax requests complete with an error.
  • complete(jqXHR, textStatus) - local event
    A function or an array of functions, where each function gets called in turn, to be called when success and fail callbacks have executed and the request has finished.
  • .ajaxComplete( handler(event, jqXHR, ajaxSettings) ) - global event
    Register an Ajax Event handler to be called when Ajax requests complete.
• .ajaxStop( handler() ) - global event
  Register an Ajax Event handler to be called when all Ajax requests are finished.

AnythingTop

Description.

The Anything virtual type is used in the reference section to indicate that any type can be used or should be expected.

HTML DocumentTop

Description.

An existing or new HTML document to copy 'on the fly' HTML into.

Generally this is for the purpose of adding HTML strings to document content for future use.

A string can be explicitly parsed to HTML using the jQuery.parseHTML() method.

DOM ElementTop

Description.

An element in the Document Object Model (DOM) consists of attributes, text and children and comes with methods to traverse the parent and children and to gain access to its attributes.

For more information on the DOM take a look at the JavaScript Advanced Tutorials - The Document Object Model lesson in the JavaScript section of the site.

Traversing the DOM is a time consuming and laborious task which is exascerbated when we want to add to or modify the DOM. Luckily for us jQuery offers us much easier navigation through the DOM using the various
jQuery Reference - Traversal methods available in the API.

EventTop

Description.

jQuery creates its own Event object using The JavaScript Event object that is bound by the browser in accordance with the level 3 Document Object Model Events definition, the W3C Working Draft.

The standard events in the Document Object Model are:

 beforeunload,  blur,  change,  click,  dblclick,  focus,  keydown,  keypress,  keyup,  mousedown,  mouseenter,  mouseleave,  mousemove,  mouseout,  mouseover,  mouseup,  load,  resize,  scroll,  select,  submit and  unload.

The following properties are normalized by jQuery for cross-browser consistency:

 metaKey,  pageX,  pageY,  relatedTarget,  target and  which.

See the Event Object tutorial for more information and examples.

HTML StringTop

Description.

A string representing one or more DOM elements in jQuery is designated as a HTMLstring and is generally used to insert HTML into the document.

When passed as an argument of the jQuery() function the string is identifiable as HTML if it starts with a HTML tag and is parsed as such until the closing HTML tag.

A string can be explicitly parsed to HTML using the jQuery.parseHTML() method.

jQuery Object TypeTop

Description.

A jQuery object is a collection of DOM elements that have been selected from a document or created from a HTML string.

• The jQuery object itself behaves much like an array in the fact that it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. You do not get full access to the methods of a true Array object.
• jQuery methods often use CSS selectors to match elements from a document and so the set of elements in a jQuery object is often referred to as 'the matched set', 'the wrapped set' or 'selected elements'.

Element Selection.

So how do we select a group of elements to wrap? Well we use the jQuery() function for this purpose. The primary formulation of this function matches a set of elements via a string containing a CSS or custom jQuery selector. We can also use the &() alias for jQuery unless the jQuery.noConflict() has been called to disable this option.

// Formal syntax
jQuery(ourSelector)

// Shorthand version (we will use this)
$(ourSelector)

Chaining Methods and the jQuery Stack.

A lot of jQuery methods return the jQuery object itself, so that method calls can be chained:

$(function(){
  $('#btn1').one('click', function(){
    $('#list1').closest('li')
               .css('backgroundColor', 'olive');
  });
});

When we chain our traversal or filtering methods together, many of the jQuery methods used operate on an existing jQuery instance and produce a new jQuery object that match a different set of elements. jQuery maintains the previous set of elements, as well as the new set of elements as an internal stack. We can visualize this stack where the newest set of elements is 'pushed' onto the stack. As we continue through our jQuery chain, each new traversal or filtering method will create a new set of elements that gets 'pushed' onto the stack. The .end() method allows us to 'pop' the most recent set of elements off the stack.

Empty jQuery Object.

A jQuery object may be empty and so contain no DOM elements. Any further methods called on an empty jQuery object will have no effect as there are no elements to work on.

1. An empty jQuery object can be created with $() in essence by passing no arguments at all.
2. An empty jQuery object will be created if a selector doesn't select any elements.
3. An empty jQuery object will be created if a chained method filters out all the elements.

jqXHR Object TypeTop

Description.

The jqXHR object is returned from many of the methods in the jQuery Ajax suite.

• A jqXHR object which is a superset of the browser's native XMLHttpRequest object. The jqXHR object implements the Promise interface, giving it all the properties, methods, and behavior of a Promise. See the lesson on the Deferred object for details of this. For standardization with the the Deferred object, the jqXHR object also provides .always(), .done() and .fail() methods. These methods take a function argument that is called when an Ajax request terminates and the function receives the same arguments as the same-named .complete(), .success() and .error() setting callbacks respectively. This allows assignment of multiple callbacks for a single request as well as assigning callbacks after the request has completed. For completed requests, the callback is fired immediately.
  • It should be noted that .complete(), .success() and .error() callbacks will be deprecated from use on request completion from jQuery 1.8. This is for completion processing only and the Ajax settings will still have these values. Best practice is to use .always(), .done() and .fail() methods on request completion to future proof code.
• A jqXHR object will expose the following properties and methods for backward compatibility with the XMLHttpRequest object:
  
  

  jqXHR Object	Description
  Methods
  abort()	Cancels the currently executing request.
  getAllResponseHeaders()	Returns a string containing the names and value of all response headers.
  getResponseHeader(name)	Returns the value of the specified response headers.
  .overrideMimeType()	Used in the beforeSend() callback function, to modify the response content-type header.
  setRequestHeader(name, value)	Set a request header using the specified name and value.
  Properties
  readyState	An integer indicating the current state of the request.
  responseText	Underlying request responded with text.
  responseXML	Underlying request responded with xml.
  status	Response status code returned from the server.
  statusText	Status text message returned by the response.

PlainObject Object TypeTop

Description.

This data type is a JavaScript Object object containing zero or more key/value pairs.

• The jQuery.isPlainObject() can be used to test whether an object is of the Object type.

Promise Object TypeTop

Description.

A Promise object is just a copy of a Deferred object without any notify/resolve/reject methods.

• A Promise object provides the following subset of methods of the Deferred object: deferred.then(), deferred.done(), deferred.fail(), deferred.always(), deferred.pipe() and deferred.progress() methods or determine the state through the deferred.state() method.

SelectorTop

Description.

A string containing a CSS or jQuery selector which is used in jQuery to select DOM elements from a DOM document. In general this is the DOM document present in all browsers, but can also be an XML document received via AJAX. The jQuery selectors available comprise of W3C CSS selectors along with some custom selectors only available when using jQuery. The full list of selectors can be found in the jQuery 3.5 Reference section of the site jQuery 3.5 Reference - Selectors.

ThenableTop

Description.

Any object that has a then method.

Homepage Top