jQuery: AJAX, Animations & Plugins

AJAX

// Full $.ajax
$.ajax({
    url: '/api/articles',
    method: 'GET',
    data: { page: 1, limit: 10 },
    dataType: 'json',
    headers: { 'Authorization': 'Bearer token' },
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(xhr.responseJSON?.message || error);
    },
    complete: function() {
        $('#spinner').hide();
    }
});

// Shorthand methods
$.get('/api/articles', { page: 1 }, function(data) {
    console.log(data);
});

$.post('/api/articles', { title: 'New', content: 'Body' }, function(data) {
    console.log('Created:', data);
});

$.getJSON('/api/users', function(users) {
    users.forEach(u => $('#list').append(`<li>${u.name}</li>`));
});

// Promise-based ($.ajax returns a Deferred)
$.ajax({ url: '/api/data' })
    .done(function(data) { /* success */ })
    .fail(function(xhr) { /* error */ })
    .always(function() { /* always runs */ });

// Serialize form data
var formData = $('#myForm').serialize();      // URL-encoded string
var formObj = $('#myForm').serializeArray(); // array of {name, value}

$.ajax({
    url: '/api/contact',
    method: 'POST',
    data: $('#myForm').serialize(),
    success: function() { alert('Sent!'); }
});

// Load HTML into element
$('#content').load('/partial.html #section', function() {
    console.log('Loaded');
});

Animations & Effects

// Show / Hide
$('.box').show();
$('.box').hide();
$('.box').toggle();

// Animated show/hide
$('.box').show(400);           // 400ms
$('.box').hide('slow');        // 'slow'=600ms, 'fast'=200ms
$('.box').fadeIn(300);
$('.box').fadeOut(300);
$('.box').fadeToggle();
$('.box').fadeTo(300, 0.5);   // fade to 50% opacity
$('.box').slideDown(400);
$('.box').slideUp(400);
$('.box').slideToggle();

// Custom animate
$('.box').animate({
    left: '+=100px',
    opacity: 0.5,
    height: '200px'
}, 600, 'swing', function() {
    // callback when done
});

// Stop / clear queue
$('.box').stop();              // stop current animation
$('.box').stop(true, true);   // clear queue + jump to end
$('.box').finish();           // complete all queued animations instantly

// Chaining
$('.box')
    .addClass('active')
    .fadeIn(300)
    .animate({ marginLeft: '20px' }, 200)
    .delay(1000)
    .fadeOut(300);

// Check animation state
if ($('.box').is(':animated')) { ... }

Utility Methods & Plugins

// Array/object utilities
$.each([1, 2, 3], function(index, value) {
    console.log(index, value);
});
$.each({ a: 1, b: 2 }, function(key, value) {
    console.log(key, value);
});

var doubled = $.map([1, 2, 3], function(val) { return val * 2; });
var evens = $.grep([1, 2, 3, 4], function(val) { return val % 2 === 0; });

$.extend({}, defaults, options);    // shallow merge
$.extend(true, {}, deep, merge);   // deep merge

// Type checking
$.isFunction(fn);
$.isArray(arr);
$.type(value);   // 'string', 'array', 'object', etc.

// DOM ready check
$.isReady   // boolean

// Writing a simple plugin
$.fn.highlight = function(color) {
    color = color || 'yellow';
    return this.each(function() {    // "this" = jQuery object
        $(this).css('background-color', color);
    });
};
// Usage: $('p').highlight('lightblue');

jQuery in 2024+

• jQuery is still used on ~77% of all websites — you will encounter it in legacy codebases.

• Modern vanilla alternatives: document.querySelector (selector), fetch (AJAX), classList (classes), element.addEventListener (events).

• Do NOT add jQuery to new projects — use React/Vue/Svelte or vanilla JS instead.

• If maintaining a jQuery codebase: upgrade to 3.x (dropped IE6-8), use $.ajax Promise API.

• jQuery Migrate plugin: helps upgrade from 1.x/2.x to 3.x without breaking changes.

• jQuery UI and jQuery Plugins: many are abandoned; prefer modern alternatives (Flatpickr, Select2, SortableJS).

• Bundle size: 87KB minified (30KB gzip) — significant for modern performance budgets.