📖 Guide
jQuery — Complete Reference
Quick reference for jQuery selectors, DOM manipulation, events, AJAX, and more.
90 commands across 10 categories
SelectorsDOM ManipulationEventsEffects & AnimationAJAXTraversingCSS & DimensionsUtilitiesPluginsCommon Patterns
Selectors
| Command | Description |
|---|---|
$("element")e.g. $("div") | Select by tag name |
$(".class")e.g. $(".active") | Select by class name |
$("#id")e.g. $("#main") | Select by ID |
$("[attr=value]")e.g. $("[type=text]") | Select by attribute value |
$("parent > child")e.g. $("ul > li") | Select direct children |
$("ancestor descendant")e.g. $("div p") | Select all descendants |
$("prev + next")e.g. $("h2 + p") | Select adjacent sibling |
$(":first-child") | Select first child of each parent |
$(":nth-child(n)")e.g. $("tr:nth-child(odd)") | Select nth child (1-indexed) |
$(":not(selector)")e.g. $("li:not(.active)") | Negate a selector |
DOM Manipulation
| Command | Description |
|---|---|
.html()e.g. $("#el").html("<b>Hi</b>") | Get or set inner HTML |
.text()e.g. $("#el").text("Hello") | Get or set text content |
.val()e.g. $("input").val("new") | Get or set form input value |
.attr(name, value)e.g. $("img").attr("src", "pic.jpg") | Get or set attribute |
.data(key, value)e.g. $("#el").data("id", 42) | Get or set data attributes |
.append(content)e.g. $("ul").append("<li>New</li>") | Insert content at end of element |
.prepend(content) | Insert content at start of element |
.after(content) | Insert content after element |
.remove() | Remove element from DOM |
.clone()e.g. $(".item").clone().appendTo("#list") | Deep copy an element |
Events
| Command | Description |
|---|---|
.on(event, handler)e.g. $("button").on("click", fn) | Attach event handler |
.off(event) | Remove event handler |
.one(event, handler) | Handler fires only once |
.trigger(event)e.g. $("form").trigger("submit") | Programmatically trigger an event |
.click(handler) | Shorthand for click event |
.on(event, selector, handler)e.g. $("#list").on("click", "li", fn) | Delegated event (dynamic elements) |
$(document).ready(fn) | Run code when DOM is ready |
.hover(enterFn, leaveFn) | Shorthand for mouseenter/mouseleave |
event.preventDefault() | Prevent default browser action |
event.stopPropagation() | Stop event from bubbling up |
Effects & Animation
| Command | Description |
|---|---|
.show() / .hide() | Show or hide elements |
.toggle() | Toggle visibility |
.fadeIn(duration)e.g. $("#el").fadeIn(400) | Fade element in |
.fadeOut(duration) | Fade element out |
.fadeToggle(duration) | Toggle fade in/out |
.slideDown(duration) | Slide element down to reveal |
.slideUp(duration) | Slide element up to hide |
.animate(props, duration)e.g. $("#box").animate({left: "200px"}, 500) | Custom animation |
.stop() | Stop currently running animation |
.delay(duration)e.g. $("#el").fadeIn().delay(1000).fadeOut() | Delay subsequent animations |
AJAX
| Command | Description |
|---|---|
$.ajax(settings)e.g. $.ajax({url: "/api", method: "GET"}) | Full-featured AJAX request |
$.get(url, callback)e.g. $.get("/api/items", function(data) {}) | Shorthand GET request |
$.post(url, data, callback) | Shorthand POST request |
$.getJSON(url, callback) | GET request expecting JSON response |
.load(url)e.g. $("#content").load("/page.html") | Load HTML into element |
$.ajaxSetup(settings) | Set defaults for all AJAX requests |
.serialize()e.g. $("form").serialize() | Serialize form data as query string |
.done() / .fail() / .always() | Promise-style AJAX callbacks |
Traversing
| Command | Description |
|---|---|
.find(selector)e.g. $("#list").find(".active") | Find descendants matching selector |
.children() | Get direct children |
.parent() | Get immediate parent |
.parents(selector) | Get all ancestors, optionally filtered |
.closest(selector) | Get nearest ancestor matching selector |
.siblings() | Get all siblings |
.next() / .prev() | Get adjacent sibling |
.first() / .last() | Get first or last element in set |
.eq(index)e.g. $("li").eq(2) | Get element at index (0-based) |
.filter(selector) | Reduce set to those matching selector |
CSS & Dimensions
| Command | Description |
|---|---|
.css(prop, value)e.g. $("#el").css("color", "red") | Get or set CSS property |
.addClass(name) | Add CSS class |
.removeClass(name) | Remove CSS class |
.toggleClass(name) | Toggle CSS class on/off |
.hasClass(name)e.g. $("#el").hasClass("active") | Check if element has class |
.width() / .height() | Get or set content dimensions |
.outerWidth(true) | Width including padding, border, and margin |
.offset()e.g. $("#el").offset().top | Get position relative to document |
.position() | Get position relative to offset parent |
.scrollTop() | Get or set vertical scroll position |
Utilities
| Command | Description |
|---|---|
$.each(array, fn)e.g. $.each([1,2,3], function(i, v) {}) | Iterate over array or object |
$.extend(target, obj)e.g. $.extend({}, defaults, options) | Merge objects |
$.inArray(value, array) | Find index of value (-1 if not found) |
$.isArray(obj) | Check if value is an array |
$.trim(str) | Remove leading/trailing whitespace |
$.proxy(fn, context) | Set 'this' context for a function |
$.map(array, fn)e.g. $.map([1,2,3], function(v) { return v * 2; }) | Transform array elements |
$.type(obj)e.g. $.type([]) // "array" | Get type as lowercase string |
Plugins
| Command | Description |
|---|---|
$.fn.myPlugin = function() {} | Define a jQuery plugin |
this.each(function() {}) | Iterate over matched elements inside plugin |
return this; | Return this for chaining |
$.fn.myPlugin.defaults | Define default plugin options |
$.extend(defaults, options) | Merge user options with defaults |
.data("plugin-name") | Store plugin instance on element |
Common Patterns
| Command | Description |
|---|---|
$("form").submit(function(e) { e.preventDefault(); }) | Prevent form submission |
$("select").change(function() { $(this).val(); }) | React to dropdown change |
$(this) | Reference current element in handler |
$("<div>", {class: "new", text: "Hi"}) | Create element with properties |
$("el").each(function(i, el) {}) | Iterate over matched set |
$.noConflict() | Release $ alias to other libraries |
$(window).on("resize", handler) | Handle window resize event |
$("el").is(":visible") | Check if element is visible |
📖 Free, searchable command reference. Bookmark this page for quick access.