Skip to content
Web Frameworks
jQuery
jQuery Reference & Cheatsheet — Complete API

jQuery Reference & Cheatsheet — Complete API

DodaTech Updated Jun 6, 2026 12 min read

This jQuery reference covers all core APIs — selectors, traversing, DOM manipulation, events, effects, AJAX, utilities, and promises — organized for quick lookup during daily development.

What You’ll Learn

  • Complete jQuery selector reference (CSS, attribute, extension, form)
  • All traversing methods for DOM navigation
  • Full DOM manipulation, event, and effects API
  • AJAX methods, deferred/promise, and utility functions
  • Quick lookup patterns for common tasks

Why jQuery Reference Matters

A comprehensive reference saves hours of searching. Instead of Googling “how to get text in jQuery” every time, you flip to one page and find .text(), .html(), .val() in seconds. This reference is designed for daily development — keep it open while coding. In DodaTech’s Durga Antivirus Pro, developers use this reference for rapid prototyping of dashboard widgets and UI components.

jQuery Reference Map 

    flowchart TD
  A[jQuery Reference] --> B[Selectors]
  A --> C[Traversing]
  A --> D[DOM Manipulation]
  A --> E[Events]
  A --> F[Effects]
  A --> G[AJAX]
  A --> H[Deferred/Promise]
  A --> I[Utilities]
  B --> J[Production Code]
  C --> J
  D --> J
  E --> J
📖
How to use this reference: Each section links to its full tutorial for detailed explanations with examples and practice exercises. This page is the quick-lookup version.

Core 

$(selector)                 // Create jQuery object from CSS selector
$(element)                  // Wrap DOM element in jQuery
$(htmlString)               // Create DOM elements from HTML
$(function() { })           // Document ready shortcut
jQuery.noConflict()         // Release $ to other libraries

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-basics/

Selectors

Basic CSS Selectors 

$("*")                      // All elements
$("#id")                    // ID selector (fastest)
$(".class")                 // Class selector
$("element")                // Tag/element selector
$("selector1, selector2")   // Multiple selectors (comma/OR)
$("parent descendant")      // Descendant (space — any depth)
$("parent > child")         // Direct child (>)
$("prev + next")            // Adjacent sibling (+)
$("prev ~ siblings")        // General sibling (~)

Attribute Selectors 

$("[attr]")                 // Has attribute
$("[attr='value']")         // Equals
$("[attr!='value']")        // Not equal
$("[attr^='value']")        // Starts with
$("[attr$='value']")        // Ends with
$("[attr*='value']")        // Contains substring
$("[attr~='word']")         // Contains word (space-separated)
$("[attr|='prefix']")       // Starts with prefix-

jQuery Extension Selectors 

:first              // First in matched set
:last               // Last in matched set
:eq(n)              // Index n (0-based)
:gt(n)              // Greater than index n
:lt(n)              // Less than index n
:even               // Even indices (0, 2, 4...)
:odd                // Odd indices (1, 3, 5...)
:first-child        // First child of parent
:last-child         // Last child of parent
:nth-child(n)       // Nth child (1-based)
:nth-child(odd)     // Odd children
:nth-child(even)    // Even children
:only-child         // Only child
:contains("text")   // Text contains (case-sensitive)
:has(selector)      // Has descendant matching selector
:empty              // No children
:parent             // Has at least one child
:hidden             // display:none or type=hidden
:visible            // Visible elements
:animated           // Currently being animated
:focus              // Has focus
:header             // h1 through h6
:not(selector)      // Negation
:root               // <html> element
:lang(code)         // Language attribute
:target             // URL hash match

Form Selectors 

:input              // input, textarea, select, button
:text               // <input type="text">
:password           // <input type="password">
:radio              // <input type="radio">
:checkbox           // <input type="checkbox">
:file               // <input type="file">
:image              // <input type="image">
:submit             // <input type="submit">
:reset              // <input type="reset">
:button             // <button> or <input type="button">
:enabled            // Enabled form elements
:disabled           // Disabled form elements
:checked            // Checked checkboxes/radio buttons
:selected           // Selected <option> elements

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-selectors/

Traversing

Filtering 

.filter(selector)           // Reduce matched set
.filter(function)           // Filter by function
.not(selector)              // Remove matching elements
.has(selector)              // Keep elements with matching descendants
.is(selector)               // Test (returns boolean)
.slice(start, end)          // Slice by index range
.first()                    // First element
.last()                     // Last element
.eq(index)                  // Element at index

Ancestors (Moving Up) 

.parent()                   // Immediate parent
.parents()                  // All ancestors
.parentsUntil(selector)     // Ancestors until match (exclusive)
.closest(selector)          // Nearest matching ancestor (includes self)

Descendants (Moving Down) 

.children()                 // Direct children
.children(selector)         // Filtered direct children
.find(selector)             // All descendants (any depth)
.contents()                 // Children + text nodes + comments

Siblings (Moving Sideways) 

.siblings()                 // All siblings
.siblings(selector)         // Filtered siblings
.next()                     // Next sibling
.prev()                     // Previous sibling
.nextAll()                  // All following siblings
.prevAll()                  // All preceding siblings
.nextUntil(selector)        // Following siblings until match
.prevUntil(selector)        // Preceding siblings until match

Chaining Helpers 

.end()                      // Back to previous selection in chain
.addBack()                  // Add previous selection to current
.add(selector)              // Add elements to matched set

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-traversing/

DOM Manipulation

Content 

.text()                     // Get combined text (all elements)
.text("new")                // Set text (HTML-safe, prevents XSS)
.html()                     // Get HTML of first element
.html("new")                // Set HTML (interprets tags)
.val()                      // Get form field value
.val("new")                 // Set form field value

Attributes & Properties 

.attr("name")               // Get attribute
.attr("name", "value")      // Set attribute
.attr({ key: val })         // Set multiple attributes
.removeAttr("name")         // Remove attribute
.prop("name")               // Get property (checked, disabled...)
.prop("name", true)         // Set property
.removeProp("name")         // Remove property

CSS & Classes 

.css("property")            // Get computed CSS value
.css("property", "value")   // Set inline CSS
.css({ key: val })          // Set multiple CSS properties
.addClass("name")           // Add class
.removeClass("name")        // Remove class
.toggleClass("name")        // Toggle class
.hasClass("name")           // Check class (returns boolean)

Dimensions 

.width()                    // Content width
.height()                   // Content height
.innerWidth()               // Width + padding
.innerHeight()              // Height + padding
.outerWidth()               // Width + padding + border
.outerWidth(true)           // Width + padding + border + margin
.outerHeight()              // Height + padding + border
.outerHeight(true)          // Height + padding + border + margin

Position & Scroll 

.offset()                   // Position relative to document
.offset({ top, left })      // Set position
.position()                 // Position relative to offset parent
.scrollTop()                // Vertical scroll position
.scrollTop(value)           // Set vertical scroll
.scrollLeft()               // Horizontal scroll position

Insert Inside 

.append(content)            // As last child
.prepend(content)           // As first child
.appendTo(target)           // Move element to be last child of target
.prependTo(target)          // Move element to be first child of target
.html(content)              // Replace all inner HTML
.text(content)              // Replace all text
.empty()                    // Remove all children

Insert Outside 

.before(content)            // Before element (as sibling)
.after(content)             // After element (as sibling)
.insertBefore(target)       // Move element before target
.insertAfter(target)        // Move element after target

Wrap & Unwrap 

.wrap(html)                 // Wrap each element
.wrapAll(html)              // Wrap all matched elements together
.wrapInner(html)            // Wrap content of each element
.unwrap()                   // Remove parent element

Remove & Detach 

.remove()                   // Remove + destroy data and events
.remove(selector)           // Filtered remove
.detach()                   // Remove but keep data and events
.replaceWith(content)       // Replace element with new content
.replaceAll(target)         // Replace targets with current element

Data Attributes 

.data("key")                // Get data value (cached)
.data("key", value)         // Set data value (in memory)
.removeData("key")          // Remove cached data

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-dom/

Events

Binding 

.on("event", handler)               // Bind event
.on("event", selector, handler)     // Delegated event
.on({ ev: handler })                // Multiple events
.off("event")                       // Remove handlers
.off("event", handler)              // Remove specific handler
.one("event", handler)              // Fire once then unbind

Shorthand Methods 

.click(handler)             // Click
.dblclick(handler)          // Double-click
.hover(in, out)             // Mouse enter/leave
.mousedown(handler)         // Mouse button down
.mouseup(handler)           // Mouse button up
.mouseenter(handler)        // Mouse enters (no bubble)
.mouseleave(handler)        // Mouse leaves (no bubble)
.mousemove(handler)         // Mouse moves
.keydown(handler)           // Key pressed
.keyup(handler)             // Key released
.keypress(handler)          // Character key
.focus(handler)             // Element gains focus
.blur(handler)              // Element loses focus
.change(handler)            // Value changes
.submit(handler)            // Form submitted
.select(handler)            // Text selected
.resize(handler)            // Window resized
.scroll(handler)            // Element scrolled
.ready(handler)             // DOM ready

Trigger 

.trigger("event")           // Trigger event programmatically
.trigger("event", [data])   // Trigger with data
.triggerHandler("event")    // Trigger without bubbling
.click()                    // Shorthand: trigger click

Event Object Properties 

e.type                      // Event type (click, keydown...)
e.target                    // Element that fired the event
e.currentTarget             // Element handler is bound to
e.delegateTarget            // Element for delegated handler
e.pageX / e.pageY           // Mouse position (document)
e.clientX / e.clientY       // Mouse position (viewport)
e.which                     // Button/key code
e.key                       // Keyboard key value
e.ctrlKey / e.shiftKey / e.altKey / e.metaKey
e.preventDefault()          // Stop default action
e.stopPropagation()         // Stop bubbling
e.stopImmediatePropagation() // Stop all handlers
e.originalEvent             // Native browser event
e.data                      // Extra data passed to .on()

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-events/

Effects

Basic 

.show()                     // Show element (restores display)
.show(duration)             // Show with animation
.hide()                     // Hide element (sets display:none)
.hide(duration)             // Hide with animation
.toggle()                   // Toggle visibility
.toggle(duration)           // Toggle with animation

Fading 

.fadeIn()                   // Fade to visible (opacity 0→1)
.fadeOut()                  // Fade to hidden (opacity 1→0)
.fadeToggle()               // Toggle fade
.fadeTo(duration, opacity)  // Fade to specific opacity (0-1)

Sliding 

.slideDown()                // Reveal with vertical motion
.slideUp()                  // Hide with vertical motion
.slideToggle()              // Toggle sliding state

Custom 

.animate(properties, duration, easing, callback)
.animate(properties, options)

Queue Control 

.stop()                     // Stop current animation
.stop(true)                 // Stop + clear queue
.stop(true, true)           // Stop + clear queue + jump to end
.delay(ms)                  // Pause animation queue
.finish()                   // Jump to end of all animations
.clearQueue()               // Remove pending animations

Animation Options 

duration: "slow" | "fast" | 400 | 1000
easing: "swing" | "linear"   // Default: swing
complete: function()          // Callback after animation
queue: true | false           // Use animation queue

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-effects/

AJAX

Shorthand Methods 

$.get(url, data, success, dataType)
$.post(url, data, success, dataType)
$.getJSON(url, data, success)
$.getScript(url, success)
$(selector).load(url, data, complete)
$(selector).load(url + " #fragment")

$.ajax() Options 

$.ajax({
    url: "string",
    method: "GET" | "POST" | "PUT" | "DELETE",
    data: { key: value } | "string",
    dataType: "json" | "xml" | "html" | "script" | "text" | "jsonp",
    contentType: "application/x-www-form-urlencoded", // default
    timeout: 5000,                    // ms
    headers: { "Key": "Value" },
    beforeSend: function(xhr, settings) {},
    success: function(data, status, xhr) {},
    error: function(xhr, status, error) {},
    complete: function(xhr, status) {},
    async: true,
    cache: true,
    crossDomain: false,
    global: true,
    xhrFields: { withCredentials: true }
});

Form Serialization 

$.param(obj)                    // Serialize object to query string
$(form).serialize()             // Serialize form to query string
$(form).serializeArray()        // Serialize form to array of objects

Global AJAX Events 

$(document).ajaxStart(handler)
$(document).ajaxStop(handler)
$(document).ajaxComplete(handler)
$(document).ajaxError(handler)
$(document).ajaxSuccess(handler)
$(document).ajaxSend(handler)

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-ajax/

Deferred / Promise 

$.Deferred()                    // Create deferred object
deferred.resolve(value)         // Resolve with value
deferred.reject(error)          // Reject with error
deferred.notify(value)          // Progress notification
deferred.promise()              // Get read-only promise
deferred.state()                // "pending" | "resolved" | "rejected"

promise.done(handler)           // Resolved
promise.fail(handler)           // Rejected
promise.always(handler)         // Either
promise.then(done, fail)        // Both
promise.progress(handler)       // Progress

$.when(deferred1, deferred2)    // Wait for all to complete

Detailed guide: https://tutorials.dodatech.com/frameworks/jquery/jquery-advanced/

Utilities 

$.each(array, fn)               // Iterate array or object
$.map(array, fn)                // Transform values
$.grep(array, fn)               // Filter values
$.inArray(value, array)         // Find index (-1 if not found)
$.merge(arr1, arr2)             // Merge arrays
$.unique(array)                  // Remove duplicate DOM elements
$.makeArray(obj)                 // Convert array-like to array
$.extend(obj1, obj2)            // Merge objects
$.extend(true, obj1, obj2)      // Deep merge
$.trim(string)                   // Remove whitespace
$.type(value)                    // Type detection
$.isArray(value)                 // Check if array
$.isFunction(value)              // Check if function
$.isNumeric(value)               // Check if number
$.isPlainObject(value)           // Check if plain object
$.isEmptyObject(value)           // Check if empty object
$.parseJSON(str)                 // Parse JSON string
$.parseHTML(str)                 // Parse HTML string
$.proxy(fn, context)             // Bind function context
$.noop()                         // Empty function (no operation)
$.now()                          // Current timestamp
$.contains(parent, child)        // Check DOM containment

Properties 

$.fn.jquery                    // jQuery version string
$.fx.off                       // Disable animations (boolean)
$.fx.speeds                    // { slow: 600, fast: 200, _default: 400 }
$(selector).length             // Number of matched elements
$(selector)[0]                 // First native DOM element
$(selector).get(index)         // DOM element at index

Common Mistakes

1. Confusing .attr() and .prop()

Use .prop() for checked, disabled, selected. Use .attr() for href, src, data-*.

2. Using .html() When .text() Is Safer

For user-generated content, .text() escapes HTML and prevents XSS.

3. Forgetting .stop(true) Before Hover Animations

Always call .stop(true) before starting a new animation on the same element to prevent queue buildup.

4. Not Using Event Delegation for Dynamic Elements

Use $parent.on("click", "childSelector", handler) instead of $("childSelector").click(handler).

5. Re-Querying the DOM for the Same Elements

Cache selections: var $el = $("#id"); and reuse $el.

Practice Questions

1. Which method would you use to set the text “Hello” inside a <div> safely?

.text("Hello") — it escapes HTML, preventing XSS.

2. What’s the fastest jQuery selector?

$("#id") — it maps to native getElementById().

3. How do you make an event handler fire only once?

.one("click", handler) — it automatically unbinds after first execution.

4. How do you prevent animation queue buildup?

Call .stop(true) before starting a new animation on the same element.

5. Challenge: Using only the reference above, write a chain that selects <li class="active"> inside <ul id="menu">, gets its text, finds the parent <ul>, and adds a class “has-active” to it.

Answer
var text = $("#menu li.active").text();
$("#menu li.active").closest("ul").addClass("has-active");

FAQ

How do I check if an element exists in jQuery?
Check if ($("#myId").length) — if .length is 0, the element doesn’t exist.
What’s the difference between .eq() and .get()?
.eq(0) returns a jQuery object (wrapped). .get(0) returns the native DOM element.
Can I use jQuery with React?
It’s not recommended for the same DOM tree. React manages its own virtual DOM.
What version of jQuery should I use?
jQuery 3.x is current. Use 3.7+ for modern projects.
How do I include jQuery in a build system?
npm install jquery then import $ from 'jquery'.
Is jQuery still maintained?
Yes, jQuery 3.x receives ongoing maintenance and security updates.

Try It Yourself 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Reference Sandbox</title>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; }
        .box { padding: 20px; margin: 10px 0; background: #e3f2fd; border-radius: 8px; }
        button { padding: 8px 16px; margin: 4px; cursor: pointer; }
        #output { background: #f5f5f5; padding: 12px; border-radius: 4px; margin-top: 12px; min-height: 20px; font-family: monospace; }
    </style>
</head>
<body>
    <h1>jQuery Reference Sandbox</h1>
    <p>Test jQuery methods in real time.</p>
    <div>
        <button id="btnText">.text("Hello")</button>
        <button id="btnHtml">.html("&lt;b&gt;Bold&lt;/b&gt;")</button>
        <button id="btnAdd">.addClass("highlight")</button>
        <button id="btnFade">.fadeOut(500)</button>
        <button id="btnReset">Reset</button>
    </div>
    <div class="box" id="demoBox">
        <p>Click buttons to see jQuery in action.</p>
    </div>
    <div id="output">> Ready</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            function log(msg) { $("#output").text("> " + msg); }
            $("#btnText").click(function() {
                $("#demoBox p").text("Hello from jQuery!");
                log('.text() set text content');
            });
            $("#btnHtml").click(function() {
                $("#demoBox p").html("<b>Bold</b> text via .html()");
                log('.html() set HTML content');
            });
            $("#btnAdd").click(function() {
                $("#demoBox").addClass("highlight").css("background", "#fff9c4");
                log('.addClass() added highlight class');
            });
            $("#btnFade").click(function() {
                $("#demoBox").fadeOut(500, function() { $(this).fadeIn(500); });
                log('.fadeOut() then .fadeIn()');
            });
            $("#btnReset").click(function() {
                $("#demoBox").removeClass("highlight").css("background", "#e3f2fd");
                $("#demoBox p").text("Click buttons to see jQuery in action.");
                log('Reset complete');
            });
        });
    </script>
</body>
</html>

What’s Next

TopicDescription
https://tutorials.dodatech.com/frameworks/jquery/jquery-advanced/Advanced patterns, plugins, and performance
https://tutorials.dodatech.com/frameworks/jquery/jquery-ui/jQuery UI widgets and interactions
https://tutorials.dodatech.com/frameworks/jquery/jquery-ajax/AJAX method details and patterns
JavaScriptJavaScript fundamentals and DOM API
CSSCSS properties and selector syntax

What’s Next

Congratulations on completing this Jquery Reference tutorial! Here’s where to go from here:

  • Practice daily — Consistency is more important than long study sessions
  • Build a project — Apply what you learned by building something real
  • Explore related topics — Check out other tutorials in the same category
  • Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous jQuery Advanced — Complete Plugins, Performance & Best Practices Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse jQuery