Most JQuery methods are summarized below in the order they are documented in JQuery in Action by Bibeault and Katz. See the book or the JQuery API documentation for usage details.


Selectors documentation.

Initiate JQuery actions

This makes JQuery methods run on page load:

  jQuery(function() {
    //jQuery code here

Extend JQuery

An example of extending jQuery by adding a disable function that can be applied to the wrapped set:

  $.fn.disable = function() {
    return this.each(function() {
      if (this.disabled == null) this.disabled = true;

Methods to manipulate wrapped sets
size()number of elements
get(n)returns nth element (if n is negative, counts from end)
get()returns all elements as JS array
eq(n)returns nth element as a wrapped set with one element
first()returns first element as a wrapped set with one element
last()returns first element as a wrapped set with one element
toArray()returns all elems as a JS array
index(elem)returns ordinal index of elem in the wrapped set, or -1 if not found *
add(expr,context)creates copy of wrapped set plus elems described by expression, limited by context*
not(expr)creates copy of wrapped set minus elems described by expression*
filter(expr)creates copy of wrapped set including only elems described by expression*
slice(n,m)creates copy of wrapped set elems numbered n to m
slice(n)creates copy of wrapped set elems from number n to end
has(test)creates copy of wrapped set elems that have children that match test *
map(fn)maps set into a JS object after executing fn. fn can access this and for current elem
each(fn)invokes fn on each member of set
find(selector)new wrapped set with elems that are descendents of elems in orig set that match selector p51
is(selector)returns t/f for any elem matches selector
end()pops last set off method chain
andSelf()merges two last sets in method chain into one

* See documentation for more options. Sets are zero indexed.

* Expressions may be a selector, an elem, an array, or a function.

* $('img').not(function() {return !(this).hasClass('keepMe');})

* $('img').filter('[title*=dog]')

* $('div').has('img[alt]')

Methods to modify DOM elements
attr(name)returns value of attr (of first elem if more than one)
attr(name,value)sets value of attr *
attr(list)sets value of attrs in list for all elems *
removeAttr(name)removes attr for all elems
data(name)same as attr but uses jQ storage rather than DOM attributes
data(name,value) "
removeData(name) "
addClass(names)add class to elems (more than one can be space-delim)
removeClass(names)remove "
toggleClass(names)if class is there remove it, if not add it
toggleClass(ns,exp)adds class if exp true, removes it if exp false
hasClass(name)returns true or false
css(prop)returns value of CSS property (of first elem if more than one)
css(prop,value)sets CSS property to value
css(properties)sets CSS properties to names/values in properties object
width()gets width of elem also innerWidth, outerWidth
width(value)sets width of elems "
height()gets height of elem also innerHeight, outerHeight
height(value)sets height of elems "
offset()returns pixel offsets (left, top) of elem from doc top
position()returns pixel offsets (left, top) of elem from its parent
scrollLeft()gets horizontal scroll offset
scrollLeft(value)sets horizontal scroll offset same for scrollTop
html()gets HTML in elem
html(content)sets HTML in elems
text()gets all text in elems and concatenates into one string
text(content)sets text in elems (HTML escaped)
append(content)adds content to end of content in elems
prepend(content)adds content to beginning of content in elems
before(content)adds content as new first sibling of each elem
before(content)adds content as new last sibling of each elem
appendTosame as four above but w/source and target reversed
wrap(html)wrap each elem in html *
wrapAll(html)wrap all elems in html
wrapInner(html)same as wrap but wraps contents of elems
unwrap()removes parent elem of each elem
remove(selector)removes elems from DOM
detach(selector)removes elems from DOM but keeps their bound events and JQ data
empty()removes contents of elems
clone(tf)makes copy of set. true or false to include/exclude their event handlers
replaceWith(content)replaces elems with content
replaceAll(content)same but w/source and target reversed
val()gets value of first elem (must be form elem) *
val(value)sets value of first elem (must be form elem)
val(values)sets all checkboxes, radio set elems, selects in set to checked/selected if its value is found in values array

* $("a[href^='http://']").attr("target","_blank")

* $('input').attr({value: '', title: 'Please enter something'})

* $("a.surprise").wrap("<div class='hello'></div>")

* for radio set (returns value of the checked one)


for checkboxes:

    var checkboxValues = 
      $('[name="theBoxes"]:checked').map(function() {return $(this).val()}).toArray()

Event Methods for Wrapped Sets
bind(type,data,fn)registers fn as handler for event type*, setting if any specified
bind(eventMap)registers multiple handlers specified in JS map obj (property name is event type, value is fn)
event-name(fn)multiple methods, one for each event type* , that binds fn as handler
one(type,data,fn)same as bind but removes listener after executing it once
unbind(type,fn)removes fn from event. fn can't be anonymous so its varname can be used here
unbind(event)removes whatever listener triggered this event instance
live(type,data,fn)like bind but also adds to newly created elems
die(type,fn)removes handlers specified by live and cancels effect of live for new elems
trigger(type,data)invokes all handlers for event (data is separate from handler data)
triggerHandler(type,data)invokes all handlers for event without bubbling, semantic actions, or live events
event-name()multiple methods, one for each event type*, to invoke that event on elems in set
toggle(fn1,fn2,...)like bind('click') but cycles through the handler fns
hover(fn1,fn2)like bind('mouseenter',fn1) and bind('mouseleave',fn2)
hover(fn)uses same fn for bother enter and leave
Event Types*
Event Instance Properties


Event Instance Methods


Event Namespacing

p109 is click event in both order and prod namespaces

usage example:


unbinds all events in the order namespace

hide()hides elems instantly
hide(speed,fn)'slow','normal','fast' fn called when hiding is complete
show()shows elems instantly
show(speed,fn)'slow','normal','fast' fn called when showing is complete
fadeIn(speed,fn)show by increasing opacity
fadeOut(speed,fn)hide by decreasing opacity
fadeTo(speed,op,fn)change opacity (0.0 .. 1.0)
slideDown(speed,fn)show by moving bottom of elem
slideUp(speed,fn)hide by moving bottom of elem
stop(flag,finish)stops current animation, if flag also queued anims, can finish this one then stop if 2nd flag
animatedesign your own effect p154
queueorganize queues of anims p162
Utility Methods
$.fx.offdisables animation of effects
$.fx.onenables animation of effects
$.supportshows supported features p.174
$.support.boxModeltrue if std box model
$.support.cssFloattrue if std float behavior
$.support.hrefNormalizedtrue if no editing on retrieval of href
$.support.htmlSerializetrue if inject innerHTML link elems CSS used
$.support.leadingWhitespace true if leading whitespace retained in injected innerHTML
$.support.noCloneEventtrue if events NOT cloned when elem cloned
$.support.objectAlltrue if getElementsByTagName retruns all elems for '*'
$.support.opacitytrue if CSS opacity works
$.support.scriptEvaltrue if browser will eval injected script tags
$.support.styletrue if has 'style' attribute
$.support.tbodytrue if DOESN'T insert tbody tag in innerHTML tables
$.browser(deprecated) shows browser details
$.noconflict(flag)gives $ back to other JS lib. if flag true, gives jQuery back too
$.trim(string)trims leading and trailing whitespace
$.each(arrayOrObject,fn)two params of fn are array index or property name, and value. this is also set to value
$.grep(array,fn,flag)returns new array of all elems where fn is true. two params to fn are index and value.if flag is true, new array is elems where fn is false
$.inArray(value,array)array.index(value) returns -1 if not found
$.makeArray(obj)converts array-like obj (such as NodeList) to array
$.merge(array1,array2)adds array2 elems to array1
$.extend(deep,target,sources)extends target w/properties of source(s) . deep flag sets deep or shallow copy
$.param(params)serializes form control wrapped set or JS obj into url query string
$.isEmptyObject(obj)=has no properties?
$.isPlainObject(obj)=created with {} or new?
$.noop()do nothing
$.contains(elem1,elem2)is DOM elem2 contained in DOM elem1?
$.data(elem,name,value)adds named value to JQ data of elem
$.removeData(elem,name)removes named value from JQ data of elem
$.proxysets context p198
$.parseJSON(jsonString)returns json
$.globalEval(codeString)evals in global context(!)
$.getScript(url,fn)fetches script from url and runs fn on success. params script source, 'success'