JQuery Glossary JQ Home << JQuery Glossary
Glossary Term | Description |
---|---|
Ajax Events | Events produced from Ajax Requests. |
Anything | Anything virtual type. |
Document | A HTML document. |
DOM Element | An element in the Document Object Model. |
Event | A jQuery event type. |
HTML String | A string representing one or more DOM elements. |
jQuery object type | Information about the jQuery object. |
The jqXHR object type | Information about the jqXHR object. |
PlainObject object type | A JavaScript object containing zero or more key-value pairs. |
Promise object type | Information about the Promise object. |
Selector | A string containing a CSS or jQuery selector. |
Thenable object type | An object with a then method. |
Ajax EventsjQuery Reference << 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.
AnythingjQuery Reference << Top
Description.
The Anything
virtual type is used in the reference section to indicate that any type can be used or should be expected.
DocumentjQuery Reference << 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.
DOM ElementjQuery Reference << 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 on The JavaScript side of the site.
EventjQuery Reference << Top
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 StringjQuery Reference << 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 TypejQuery Reference << 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 trueArray
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.
- An empty
jQuery
object can be created with$()
in essence by passing no arguments at all. - An empty
jQuery
object will be created if a selector doesn't select any elements. - An empty
jQuery
object will be created if a chained method filters out all the elements.
jqXHR
Object TypejQuery Reference << 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 nativeXMLHttpRequest
object. ThejqXHR
object implements thePromise
interface, giving it all the properties, methods, and behavior of a Promise. See the lesson on theDeferred
object for details of this. For standardization with the theDeferred
object, thejqXHR
object also providesdone()
,fail()
andalways()
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-namedsuccess()
,error()
andcomplete()
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
success()
,error()
andcomplete()
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 usedone()
,fail()
andalways()
methods on request completion to future proof code or use the newthen()
andcatch()
methods for Promises/A+ compliance.
- It should be noted that
- A
jqXHR
object will expose the following properties and methods for backward compatibility with theXMLHttpRequest
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 TypejQuery Reference << Top
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 theObject
type.
Promise
Object TypejQuery Reference << Top
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 theDeferred
object:deferred.then()
,deferred.done()
,deferred.fail()
,deferred.always()
,deferred.pipe()
anddeferred.progress()
methods or determine the state through thedeferred.state()
method.
SelectorjQuery Reference << 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 reference section of the site jQuery Reference - Selectors.
ThenablejQuery Reference << Top
Description.
Any object that has a then
method.