jQuery Cheat Sheet

This is a quick list of the most used jQuery methods. Keep it near you while you code. The links go to the chapters with the full explanation and examples.

Selectors and ready

Code	Meaning
$(function () { ... })	Run when the DOM is ready (details)
$('#id'), $('.class'), $('tag')	Select by id, class or tag (details)
$('ul > li'), $('a[href^="https"]')	Child and attribute selectors
.first(), .last(), .eq(n)	Pick one element

Events

Code	Meaning
.on('click', fn)	Attach an event (details)
.on('click', 'li', fn)	Delegated event (details)
.off('click'), .one('click', fn)	Remove an event, run only once
.trigger('click')	Run an event by code
e.preventDefault(), e.stopPropagation()	Stop the default action, stop the bubbling

Effects

Code	Meaning
.hide(), .show(), .toggle()	Hide and show (details)
.fadeIn(), .fadeOut(), .fadeToggle()	Fade (details)
.slideDown(), .slideUp(), .slideToggle()	Slide
.animate({ width: '300px' }, 500)	Custom animation (details)
.stop(), .delay(ms)	Stop and wait

Content, attributes and CSS

Code	Meaning
.text(), .html(), .val()	Get or set content and values (get, set)
.attr('href'), .prop('checked'), .data('id')	Attributes, properties and data
.removeAttr('title')	Remove an attribute
.addClass(), .removeClass(), .toggleClass(), .hasClass()	Classes (details)
.css('color', 'red')	Inline style (details)
.width(), .height(), .offset()	Size and position (details)

Add and remove elements

Code	Meaning
.append(), .prepend(), .after(), .before()	Add content (details)
.appendTo(), .clone(), .wrap()	Add, copy and wrap
.remove(), .empty(), .detach(), .replaceWith()	Remove and replace (details)

Traversing

Code	Meaning
.parent(), .parents(), .closest()	Go up (details)
.children(), .find()	Go down (details)
.siblings(), .next(), .prev(), .nextAll()	Go sideways (details)
.filter(), .not(), .has(), .is()	Filter (details)
.each(), .map()	Loop (details)

Ajax and forms

Code	Meaning
.load(url)	Load HTML into an element (details)
$.getJSON(), $.get(), $.post(), $.ajax()	Ajax requests (details)
.done(), .fail(), .always()	Result handlers
.serialize(), .serializeArray()	Form data (details)

Utilities

Code	Meaning
$.extend({}, a, b)	Merge objects (details)
$.each(), $.map(), $.grep()	Loop and filter arrays
jQuery.noConflict()	Give the $ sign back (details)
$.fn.myPlugin = function () {}	Create a plugin (details)

• Previous Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.