{"id":11149,"library":"jquery","title":"jQuery - Fast, Small, Feature-Rich JavaScript Library","description":"jQuery is a venerable, fast, and feature-rich JavaScript library primarily designed for client-side HTML DOM traversal and manipulation, event handling, animation, and Ajax. The current stable version is 4.0.0, released in January 2026, following a multi-year development cycle for major versions, with minor patches and bug fixes occurring more frequently. It differentiates itself by providing a concise, cross-browser API, simplifying common web development tasks that were historically complex due to browser inconsistencies. While newer browser APIs have reduced its necessity for some tasks, it remains a widely used tool for projects requiring broad browser compatibility or leveraging its extensive plugin ecosystem.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/jquery/jquery","tags":["javascript","jquery","browser","library"],"install":[{"cmd":"npm install jquery","lang":"bash","label":"npm"},{"cmd":"yarn add jquery","lang":"bash","label":"yarn"},{"cmd":"pnpm add jquery","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Recommended ESM named import for modern browser or Node.js environments. Matches npm package import maps.","wrong":"const $ = require('jquery').default; // Incorrect default import for CJS module","symbol":"$","correct":"import { $ } from 'jquery';"},{"note":"ESM named import for jQuery namespace. `$` and `jQuery` are both named exports.","wrong":"import jQuery from 'jquery'; // Named export, not default","symbol":"jQuery","correct":"import { jQuery } from 'jquery';"},{"note":"Correct CommonJS `require` for Node.js or older bundlers. The CommonJS module exports the jQuery object directly, not as named exports.","wrong":"const { $ } = require('jquery'); // CommonJS module does not expose named exports","symbol":"$ (CommonJS)","correct":"const $ = require('jquery');"},{"note":"Imports the 'slim' build, which excludes Ajax, Deferreds, and Effects modules.","wrong":"import $ from 'jquery/slim'; // Named export recommended over default","symbol":"$ (Slim Build)","correct":"import { $ } from 'jquery/slim';"}],"quickstart":{"code":"import { $ } from 'jquery';\n\n$(function() {\n  // Basic DOM manipulation\n  $('#myButton').on('click', function() {\n    $(this).text('Clicked!');\n    $('#message').text('Button was clicked at ' + new Date().toLocaleTimeString()).css('color', 'green');\n  });\n\n  // Simple AJAX call (requires full jQuery build)\n  // Check for full version presence ($.ajax will be undefined in slim build)\n  if ($.ajax) {\n    $('#loadData').on('click', function() {\n      $('#dataContainer').html('<p>Loading data...</p>');\n      $.ajax({\n        url: 'https://jsonplaceholder.typicode.com/todos/1', // Example API\n        method: 'GET',\n        dataType: 'json',\n        success: function(data) {\n          $('#dataContainer').html(`\n            <p>User ID: ${data.userId}</p>\n            <p>Title: ${data.title}</p>\n            <p>Completed: ${data.completed}</p>\n          `);\n        },\n        error: function(jqXHR, textStatus, errorThrown) {\n          $('#dataContainer').html(`<p style=\"color: red;\">Error loading data: ${textStatus} - ${errorThrown}</p>`);\n        }\n      });\n    });\n  } else {\n     $('#loadData').prop('disabled', true).text('AJAX not available (slim build)');\n     $('#dataContainer').text('AJAX functionality requires the full jQuery build.');\n  }\n\n  // Chainable operations\n  $('.item')\n    .addClass('highlight')\n    .delay(1000)\n    .animate({ opacity: 0.5 }, 500)\n    .css('background-color', 'yellow');\n\n  // Add dynamic elements\n  $('body').append('<div id=\"dynamicContent\" style=\"padding: 10px; border: 1px solid blue; margin-top: 20px;\">This is dynamically added content.</div>');\n});","lang":"typescript","description":"Demonstrates basic DOM selection, event handling, AJAX (if full jQuery), CSS manipulation, animation, and dynamic content creation, showcasing jQuery's core features."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Replace removed APIs with their native JavaScript equivalents (e.g., `Array.isArray()`, `JSON.parse()`, `String.prototype.trim()`).","message":"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`.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Review and retest any code that depends on the specific timing or order of focus/blur-related events.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"For cross-domain requests, explicitly use CORS or set `dataType: \"jsonp\"` if JSONP is intended.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use `const $ = require('jquery');` for CommonJS imports to correctly assign the jQuery object to the `$` variable.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"ReferenceError: $ is not defined"},{"fix":"Switch to the full version of jQuery (e.g., `import { $ } from 'jquery';` instead of `jquery/slim`) if these features are required.","cause":"Attempting to use `$.ajax` (or other Ajax/Deferred/Effects methods) with the jQuery 'slim' build, which excludes these features.","error":"TypeError: Cannot read properties of undefined (reading 'ajax')"},{"fix":"Use `import { $ } from 'jquery';` for ESM contexts. Only use `require()` in CommonJS environments (Node.js without `type: \"module\"` in `package.json`).","cause":"Attempting to use CommonJS `require()` syntax in an ECMAScript Module (ESM) context (e.g., a `.mjs` file or a script with `type=\"module\"`).","error":"TypeError: require is not a function"},{"fix":"Replace with native JavaScript equivalents. For `$.isFunction`, use `typeof func === 'function'`.","cause":"Using a removed API, such as `jQuery.isFunction()`, in jQuery 4.0.0 or newer.","error":"TypeError: $.isFunction is not a function"}],"ecosystem":"npm"}