jQuery Cheat Sheet With Examples & Demos

In Featured, jQuery, Tips and Tricks by March 24th, 2013

813 Views

Here is the compiled Cheat Sheet of the different Selectors, Attributes, Manipulation, Traversing, Events and Effects available in jQuery. The aim of this cheat sheet is not just to provide with the list, but also to provide easy examples for your better understanding. In addition to this, you can simply try the Demo associated with each example to see the output in real time. Enjoy!

jQuery Cheat Sheet

Below is the complete Cheat Sheet. To see the examples and try out the demos, simply click on the link that you are interested in finding out more about.

Selectors

Basics

*
.class
element
#id
selector1, selectorN, …

Hierarchy

parent > child
ancestor descendant
prev + next
prev ~ siblings

Basic Filters

:animated
:eq()
:even
:first
:gt()
:header
:lang()
:last
:lt()
:not()
: odd
:root
:target

Content Filters

:contains()
:empty
:has()
:parent

Visibility Filters

:hidden
:visible

Attribute

[name|="value"]
[name*="value"]
[name~="value"]
[name$="value"]
[name="value"]
[name!=”value”
[name^="value"]
[name]
[name="value"][name2="value2"]

Child Filters

:first-child
:first-of-type
:last-child
:last-of-type
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
: only-child
: only-of-type()

Forms

:button
:checkbox
:checked
:disabled
:enabled
:focus
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

Attributes / CSS

Attributes

.attr()
.prop()
.removeAttr()
.removeProp()
.val()

CSS

.addClass()
.css()
jQuery.cssHooks
.hasClass()
.removeClass()
.toggleClass()

Dimensions

.height()
.innerHeight()
.innerWidth()
.outerHeight()
.outerWidth()
.width()

Offset

.offset()
.offsetParent()
.position()
.scrollLeft()
.scrollTop()

Data

jQuery.data()
.data()
jQuery.hasData()
jQuery.removeData()
.removeData()

Manipulation

Copying

.clone()

DOM Insertion, Around

.wrap()
.wrapAll()
.wrapInner()

DOM Insertion, Inside

.append()
.appendTo()
.html()
.prepend()
.prependTo()
.text()

DOM Insertion, Outside

.after()
.before()
.insertAfter()
.insertBefore()

DOM Removal

.detach()
.empty()
.remove()
.unwrap()

DOM Replacement

.replaceAll()
.replaceWith()

Traversing

Filtering

.eq()
.filter()
.first()
.has()
.is()
.last()
.map()
.not()
.slice()

Miscellaneous Traversing

.add()
.andSelf()
.contents()
.each()
.end()

Tree Traversal

.addBack()
.children()
.closest()
.find()
.next()
.nextAll()
.nextUntil()
.parent()
.parents()
.parentsUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()

Events

Browser Events

.error()
.resize()
.scroll()

Document Loading

.holdReady()
.load()
.ready()
.unload()

Event Handler Attachment

.bind()
.delegate()
.die()
.live()
.off()
.on()
.one()
.trigger()
.triggerHandler()
.unbind()
.undelegate()

Form Events

.blur()
.change()
.focus()
.select()
.submit()
Keyboard Events
.keydown()
.keypress()
.keyup()

Mouse Events

.click()
.dblclick()
.focusin()
.focusout()
.hover()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.toggle()

Event Object

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

Effects

Basics

.hide()
.show()
.toggle()

Custom

.animate()
.clearQueue()
.delay()
.dequeue()
jQuery.dequeue()
.finish()
jQuery.fx.interval
jQuery.fx.off
.queue()
jQuery.queue()
.stop()

Fading

.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()

Sliding

.slideDown()
.slideToggle()
.slideUp()

Ajax

Global Ajax Event Handlers

.ajaxComplete()
.ajaxError()
.ajaxSend()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()

Helper Functions

jQuery.param()
.serialize()
.serializeArray()

Low-Level Interface

jQuery.ajax()
jQuery.ajaxSetup()

Shorthand Methods

jQuery.get()
jQuery.getJSON()
jQuery.getScript()
.load()
jQuery.post()

Core

jQuery Object

jQuery()
jQuery.noConflict()
jQuery.sub()
jQuery.when()

Utilities

jQuery.boxModel
jQuery.browser
jQuery.contains()
jQuery.each()
jQuery.extend()
jQuery.globalEval()
jQuery.grep()
jQuery.inArray()
jQuery.isArray()
jQuery.isEmptyObject()
jQuery.isFunction()
jQuery.isNumeric()
jQuery.isPlainObject()
jQuery.isWindow()
jQuery.isXMLDoc()
jQuery.makeArray()
jQuery.map()
jQuery.merge()
jQuery.noop()
jQuery.now()
jQuery.parseHTML()
jQuery.parseJSON()
jQuery.parseXML()
jQuery.proxy()
jQuery.support
jQuery.trim()
jQuery.type()
jQuery.unique()

DOM Element Methods

.get()
.index()
.size()
.toArray()

Internals

.jquery
.context
jQuery.error()
.length
.pushStack()
.selector

Deferred Object

deferred.always()
deferred.done()
deferred.fail()
deferred.isRejected()
deferred.isResolved()
deferred.notify()
deferred.notifyWith()
deferred.pipe()
deferred.progress()
deferred.promise()
deferred.reject()
deferred.rejectWith()
deferred.resolve()
deferred.resolveWith()
deferred.state()
deferred.then()
.promise()

Callbacks Object

jQuery.Callbacks()
callbacks.add()
callbacks.disable()
callbacks.empty()
callbacks.fire()
callbacks.fired()
callbacks.fireWith()
callbacks.has()
callbacks.lock()
callbacks.locked()
callbacks.remove()

NOTE:

I will be updating this article regularly with links to new examples and demos, so make sure you bookmark this page

Your Turn!

What do you think of this cheat sheet with examples? Do you find them helpful? Please feel free to share your views by commenting below.l