jquery

name	jquery
description	jQuery — legacy, server-rendered, WordPress, pre-framework codebases.

Detection Signals

• jquery in package.json OR <script src="...jquery..."> in HTML
• $ or jQuery function calls in .js files
• .ready(), $(document).on(), $(window) patterns
• jQuery plugins: .select2(), .dataTable(), .slick(), .datepicker()
• $.ajax(), $.get(), $.post() calls

MCP Setup

No official MCP server is available for jQuery.

Reference the jQuery API at api.jquery.com. A documentation search MCP (if configured) can retrieve specific API pages on demand.

Context Rule

jQuery exists in this project for a reason — legacy, WordPress constraints, plugin ecosystem, or team familiarity. Do not refactor jQuery to vanilla JS or a framework unless explicitly tasked. Integrate with the existing pattern; flag modernization opportunities in code review notes only.

Core Concepts

Concept	Detail
$(selector)	Returns jQuery object wrapping matched elements; methods chain on it
DOM ready	$(function() { ... }) — safe to access DOM after parsing
Event delegation	.on('event', '.child', fn) — works on dynamically added elements
AJAX	$.ajax(), $.get(), $.post() — callback or Promise (.done(), .fail(), .always())
Plugins	Extend $.fn — called as $('.el').pluginName(options)
Chaining	Most methods return the jQuery object — enables $el.hide().delay(200).fadeIn()

Key Patterns

// DOM ready
$(function () {
  // safe to access DOM here
})

// Event delegation — preferred; works on dynamic content
$(document).on('click', '.btn-submit', function () {
  const $form = $(this).closest('form')
  $form.find('.error').hide()
})

// Cache selectors — never re-query inside loops
const $modal = $('#confirmModal')
$modal.find('.modal-title').text('Are you sure?')
$modal.modal('show')

// AJAX with Promise style
$.get('/api/users')
  .done(function (data) { renderUsers(data) })
  .fail(function (xhr) { showError(xhr.responseJSON?.message) })

// Plugin initialization pattern
$('.select-field').select2({
  placeholder: 'Choose an option',
  allowClear: true,
})

Coexistence with Modern Frameworks

When jQuery coexists with Vue, React, or Alpine:

• Never let jQuery and the framework both manipulate the same DOM node — one must own the element
• jQuery can manage areas outside the framework's root element (legacy sections, third-party widgets)
• Use custom events ($.trigger() / $(document).on()) to bridge jQuery and framework code if needed

Critical Rules

• Cache $() results — const $el = $('#id') once; never re-query the same selector repeatedly, especially inside loops
• Use .on() not .click(), .submit(), .hover() — shorthand aliases are deprecated
• Event delegation for dynamic content — attach to a stable parent ancestor, not to elements that may not exist at bind time
• $(this) in handlers — cache as const $self = $(this) if used more than once in the same handler
• Never use $.get() on unvalidated user-supplied URLs — always whitelist or validate URLs before AJAX to prevent SSRF
• Plugin options are cumulative — calling .select2() twice initializes twice; always destroy before re-init if reconfiguring