Plugins and Modern Usage

This section documents jQuery 3.x (the current major line — no specific patch version is pinned). This content was generated with the assistance of AI and should be verified against the official jQuery API reference before being relied on in production, since API details and deprecations continue to change between releases.

jQuery is legacy-leaning: modern browsers implement native equivalents for almost everything it does (querySelectorAll, classList, fetch, addEventListener, append/prepend/remove, the Web Animations API), and most current stacks — Bootstrap 5 included — have dropped it. Prefer the native APIs for new work; this reference is aimed at reading, maintaining, or incrementally migrating code that already uses jQuery. Every page ends with a Modern equivalent note pointing at the native replacement.

This section’s bibliography lists the reference material consulted while preparing these pages.

Every jQuery instance method lives on jQuery.fn (an alias of jQuery.prototype). A "plugin" is just a function you add there so it is callable on any wrapped set.

A minimal plugin

The contract for a well-behaved plugin: iterate the set with .each(), return this so the call stays chainable, and namespace everything. In prose the skeleton reads $.fn.myThing = function (options) { return this.each(…); };:

(function ($) {
  $.fn.highlight = function (options) {
    // merge caller options over defaults into a fresh object
    const settings = $.extend({}, $.fn.highlight.defaults, options);

    // return the set so callers can keep chaining
    return this.each(function () {
      $(this).css({
        backgroundColor: settings.color,
        color: settings.textColor
      });
    });
  };

  // published defaults -- callers can override globally
  $.fn.highlight.defaults = { color: '#fff7b0', textColor: '#222' };
}(jQuery));

$('.term').highlight();                       // defaults
$('.term').highlight({ color: '#c8f7c5' });   // per-call override
$('.term').highlight().addClass('marked');    // still chainable

Guidelines: never assume the set is non-empty (this.each handles zero elements fine), do not break the chain (always return this or a jQuery set), read configuration from a single options object merged with $.extend, and keep any event handlers in a namespace (.on('click.highlight', …)) so the plugin can clean up after itself.

The wider plugin ecosystem

jQuery UI — a curated set of interactions (draggable, sortable, resizable), widgets (datepicker, dialog, autocomplete, tabs), and additional easing functions. Largely in maintenance mode.
jQuery Mobile — a touch-oriented UI framework built on jQuery UI. Officially deprecated; do not start new work with it.
Standalone plugins that were ubiquitous — Slick / slick-carousel, Select2, DataTables, Chosen, Magnific Popup. Most now ship, or have been superseded by, a dependency-free version; check before adding jQuery to a project solely to run one.

This section does not document those libraries; treat the links as a starting point.

Migrating off jQuery

The official jquery-migrate plugin restores APIs removed across jQuery 1.x → 3.x and logs a console warning every time deprecated behaviour is hit. Load it right after jQuery, exercise the app, and use the warnings as a to-do list; then remove it once the log is clean.

To remove jQuery entirely, translate call by call:

jQuery Native

jQuery	Native
`$(sel)`	`document.querySelectorAll(sel)`
`$el.find(sel)`	`el.querySelectorAll(sel)`
`$el.addClass('x')`	`el.classList.add('x')`
`$el.toggleClass('x', on)`	`el.classList.toggle('x', on)`
`$el.attr('href')`	`el.getAttribute('href')`
`$el.prop('checked')`	`el.checked`
`$el.on('click', fn)`	`el.addEventListener('click', fn)`
`$el.on('click', 'li', fn)`	`el.addEventListener('click', e ⇒ { if (e.target.closest('li')) fn(e); })`
`$el.append(node)`	`el.append(node)`
`$el.remove()`	`el.remove()`
`$el.css('color', 'red')`	`el.style.color = 'red'`
`$el.each(fn)`	`for (const el of list) { … }`
`$.ajax` / `$.getJSON`	`fetch()` (+ `AbortController`)
`$(fn)` (ready)	`<script defer>` / `DOMContentLoaded`

$(sel)

document.querySelectorAll(sel)

$el.find(sel)

el.querySelectorAll(sel)

$el.addClass('x')

el.classList.add('x')

$el.toggleClass('x', on)

el.classList.toggle('x', on)

$el.attr('href')

el.getAttribute('href')

$el.prop('checked')

el.checked

$el.on('click', fn)

el.addEventListener('click', fn)

$el.on('click', 'li', fn)

el.addEventListener('click', e ⇒ { if (e.target.closest('li')) fn(e); })

$el.append(node)

el.append(node)

$el.remove()

el.remove()

$el.css('color', 'red')

el.style.color = 'red'

$el.each(fn)

for (const el of list) { … }

$.ajax / $.getJSON

fetch() (+ AbortController)

$(fn) (ready)

<script defer> / DOMContentLoaded

A pragmatic middle step is a tiny helper — const $ = (s, r = document) ⇒ r.querySelectorAll(s); — plus Array.prototype methods, which covers most day-to-day selection and iteration without the library.

Modern equivalent

The whole page: modern browsers need no library for DOM work. For reusable UI behaviour, a Web Component (custom element) is the native equivalent of a stateful jQuery plugin — see Web Components — and Web programming basics for the selection/manipulation primitives.