jQuery Selectors, Objects, and Methods - Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5, Fourth Edition (2015)

Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5, Fourth Edition (2015)

Appendix E. jQuery Selectors, Objects, and Methods

Chapter 21 gives you a good grounding in using the jQuery JavaScript Library. To help get you started with using jQuery to the best effect, here’s a comprehensive list of the selectors, objects, and methods it uses, a number of which there wasn’t room to introduce in this book, but you are ready for them, because you should now know enough to be able to use them correctly.

Please bear in mind, though, that sometimes new features are added, bugs are fixed, and other features can become deprecated or removed. So you can keep up-to-date with the latest developments, information on deprecated or removed features (not detailed here), and newer releases of jQuery, at jquery.com and api.jquery.com.

jQuery Selectors

('*')

Selects all elements.

('element')

Selects all elements with the given tag name.

('#id')

Selects a single element with the given id attribute.

('.class')

Selects all elements with the given class.

('selector1, selector2, selectorN')

Selects the combined results of all the specified selectors.

('ancestor descendant')

Selects all elements that are descendants of a given ancestor.

('prev + next')

Selects all next elements matching next that are immediately preceded by a sibling prev.

('prev ~ siblings')

Selects all sibling elements that follow after the prev element, have the same parent, and match the filtering siblings selector.

('parent > child')

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

[name]

Selects elements that have the specified attribute name, with any value.

[name|='value']

Selects elements that have the specified attribute name with a value either equal to a given string or starting with that string followed by a hyphen (-).

[name*='value']

Selects elements that have the specified attribute name with a value containing a given substring.

[name~='value']

Selects elements that have the specified attribute name with a value containing a given word, delimited by spaces.

[name$='value']

Selects elements that have the specified attribute name with a value ending exactly with a given string. The comparison is case-sensitive.

[name='value']

Selects elements that have the specified attribute name with a value exactly equal to a certain value.

[name!='value']

Selects elements that either don’t have the specified attribute name, or do have the specified attribute but not with a certain value.

[name^='value']

Selects elements that have the specified attribute name with a value beginning exactly with a given string.

[name='value'][name2='value2']

Matches elements that match all of the specified attribute filters.

:animated

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

:button

Selects all button elements and elements of type button.

:checkbox

Selects all elements of type checkbox.

:checked

Matches all elements that are checked or selected.

:contains(text)

Selects all elements that contain the specified text.

:disabled

Selects all elements that are disabled.

:empty

Selects all elements that have no children (including text nodes).

:enabled

Selects all elements that are enabled.

:eq(n)

Selects the element at index n within the matched set.

:even

Selects even elements, zero-indexed. See also odd.

:file

Selects all elements of type file.

:first-child

Selects all elements that are the first child of their parent.

:first-of-type

Selects all elements that are the first among siblings of the same element name.

:first

Selects the first matched element.

:gt(index)

Selects all elements at an index greater than index within the matched set.

:has(selector)

Selects elements that contain at least one element that matches the specified selector.

:image

Selects all elements of type image.

:header

Selects all elements that are headers, like h1, h2, h3, and so on.

:hidden

Selects all elements that are hidden.

:input

Selects all input, textarea, select, and button elements.

:lang(language)

Selects all elements of the specified language.

:last-child

Selects all elements that are the last child of their parent.

:last-of-type

Selects all elements that are the last among siblings of the same element name.

:last

Selects the last matched element.

:lt(index)

Selects all elements at an index less than index within the matched set.

:not(selector)

Selects all elements that do not match the given selector.

:nth-child(n)

Selects all elements that are the nth child of their parent.

:nth-last-child(n)

Selects all elements that are the nth child of their parent, counting from the last element to the first.

:nth-last-of-type(n)

Selects all elements that are the nth child of their parent, counting from the last element to the first.

:nth-of-type(n)

Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

:odd

Selects odd elements, zero-indexed. See also: even.

:only-child

Selects all elements that are the only child of their parent.

:only-of-type

Selects all elements that have no siblings with the same element name.

:parent

Selects all elements that have at least one child node (either an element or text).

:password

Selects all elements of type password.

:radio

Selects all elements of type radio.

:reset

Selects all elements of type reset.

:root

Selects the element that is the root of the document.

:selected

Selects all elements that are selected.

:submit

Selects all elements of type submit.

:target

Selects the target element indicated by the fragment identifier of the document’s URI.

:text

Selects all elements of type text.

:visible

Selects all elements that are visible.

jQuery Objects

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.

event.delegateTarget

The element where the currently called jQuery event handler was attached.

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

jquery

A string containing the jQuery version number.

length

The number of elements in the jQuery object.

jQuery.cssHooks

Hooks directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

jQuery.fx.interval

The rate (in milliseconds) at which animations fire.

jQuery.fx.off

Globally disables all animations.

jQuery Methods

$

Returns a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

add

Adds elements to the set of matched elements.

addBack

Adds the previous set of elements on the stack to the current set, optionally filtered by a selector.

addClass

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

after

Inserts content, specified by the parameter, after each element in the set of matched elements.

ajaxComplete

Registers a handler to be called when Ajax requests complete.

ajaxError

Registers a handler to be called when Ajax requests complete with an error.

ajaxSend

Attaches a function to be executed before an Ajax request is sent.

ajaxStart

Registers a handler to be called when the first Ajax request begins.

ajaxStop

Registers a handler to be called when all Ajax requests have completed.

ajaxSuccess

Attaches a function to be executed whenever an Ajax request completes successfully.

animate

Performs a custom animation of a set of CSS properties.

append

Inserts content, specified by the parameter, to the end of each element in the set of matched elements.

appendTo

Inserts every element in the set of matched elements to the end of the target.

attr

Gets the value of an attribute for the first element in the set of matched elements or sets one or more attributes for every matched element.

before

Inserts content, specified by the parameter, before each element in the set of matched elements.

bind

Attaches a handler to an event for the elements.

blur

Binds an event handler to the blur JavaScript event, or triggers that event on an element.

change

Binds an event handler to the change JavaScript event, or triggers that event on an element.

children

Gets the children of each element in the set of matched elements, optionally filtered by a selector.

clearQueue

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

click

Binds an event handler to the click JavaScript event, or triggers that event on an element.

clone

Creates a deep copy of the set of matched elements.

closest

For each element in the set, gets the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

contents

Gets the children of each element in the set of matched elements, including text and comment nodes.

css

Gets the value of a style property for the first element in the set of matched elements or sets one or more CSS properties for every matched element.

data

Stores arbitrary data associated with the matched elements or returns the value at the named data store for the first element in the set of matched elements.

dblclick

Binds an event handler to the dblclick JavaScript event, or triggers that event on an element.

callbacks.add

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

callbacks.disable

Disables a callback list from doing anything more.

callbacks.disabled

Determines if the callback list has been disabled.

callbacks.empty

Removes all of the callbacks from a list.

callbacks.fire

Calls all of the callbacks with the given arguments.

callbacks.fired

Determines if the callbacks have already been called at least once.

callbacks.fireWith

Calls all callbacks in a list with the given context and arguments.

callbacks.has

Determines whether a supplied callback is in a list.

callbacks.lock

Locks a callback list in its current state.

callbacks.locked

Determines if the callback list has been locked.

callbacks.remove

Removes a callback or a collection of callbacks from a callback list.

deferred.always

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

deferred.done

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

deferred.fail

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

deferred.notify

Calls progressCallbacks on a Deferred object with the given arguments.

deferred.notifyWith

Calls the progressCallbacks on a Deferred object with the given context and arguments.

deferred.progress

Adds handlers to be called when the Deferred object generates progress notifications.

deferred.promise

Returns a Deferred’s Promise object.

deferred.reject

Rejects a Deferred object and calls any failCallbacks with the given arguments.

deferred.rejectWith

Rejects a Deferred object and calls any failCallbacks with the given context and arguments.

deferred.resolve

Resolves a Deferred object and calls any doneCallbacks with the given arguments.

deferred.resolveWith

Resolves a Deferred object and calls any doneCallbacks with the given context and arguments.

deferred.state

Determines the current state of a Deferred object.

deferred.then

Adds handlers to be called when the Deferred object is resolved, rejected, or still in progress.

delay

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

delegate

Attaches 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

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

detach

Removes the set of matched elements from the DOM.

each

Iterates over a jQuery object, executing a function for each matched element.

empty

Removes all child nodes of the set of matched elements from the DOM.

end

Ends the most recent filtering operation in the current chain and returns the set of matched elements to its previous state.

eq

Reduces the set of matched elements to the one at the specified index.

event.isDefaultPrevented

Returns whether preventDefault was ever called on this event object.

event.isImmediatePropagationStopped

Returns whether stopImmediatePropagation was ever called on this event object.

event.isPropagationStopped

Returns whether stopPropagation was ever called on this event object.

event.preventDefault

If this method is called, the default action of the event will not be triggered.

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.

fadeIn

Displays the matched elements by fading them to opaque.

fadeOut

Hides the matched elements by fading them to transparent.

fadeTo

Adjusts the opacity of the matched elements.

fadeToggle

Displays or hides the matched elements by animating their opacity.

filter

Reduces the set of matched elements to those that match the selector or pass the function’s test.

find

Gets the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

finish

Stops the currently running animation, removes all queued animations, and completes all animations for the matched elements.

first

Reduces the set of matched elements to the first in the set.

focus

Binds an event handler to the focus JavaScript event, or triggers that event on an element. Selects element if it is currently focused.

focusin

Binds an event handler to the focusin event.

get

Retrieves the DOM elements matched by the jQuery object.

has

Reduces the set of matched elements to those that have a descendant that matches the selector or DOM element.

hasClass

Determines whether any matched elements are assigned the given class.

height

Gets the current computed height for the first element in the set of matched elements or sets the height of every matched element.

hide

Hides the matched elements.

hover

Binds one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

html

Gets the HTML contents of the first element in the set of matched elements or sets the HTML contents of every matched element.

index

Searches for a given element from among the matched elements.

innerHeight

Gets the current computed height for the first element in the set of matched elements, including padding but not border.

innerWidth

Gets the current computed inner width (including padding but not border) for the first element in the set of matched elements or sets the inner width of every matched element.

insertAfter

Inserts every element in the set of matched elements after the target.

insertBefore

Inserts every element in the set of matched elements before the target.

is

Checks the current matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments.

jQuery

Returns a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

jQuery.ajax

Performs an asynchronous HTTP (Ajax) request.

jQuery.ajaxPrefilter

Handles custom Ajax options or modifies existing options before each request is sent and before they are processed by ajax.

jQuery.ajaxSetup

Sets default values for future Ajax requests. Its use is not recommended.

jQuery.ajaxTransport

Creates an object that handles the actual transmission of Ajax data.

jQuery.Callbacks

A multipurpose callback list object that provides a powerful way to manage callback lists.

jQuery.contains

Checks to see if a DOM element is a descendant of another DOM element.

jQuery.cssHooks

Hooks directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

jQuery.data

Stores arbitrary data associated with the specified element and/or returns the value that was set.

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.

jQuery.dequeue

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

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 function’s arguments object) are iterated by numeric index, from 0 to length -1. Other objects are iterated via their named properties.

jQuery.error

Takes a string and throws an exception containing it.

jQuery.extend

Merges the contents of two or more objects together into the first object.

jQuery.fn.extend

Merges the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

jQuery.get

Loads data from the server using an HTTP Get request.

jQuery.getJSON

Loads JSON-encoded data from the server using a Get HTTP request.

jQuery.getScript

Loads a JavaScript file from the server using a Get HTTP request, and then executes it.

jQuery.globalEval

Executes some JavaScript code globally.

jQuery.grep

Finds the elements of an array that satisfy a filter function. The original array is not affected.

jQuery.hasData

Determines whether an element has jQuery data associated with it.

jQuery.holdReady

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

jQuery.inArray

Searches for a specified value within an array and returns its index (or -1 if not found).

jQuery.isArray

Determines whether the argument is an array.

jQuery.isEmptyObject

Checks to see if an object is empty (contains no enumerable properties).

jQuery.isFunction

Determines if the argument passed is a JavaScript function object.

jQuery.isNumeric

Determines whether its argument is a number.

jQuery.isPlainObject

Checks to see if an object is a plain object (created using {} or new Object).

jQuery.isWindow

Determines whether the argument is a window.

jQuery.isXMLDoc

Checks to see if a DOM node is within an XML document (or is an XML document).

jQuery.makeArray

Converts an array-like object into a true JavaScript array.

jQuery.map

Translates all items in an array or object to a new array of items.

jQuery.merge

Merges the contents of two arrays together into the first array.

jQuery.noConflict

Relinquishes jQuery’s control of the $ variable name.

jQuery.noop

An empty function.

jQuery.now

Returns a number representing the current time.

jQuery.param

Creates a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

jQuery.parseHTML

Parses a string into an array of DOM nodes.

jQuery.parseJSON

Takes a well-formed JSON string and returns the resulting JavaScript object.

jQuery.parseXML

Parses a string into an XML document.

jQuery.post

Loads data from the server using an HTTP POST request.

jQuery.queue

Shows or manipulates the queue of functions to be executed on the matched element.

jQuery.removeData

Removes a previously stored piece of data.

jQuery.trim

Removes the whitespace from the beginning and end of a string.

jQuery.type

Determines the internal JavaScript class of an object.

jQuery.unique

Sorts an array of DOM elements, in place, with the duplicates removed. This works only on arrays of DOM elements, not strings or numbers.

jQuery.when

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

keydown

Binds an event handler to the keydown JavaScript event, or triggers that event on an element.

keypress

Binds an event handler to the keypress JavaScript event, or triggers that event on an element.

keyup

Binds an event handler to the keyup JavaScript event, or triggers that event on an element.

last

Reduces the set of matched elements to the final one in the set.

load

Loads data from the server and places the returned HTML into the matched element.

map

Passes each element in the current matched set through a function, producing a new jQuery object containing the return values.

mousedown

Binds an event handler to the mousedown JavaScript event, or triggers that event on an element.

mouseenter

Binds an event handler to be fired when the mouse enters an element, or triggers that handler on an element.

mouseleave

Binds an event handler to be fired when the mouse leaves an element, or triggers that handler on an element.

mousemove

Binds an event handler to the mousemove JavaScript event, or triggers that event on an element.

mouseout

Binds an event handler to the mouseout JavaScript event, or triggers that event on an element.

mouseover

Binds an event handler to the mouseover JavaScript event, or triggers that event on an element.

mouseup

Binds an event handler to the mouseup JavaScript event, or triggers that event on an element.

next

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

nextAll

Gets all following siblings of each element in the set of matched elements, optionally filtered by a selector.

nextUntil

Gets all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

off

Removes an event handler.

offset

Gets the current coordinates of the first element, or sets the coordinates of every element, in the set of matched elements, relative to the document.

offsetParent

Gets the closest ancestor element that is positioned.

on

Attaches an event handler function for one or more events to the selected elements.

one

Attaches a handler to an event for the elements. The handler is executed at most once per element per event type.

outerHeight

Gets 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

Gets the current computed width for the first element in the set of matched elements, including padding and border.

parent

Gets the parent of each element in the current set of matched elements, optionally filtered by a selector.

parents

Gets the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

parentsUntil

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

position

Gets the current coordinates of the first element in the set of matched elements, relative to the offset parent.

prepend

Inserts content, specified by the parameter, to the beginning of each element in the set of matched elements.

prependTo

Inserts every element in the set of matched elements to the beginning of the target.

prev

Gets the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

prevAll

Gets all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

prevUntil

Gets all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

promise

Returns a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

prop

Gets the value of a property for the first element in the set of matched elements or sets one or more properties for every matched element.

pushStack

Adds a collection of DOM elements onto the jQuery stack.

queue

Shows or manipulates the queue of functions to be executed on the matched elements.

ready

Specifies a function to execute when the DOM is fully loaded.

remove

Removes the set of matched elements from the DOM.

removeAttr

Removes an attribute from each element in the set of matched elements.

removeClass

Removes a single class, multiple classes, or all classes from each element in the set of matched elements.

removeData

Removes a previously stored piece of data.

removeProp

Removes a property for the set of matched elements.

replaceAll

Replaces each target element with the set of matched elements.

replaceWith

Replaces each element in the set of matched elements with the provided new content and returns the set of elements that was removed.

resize

Binds an event handler to the resize JavaScript event, or triggers that event on an element.

scroll

Binds an event handler to the scroll JavaScript event, or trigger that event on an element.

scrollLeft

Gets the current horizontal position of the scroll bar for the first element in the set of matched elements or sets the horizontal position of the scroll bar for every matched element.

scrollTop

Gets the current vertical position of the scroll bar for the first element in the set of matched elements or sets the vertical position of the scroll bar for every matched element.

select

Binds an event handler to the select JavaScript event, or triggers that event on an element.

serialize

Encodes a set of form elements as a string for submission.

serializeArray

Encodes a set of form elements as an array of names and values.

show

Displays the matched elements.

siblings

Gets the siblings of each element in the set of matched elements, optionally filtered by a selector.

slice

Reduces the set of matched elements to a subset specified by a range of indices.

slideDown

Displays the matched elements with a sliding motion.

slideToggle

Displays or hides the matched elements with a sliding motion.

slideUp

Hides the matched elements with a sliding motion.

stop

Stops the currently running animation on the matched elements.

submit

Binds an event handler to the submit JavaScript event, or triggers that event on an element.

text

Gets the combined text contents of each element in the set of matched elements, including their descendants, or sets the text contents of the matched elements.

toArray

Retrieves all the elements contained in the jQuery set, as an array.

toggle

Displays or hides the matched elements.

toggleClass

Adds or removes 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 switch argument.

trigger

Executes all handlers and behaviors attached to the matched elements for the given event type.

triggerHandler

Executes all handlers attached to an element for an event.

unbind

Removes a previously attached event handler from the elements.

undelegate

Removes a handler from the event for all elements that match the current selector, based upon a specific set of root elements.

unwrap

Removes the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

val

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

width

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

wrap

Wraps an HTML structure around each element in the set of matched elements.

wrapAll

Wraps an HTML structure around all elements in the set of matched elements.

wrapInner

Wraps an HTML structure around the content of each element in the set of matched elements.