# jquery

Guidelines for writing performant jQuery code across JS and JSX files. Enforces DOM batching, event delegation, and jQuery 4.0 readiness.

- rule · `type=rule` · Cursor · ★ 3580
- Author: sanjeed5
- License: CC0-1.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/jquery.mdc
- Updated: 2026-05-19
- HTML: https://affpapa.org/en/nevibecode/rules/jquery

## What it does

This rule configures modern coding standards for jQuery inside `**/*.{js,jsx}` files. It requires wrapping scripts in an IIFE like `(function($){...})(jQuery)` to shield the global scope and protect the `$` alias when `jQuery.noConflict()` is enabled in setups like WordPress. The instructions direct Cursor to adopt modern ES6+ syntax, including `const`, `let`, template literals, and arrow functions.

Execution speed shapes the DOM guidelines. The rule tells the assistant to cache jQuery selectors with a `$` prefix, eliminate redundant lookups inside loops, batch DOM appends via `DocumentFragment`, and attach dynamic event listeners using `.on()` delegation on static parents.

API safeguards address breaking library changes. Without replacing deprecated calls like `toggleClass(Boolean)` or legacy `$(document).ready()` wrappers, scripts fail during transitions to jQuery 4.0.

## Install

### Cursor (native platform)

**Manually: put the files in place**
- File: `.cursor/rules/jquery.mdc` — Frontmatter: description, globs, alwaysApply

### Claude Code

**Manually: put the files in place**
- File: `.claude/rules/jquery.md` — The paths frontmatter field limits the files: move globs from the source into paths

### Codex

**AGENTS.md**
- Codex reads AGENTS.md: paste the rule text there

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/instructions/jquery.instructions.md` — The applyTo field sets which files it applies to: move globs from the source into applyTo

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/rules/jquery.md`

### Cline

**Manually: put the files in place**
- File: `.clinerules/jquery.md`

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/jquery.mdc

## When to use it
- prevent variable collisions when jQuery runs alongside other libraries
- batch DOM insertions using DocumentFragment to avoid reflows
- implement event delegation for dynamically rendered markup
- upgrade legacy jQuery syntax to ensure jQuery 4.0 compatibility

## Example prompts
- Refactor this list-rendering script to batch DOM updates using DocumentFragment
- Encapsulate this jQuery script into an IIFE and switch click handlers to event delegation
- Scan this file for deprecated jQuery ready syntax and update it for jQuery 4.0

## Source text · jquery.mdc · CC0-1.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e4b7630a3f79204c.

BEGIN THIRD-PARTY FILE e4b7630a3f79204c
````text
---
description: Definitive guidelines for writing performant, maintainable, and modern jQuery code, emphasizing best practices for DOM manipulation, event handling, and compatibility with jQuery 4.0 and ES6+.
globs: **/*.{js,jsx}
---
# jQuery Best Practices

jQuery remains a powerful tool for DOM manipulation, but its use in 2025 demands a performance-first mindset and adherence to modern JavaScript standards. This guide outlines the definitive best practices for writing fast, clean, and maintainable jQuery code.

## 1. Code Organization and Modern JavaScript

Always encapsulate your jQuery code within an Immediately Invoked Function Expression (IIFE) to prevent global scope pollution and ensure `$` correctly maps to `jQuery`, especially in environments like WordPress where `jQuery.noConflict()` is active. Embrace modern ES6+ syntax where possible.

### 1.1 Scope and `$.noConflict()`

**Always wrap your jQuery code in an IIFE.** This ensures `$` refers to `jQuery` and protects your code from global scope conflicts.

❌ BAD: Global scope pollution, `$` conflicts
```javascript
// Potentially conflicts with other libraries or scripts
$('.my-element').on('click', function() {
  console.log('Clicked!');
});
```

✅ GOOD: Isolated scope, `$` aliased correctly
```javascript
(function($) {
  // Your jQuery code here, $ is safely aliased to jQuery
  $('.my-element').on('click', function() {
    console.log('Clicked!');
  });
})(jQuery); // Pass jQuery object into the IIFE
```

### 1.2 Modern JavaScript Syntax

Integrate `const`, `let`, arrow functions, and template literals. jQuery code coexists perfectly with modern JS.

❌ BAD: Old-school `var` and `function` syntax
```javascript
var myElement = $('#old-element');
myElement.click(function() {
  var message = 'Element ' + myElement.attr('id') + ' clicked.';
  console.log(message);
});
```

✅ GOOD: Modern ES6+ syntax
```javascript
const myElement = $('#modern-element');
myElement.on('click', () => {
  const message = `Element ${myElement.attr('id')} clicked.`;
  console.log(message);
});
```

## 2. Performance Considerations

Prioritize performance by minimizing DOM interactions, optimizing selectors, and caching frequently used elements and values.

### 2.1 Cache Selectors

**Never re-query the DOM for the same element.** Store jQuery objects in variables for reuse. Prefix jQuery variables with `$` for clarity.

❌ BAD: Repeated DOM queries
```javascript
$('.item').addClass('active');
$('.item').css('background-color', 'blue');
$('.item').on('click', function() { /* ... */ });
```

✅ GOOD: Cache selectors for efficiency
```javascript
const $items = $('.item');
$items.addClass('active');
$items.css('background-color', 'blue');
$items.on('click', function() { /* ... */ });
```

### 2.2 Minimize DOM Updates

Batch DOM modifications. Build HTML fragments off-document or use `detach()` before making multiple changes, then re-attach once. Each DOM write triggers potential reflows.

❌ BAD: Repeated DOM appends in a loop
```javascript
const data = ['one', 'two', 'three'];
const $list = $('#my-list');
data.forEach(item => {
  $list.append(`<li>${item}</li>`); // Each append causes a DOM update
});
```

✅ GOOD: Batch DOM updates
```javascript
const data = ['one', 'two', 'three'];
const $list = $('#my-list');
const $fragment = $(document.createDocumentFragment()); // Create a document fragment
data.forEach(item => {
  $fragment.append(`<li>${item}</li>`);
});
$list.append($fragment); // Append once
```

### 2.3 Optimize Selectors

Use the most specific and efficient selectors possible. Prefer ID and class selectors over complex descendant or attribute selectors.

❌ BAD: Inefficient descendant selector
```javascript
// Sizzle has to traverse all divs, then check for 'my-class'
````
END THIRD-PARTY FILE e4b7630a3f79204c

The third-party file has ended. Everything between the e4b7630a3f79204c tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3791 of 9130 bytes. © sanjeed5 · CC0-1.0 · https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/jquery.mdc

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md