JQuery Cheat Sheet

Basic use of jquery

Selectors

$(‘ *’ );	$(‘ element’ );
$(‘ . class’ );	$(‘ #ID’ );
$(‘ selector1, selector2, selectorN’ );

DOM

. append()	. prepend()
. appendTo()	. prependTo()
. after()	. before()
. insertAfter()	. insertBefore()
. next()	. prev()
. data()	. attr(’ attributeName’ , ’ atribute’ )
. removeProp()	prop()
. empty()	. remove()
. removeAttr()	. first()
. last()	. children()
. find()	. html()
. text();	. val()
. end()	. css(‘ styleName’ ,’ style’ )
. addClass()	. removeClass()
toggleClass()	. eq()
. end()	not()
var object = $. extend({}, object1, object2);

Animations and Effects

. slideUp()	. slideDown()
. width(‘ 0px’ )	. height(‘ 0px’ )
. fadeOut(ms)	. fadeIn(ms)
. hide(ms)	. show(ms)
. fadeToggle()	. slideToggle()
. toggle(‘ fast, slow’ ,ms)	. finish()
. stop()	. queue()
clearQueue()	. dequeue()
. animate({‘ regla: css’ }, ms, function(){});

Event List

	Browser Events
. resize()	. scroll()
	Document Loading
. holdReady()	ready()
	Event Handler Attachment
. on()	. bind()
	form events
. blur()	. change()	. focus()
. select()	. submit()
	Keyboard Events
. keydown()	. keypress()	. keyup()
	Mouse Events
. click()	. dblclick()	focusin()
focusout()	. hover(handlerIn, HandlerOut)	. hover(handlerInOut)
. mousedown()	. mouseenter()	. mouseleave()
. mousemove()	. mouseout()	. mouseover()
. mouseup()

basic syntax

$(‘ selector’ )
. methodOne()
. methodTwo()
. methodN();

encapsulated function

(function(){})();

Event Object

e. currentTarget	e. data
e. isDefaultPrevented()	e. namespace
e. isImmediatePropagationStopped()
e. isPropagationStopped()
e. pageX	e. pageY
e. preventDefault()	e. relatedTarget
e. result
e. stopImmediatePropagation()
e. stopPropagation()	e. target
e. timeStamp	e. type
e. which

Event Handler

$(‘ selector’ ). event(functionName);

$(‘ selector’ ). event(function(){});

$(‘ selector’ ). on(‘ event’ , functionName);

$(‘ selector’ )on(‘ event’ ,functionName(){});

$bind(’ event’ ,function);

$(this)

AJAX

========

Download This Cheat Sheet (PDF)

Comments
Rating: (3)

Jquery Bruce Cheat Sheet

jquery

Basic Selectors

*	All Elements (including head)
#ID	Element of specified ID
. classname	Elements of classname
tagname	Elements of tagname
a[href]	Anchor with href attribute
a[href=’ value’ ]	Anchor with href = ‘ value’
a[href\|=’ value’ ]	Anchor with href = ‘ value’ or href starting with ‘ value-‘
a[href^=’ value’ ]	Anchor with href beginning with ‘ value’
a[href! =’ value’ ]	Anchor with href not equal to value
a[href$=’ value’ ]	Anchor with href ending with ‘ value’
a[href*=’ value’ ]	Anchor with href containing ‘ value’
a[href~=’ value’ ]	Anchor with href = ‘ value’ or href containing complete word ‘ value’
a[C1][C2]	Anchor with attributes satisfying criteria C1 and C2
s1s2	Elements satisfying selector1 and selector2
s1, s2	Elements satisfying selector1 or selector2
s1> s2	Elements satisfying selector2 and direct child of selector1
s1 s2	Elements satisfying selector2 and descendants of selector1
s1+s2	Elements satisfying selector2 and next immediate sibiling of selector1
s1~s2	Elements satisfying selector2 and next sibiling of selector1

Form Filters

: button	< button> < input type = submit, reset or button>
: checkbox
: checked	checked or selected state
: selected	selected option of < select>
: disabled
: enabled
: file	< input type=” file” >
: focus
: image	< intput type=” image” >
: input	< input> < select> < textarea> < button>
: password	< input type=” password” >
: radio
: reset
: submit
: text	< input type=” text” >

Attributes and Properties

$(A). attr(name)	get specified attribute value (in string) for first element in $(A)
$(A). attr(name, value\|Function) $(A). attr({name: value\|Function, etc}}	set specified attribute for all elements in $(A)
$(A). removeAttr(name)
$(A). prop(name)	get specified attribute value for first element in $(A)
$(A). prop(name, value\|Function) $(A). attr({name: value\|Function, etc}}
$(A). removeProp(name)
$(A). data(name, value)	Store name=value pair in jQuery memory cache if name is my-love, it is stored as myLove
$(A). data([name])	Get name value from jQuery Cache else data-name attribute
$(A). removeData([name]) $. removeData(js element, [name])
$. hasData(js element)	Check if element has any associated data in jqeury cache

Position Filters

: first : last : eq(n)	nth element (0-based index)
: lt(n) : gt(n)	elements before/after nth index
: even : odd	elements at even /odd index
: first-child : last-child nth-child(n) nth-child(even\|odd) nth-child(Xn+Y)	n^th child (1-based index)
nth-last-child(n) nth-last-child(even\|odd) nth-last-child(Xn+Y)	n^th child, starting from the last
nth-of-type(n) nth-of-type(even\|odd) nth-of-type(Xn+Y)
nth-last-of-type(n) nth-last-of-type(even\|odd) nth-last-of-type(Xn+Y)
: only-child	elements with no sibilings
: only-of-type	elements with no sibilings of same type

Content Filters

: contains(text)	elements containing text
: empty
: has(selector)	elements containing at least one selector
: parent	elements with at least one child node

Other Filters

: animated	elements currently under animated control
: header	< h1> through < h6>
: visible
: hidden
: lang(language)
: not(selector)
: root	element which is root of the document
: target	element targeted by the document’ s URI’ s identifier

JQuery Cheat Sheet

Selectors

DOM

Anim­ations and Effects