Selectors documentation.
This makes JQuery methods run on page load:
jQuery(function() {
//jQuery code here
});
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;
});
}
| 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 this.id 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]')
| 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 |
| appendTo | same as four above but w/source and target reversed |
| prependTo | |
| insertBefore | |
| insertAfter | |
| 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)
$('[name="radioGroup"]:checked').val()
for checkboxes:
var checkboxValues =
$('[name="theBoxes"]:checked').map(function() {return $(this).val()}).toArray()
| bind(type,data,fn) | registers fn as handler for event type*, setting event.data 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 |
| blur | focusin | mousedown | mouseup |
| change | focusout | mouseenter | ready |
| click | keydown | mouseleave | resize |
| dblclick | keypress | mousemove | scroll |
| error | keyup | mouseout | select |
| focus | load | mouseover | submit |
| unload |
| altKey | ctrlKey | currentTarget | data |
| metaKey | pageX | pageY | relatedTarget |
| screenX | screenY | shiftKey | result |
| target | timestamp | type | which |
| preventDefault() |
| stopPropagation() |
| stopImmediatePropagation() |
| isDefaultPrevented() |
| isPropagationStopped() |
| isImmediatePropagationStopped() |
click.order.prod is click event in both order and prod namespaces
usage example:
unbind('.order')
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 |
| toggle() | hide/show |
| toggle(speed,fn) | " |
| 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 |
| slideToggle(speed,fn) | hide/show |
| stop(flag,finish) | stops current animation, if flag also queued anims, can finish this one then stop if 2nd flag |
| animate | design your own effect p154 |
| queue | organize queues of anims p162 |
| dequeue | " |
| clearQueue | " |
| delay | " |
| $.fx.off | disables animation of effects |
| $.fx.on | enables animation of effects |
| $.support | shows supported features p.174 |
| $.support.boxModel | true if std box model |
| $.support.cssFloat | true if std float behavior |
| $.support.hrefNormalized | true if no editing on retrieval of href |
| $.support.htmlSerialize | true if inject innerHTML link elems CSS used |
| $.support.leadingWhitespace | true if leading whitespace retained in injected innerHTML |
| $.support.noCloneEvent | true if events NOT cloned when elem cloned |
| $.support.objectAll | true if getElementsByTagName retruns all elems for '*' |
| $.support.opacity | true if CSS opacity works |
| $.support.scriptEval | true if browser will eval injected script tags |
| $.support.style | true if has 'style' attribute |
| $.support.tbody | true if DOESN'T insert tbody tag in innerHTML tables |
| $.browser | (deprecated) shows browser details |
| $.browser.msie | t/f |
| $.browser.mozilla | t/f |
| $.browser.safari | t/f |
| $.browser.opera | t/f |
| $.browser.version | numeric |
| $.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 |
| $map(array,fn) | array.map{&:fn} |
| $.inArray(value,array) | array.index(value) returns -1 if not found |
| $.makeArray(obj) | converts array-like obj (such as NodeList) to array |
| $.unique(array) | array.uniq |
| $.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 |
| $.isArray(obj) | |
| $.isEmptyObject(obj) | =has no properties? |
| $.isFunction(obj) | |
| $.isPlainObject(obj) | =created with {} or new? |
| $.isXMLDoc(obj) | |
| $.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 |
| $.proxy | sets 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' |