jQuery-jQuery DOM manipulation & AJAX

Example

/* select, traverse and edit */ // find active items, add a class and append a new element var $active = $('#sidebar').find('.item.active'); $active.addClass('highlight').append($('<span>').addClass('badge').text('New')); // create an element, set attributes and insert var $li = $('<li>').addClass('comment').text('Nice post!'); $('#comments').append($li);

Scenario

Use case: on a blog, when a user posts a comment via AJAX you create the comment element client-side and append it to the comments list. You may also need to find and update a sidebar counter, toggle classes for active/visited states, or walk the DOM to find a related container (.closest) to display context-sensitive UI.

Example

/* event delegation for dynamic elements */ // Attach one handler to a stable parent to handle clicks on buttons added later $('#tasks').on('click', '.delete-btn', function(e) { e.preventDefault(); var id = $(this).closest('li').data('id'); $.ajax({ url: '/api/tasks/' + id, method: 'DELETE' }) .done(function() { $('#task-' + id).remove(); }) .fail(function() { alert('Delete failed'); }); }); /* parallel requests with Deferreds */ $.when($.getJSON('/api/user'), $.getJSON('/api/permissions')).done(function(userResp, permsResp) { var user = userResp[0], perms = permsResp[0]; // render UI using both responses });

Scenario

Use case: a dashboard that loads a user profile and permissions in parallel, then renders the page only after both responses arrive; or a dynamic list where items are added/removed client-side — event delegation (.on) handles user actions on items created after page load. jQuery's $.ajax and convenience wrappers reduce boilerplate for these common tasks and return jqXHR objects compatible with .then/.done for chaining.

Example

/* animation and utilities */ $('#notice').fadeIn(300).delay(2000).fadeOut(300); /* extend defaults and build a tiny plugin */ $.fn.simpleTooltip = function(options) { var settings = $.extend({ color: '#333', delay: 200 }, options); return this.each(function() { var $el = $(this); $el.on('mouseenter', function() { /* show tooltip using settings */ }); }); }; // usage $('.has-tooltip').simpleTooltip({ color: '#222' });

Scenario

Use case: you need a small UI widget (modal, tooltip, carousel) that should be lightweight and easily attached to DOM elements. You write it once as a jQuery plugin using $.fn and $.extend to merge default options — this makes reuse across pages and projects trivial. Utilities like $.each, $.map and $.extend are invaluable for small data transforms and merging configuration objects; .data stores element-scoped state without polluting attributes.