jQuery - Fast, Small, Feature-Rich JavaScript Library

Common errors

• ReferenceError: $ is not defined

  cause jQuery is not loaded, or the script attempting to use `$` runs before jQuery is available, or is outside a module scope where `$` is imported.
  fix Ensure jQuery script tag is included before your script in HTML, or that `import { $ } from 'jquery';` is at the top of your ESM module.

• TypeError: Cannot read properties of undefined (reading 'ajax')

  cause Attempting to use `$.ajax` (or other Ajax/Deferred/Effects methods) with the jQuery 'slim' build, which excludes these features.
  fix Switch to the full version of jQuery (e.g., `import { $ } from 'jquery';` instead of `jquery/slim`) if these features are required.

• TypeError: require is not a function

  cause Attempting to use CommonJS `require()` syntax in an ECMAScript Module (ESM) context (e.g., a `.mjs` file or a script with `type="module"`).
  fix Use `import { $ } from 'jquery';` for ESM contexts. Only use `require()` in CommonJS environments (Node.js without `type: "module"` in `package.json`).

• TypeError: $.isFunction is not a function

  cause Using a removed API, such as `jQuery.isFunction()`, in jQuery 4.0.0 or newer.
  fix Replace with native JavaScript equivalents. For `$.isFunction`, use `typeof func === 'function'`.

Warnings

• breaking jQuery 4.0.0 drops support for Internet Explorer 10 and older, Edge Legacy, and outdated mobile browsers. IE11 remains supported in 4.x but will be dropped in 5.0. Projects requiring support for these browsers must remain on jQuery 3.x.
  Fix: Upgrade browser targets or remain on jQuery 3.x if legacy browser support is critical. Consider using the jQuery Migrate plugin for transition assistance.
• breaking Numerous previously deprecated utility methods have been removed, including `jQuery.isArray`, `jQuery.parseJSON`, `jQuery.trim`, `jQuery.isFunction`, `jQuery.isWindow`, `jQuery.nodeName`, `jQuery.camelCase`, `jQuery.now`, and `jQuery.isNumeric`.
  Fix: Replace removed APIs with their native JavaScript equivalents (e.g., `Array.isArray()`, `JSON.parse()`, `String.prototype.trim()`).
• breaking The order of focus and blur events (including `focusin`, `focusout`, `focus`, `blur`) now adheres to the W3C specification, which differs from jQuery's historical cross-browser normalization. This affects code relying on the old event order.
  Fix: Review and retest any code that depends on the specific timing or order of focus/blur-related events.
• breaking Automatic JSON to JSONP promotion has been removed for security reasons. Previously, `$.ajax` with `dataType: "json"` and a `callback` parameter would implicitly convert to JSONP.
  Fix: For cross-domain requests, explicitly use CORS or set `dataType: "jsonp"` if JSONP is intended.
• breaking The `slim` build has been further reduced, removing Deferreds and Callbacks entirely in favor of native JavaScript Promises. Functionality like `$.ajax` is not available in the slim build.
  Fix: If Deferreds, Callbacks, or `$.ajax` are needed, use the full jQuery build. Migrate Deferred-based asynchronous logic to native Promises where possible for slim builds.
• gotcha The CommonJS module for jQuery (used with `require()`) exports the jQuery object directly, not as named exports. Attempting to destructure `{ $ } = require('jquery')` will result in `$` being undefined.
  Fix: Use `const $ = require('jquery');` for CommonJS imports to correctly assign the jQuery object to the `$` variable.

Install

• npm install jquery npm
• yarn add jquery yarn
• pnpm add jquery pnpm

Imports

• $
  wrong:

  const $ = require('jquery').default; // Incorrect default import for CJS module

  correct:

  import { $ } from 'jquery';

  Recommended ESM named import for modern browser or Node.js environments. Matches npm package import maps.
• jQuery
  wrong:

  import jQuery from 'jquery'; // Named export, not default

  correct:

  import { jQuery } from 'jquery';

  ESM named import for jQuery namespace. `$` and `jQuery` are both named exports.
• $ (CommonJS)
  wrong:

  const { $ } = require('jquery'); // CommonJS module does not expose named exports

  correct:

  const $ = require('jquery');

  Correct CommonJS `require` for Node.js or older bundlers. The CommonJS module exports the jQuery object directly, not as named exports.
• $ (Slim Build)
  wrong:

  import $ from 'jquery/slim'; // Named export recommended over default

  correct:

  import { $ } from 'jquery/slim';

  Imports the 'slim' build, which excludes Ajax, Deferreds, and Effects modules.

Quickstart

Demonstrates basic DOM selection, event handling, AJAX (if full jQuery), CSS manipulation, animation, and dynamic content creation, showcasing jQuery's core features.

import { $ } from 'jquery';

$(function() {
  // Basic DOM manipulation
  $('#myButton').on('click', function() {
    $(this).text('Clicked!');
    $('#message').text('Button was clicked at ' + new Date().toLocaleTimeString()).css('color', 'green');
  });

  // Simple AJAX call (requires full jQuery build)
  // Check for full version presence ($.ajax will be undefined in slim build)
  if ($.ajax) {
    $('#loadData').on('click', function() {
      $('#dataContainer').html('<p>Loading data...</p>');
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos/1', // Example API
        method: 'GET',
        dataType: 'json',
        success: function(data) {
          $('#dataContainer').html(`
            <p>User ID: ${data.userId}</p>
            <p>Title: ${data.title}</p>
            <p>Completed: ${data.completed}</p>
          `);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          $('#dataContainer').html(`<p style="color: red;">Error loading data: ${textStatus} - ${errorThrown}</p>`);
        }
      });
    });
  } else {
     $('#loadData').prop('disabled', true).text('AJAX not available (slim build)');
     $('#dataContainer').text('AJAX functionality requires the full jQuery build.');
  }

  // Chainable operations
  $('.item')
    .addClass('highlight')
    .delay(1000)
    .animate({ opacity: 0.5 }, 500)
    .css('background-color', 'yellow');

  // Add dynamic elements
  $('body').append('<div id="dynamicContent" style="padding: 10px; border: 1px solid blue; margin-top: 20px;">This is dynamically added content.</div>');
});