jQuery GlossaryS2C Home   « jQuery Glossary


Glossary Term Description
Ajax EventsEvents produced from Ajax Requests.
DOM ElementAn element in the Document Object Model.
HTML DocumentA HTML document.
HTML StringA string representing one or more DOM elements.
jQuery object typeInformation about the jQuery object.
jqXHR object typeInformation about the jqXHR object.
PlainObject object typeA JavaScript object containing zero or more key-value pairs.
Promise object typeInformation about the Promise object.
SelectorA string containing a CSS or jQuery selector.

Ajax Eventsgo to top of page Top

Description.

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


Local Events Global Events
beforeSend().ajaxComplete()
complete().ajaxError()
error().ajaxSend()
success().ajaxStart()
.ajaxStop()
.ajaxSuccess()

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.

DOM Elementgo to top of page Top

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


HTML Documentgo to top of page Top

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.


HTML Stringgo to top of page Top

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 Typego to top of page Top

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 Typego to top of page Top

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
    readyStateAn integer indicating the current state of the request.
    responseTextUnderlying request responded with text.
    responseXMLUnderlying request responded with xml.
    statusResponse status code returned from the server.
    statusTextStatus text message returned by the response.

PlainObject Object Typego to top of page Top

Description.

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


Promise Object Typego to top of page Top

Description.

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


Selectorgo to top of page Top

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 1.10 reference section of the site jQuery 1.10 Reference - Selectors.


go to home page Homepage go to top of page Top