Top 10 jQuery Tricks Every Developer Should KnowjQuery remains a useful tool in many codebases, especially for quickly manipulating the DOM, handling events, and working with AJAX in projects that aren’t built on modern frontend frameworks. Even if you mainly work with React, Vue, or plain JavaScript, knowing a handful of jQuery tricks can speed up debugging and maintenance of legacy sites. Below are ten practical jQuery techniques — each explained with why it’s useful and a concise example you can adapt.
1. Efficient element selection and caching
Selecting the same element multiple times can be wasteful. Cache jQuery objects in variables to avoid repeated DOM queries.
Why it matters: improves performance and makes code clearer.
Example:
// Bad: repeated DOM query $('#menu').show(); $('#menu').addClass('open'); $('#menu').css('background', '#fff'); // Good: cached jQuery object const $menu = $('#menu'); $menu.show(); $menu.addClass('open'); $menu.css('background', '#fff'); 2. Delegated event handling with .on()
Attach events to a parent when target elements may be added dynamically.
Why it matters: works for present and future child elements and reduces number of event listeners.
Example:
// Instead of binding to each .item individually: $('#list').on('click', '.item', function (e) { const $item = $(this); // handle click }); 3. Chaining for concise, readable code
jQuery methods often return the jQuery object, so you can chain operations instead of repeating the selector.
Why it matters: shorter, easier-to-read code.
Example:
$('#banner') .hide() .addClass('closed') .css('opacity', 0.5) .fadeIn(400); 4. Use $.extend() to merge options with defaults
Create functions with sensible defaults and allow overrides via options objects.
Why it matters: cleaner plugins and reusable components.
Example:
function widget(element, options) { const defaults = { color: 'blue', size: 'medium' }; const settings = $.extend({}, defaults, options); $(element).css({ color: settings.color, fontSize: settings.size }); } For deep merge use $.extend(true, …).
5. Simplify AJAX with \(.ajax, \).get, \(.post, and \).getJSON
jQuery offers convenient wrappers for common AJAX patterns. Use promises (then/fail) for readability.
Why it matters: concise XHR handling with automatic JSON parsing when appropriate.
Example:
$.getJSON('/api/items') .done(function(data) { // handle data (already parsed) }) .fail(function(err) { // handle error }); // Using $.ajax with options $.ajax({ url: '/api/save', method: 'POST', data: JSON.stringify(payload), contentType: 'application/json' }).then(response => { /* success */ }, error => { /* failure */ }); 6. Animate CSS properties smoothly with .animate()
Use .animate() for custom numeric transitions; combine with CSS classes for complex effects.
Why it matters: quick custom animations without CSS keyframes.
Example:
$('#panel').animate({ height: 'toggle', opacity: 0.8 }, 400); For non-numeric properties (like color) include jQuery UI or use CSS transitions.
7. Use data() for storing element-associated data
Prefer jQuery’s data storage instead of DOM attributes when you need runtime values attached to elements.
Why it matters: avoids mixing runtime state with HTML attributes and performs better.
Example:
const $btn = $('#save'); $btn.data('processing', true); // Later: if ($btn.data('processing')) { /* ... */ } Note: reading data-* attributes via .data() caches values.
8. Throttle and debounce event handlers
For events like scroll or resize, limit how often heavy handlers run. Use small utility functions or libraries; here’s a lightweight debounce:
Why it matters: prevents performance issues from high-frequency events.
Example (debounce):
function debounce(fn, wait) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), wait); }; } $(window).on('resize', debounce(function() { // expensive layout recalculation console.log('resized'); }, 200)); 9. Use .promise() to coordinate multiple animations
If you trigger multiple animations and want to run code after all finish, use .promise() with ‘fx’ queue.
Why it matters: avoids callback hell when waiting for many concurrent animations.
Example:
$('.card').fadeOut(300).animate({ left: '50px' }, 300); $('#container').promise().done(function() { // all animations on #container and its children finished console.log('animations complete'); }); 10. Convert jQuery code to modern vanilla JS patterns (when appropriate)
Knowing equivalent vanilla APIs helps when modernizing code. Here are quick mappings:
Why it matters: helps migrate away from jQuery incrementally.
Comparison table:
| jQuery | Vanilla JS |
|---|---|
| $(‘#id’) | document.getElementById(‘id’) |
| $(‘.class’) | document.querySelectorAll(‘.class’) |
| $(el).on(‘click’, fn) | el.addEventListener(‘click’, fn) |
| $(el).addClass(‘x’) | el.classList.add(‘x’) |
| $.ajax({…}) | fetch(…) |
| $(el).data(‘k’, v) | el.dataset.k = v |
Small example — toggling a class:
// jQuery $('#toggle').on('click', function() { $(this).toggleClass('active'); }); // Vanilla document.getElementById('toggle').addEventListener('click', function() { this.classList.toggle('active'); }); Final tips
- Profile and measure before optimizing — caching and delegation help, but the biggest wins are often architectural.
- Keep package size in mind: if starting a new project, evaluate whether jQuery is necessary.
- For legacy maintenance, build small migration layers (wrappers) so you can replace pieces with vanilla or framework code gradually.
If you want, I can convert any of the examples above into TypeScript, provide a small plugin scaffolding template, or produce a checklist for migrating a jQuery codebase.
Leave a Reply