jQuery
jQuery is a small, fast JavaScript library created by John Resig in 2006. Its motto — "write less, do more" — captured an era when JavaScript engines differed sharply across browsers. jQuery smoothed the differences and popularized chainable, expressive DOM manipulation.
Relevance Today
Modern browsers and modern JavaScript have reduced the need for jQuery. Many features it once provided are now native (querySelectorAll, fetch, classList). However, jQuery remains widely deployed on legacy sites, in WordPress, and in many plugins, so familiarity is still useful for maintenance and integration work.
Including jQuery
Include via CDN: <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>. The library exposes jQuery and its alias $. Calling jQuery.noConflict() releases $ if another library uses it.
Selectors
jQuery extends CSS selectors: $('#id'), $('.class'), $('div'), $('input[type="text"]'). Custom pseudo-classes include :visible, :hidden, :first, :even, and :contains(text). A jQuery selection is a wrapped set that supports chaining.
DOM Manipulation
Read or set content: .text(), .html(), .val(). Attributes: .attr(), .prop(). Classes: .addClass(), .removeClass(), .toggleClass(). Structure: .append(), .prepend(), .after(), .before(), .remove(). Each returns the jQuery object for chaining.
Event Handling
Attach handlers with .on('click', handler); delegate events with .on('click', '.child', handler). Detach with .off(). Common events include click, submit, change, mouseenter, keydown. Event delegation is vital for dynamically added elements.
Effects and Animations
.show(), .hide(), .fadeIn(), .fadeOut(), .slideDown(), .slideUp(), and .animate() provide smooth animations. CSS transitions and the Web Animations API are modern alternatives for complex effects.
jQuery AJAX
jQuery's $.ajax(), $.get(), $.post(), and $.getJSON() wrap XHR with convenient defaults. The .done(), .fail(), and .always() callbacks form a deferred-based API. Many legacy systems still use these rather than native fetch.
Document Ready
The $(document).ready(function(){...}) or shorthand $(function(){...}) idiom runs code once the DOM is fully loaded. Modern equivalents include the DOMContentLoaded event or placing scripts at the end of <body>.
Plugins and Ecosystem
Thousands of jQuery plugins extend the library: carousels, datepickers, lightboxes, masked inputs, form validation. Plugins attach methods to jQuery.fn. Quality and security of plugins vary widely; evaluate before adopting.
Migration Path
For new projects, vanilla JavaScript or frameworks like React and Vue are preferred. Migrating from jQuery usually means replacing selectors with document.querySelector, DOM helpers with native methods, and AJAX with fetch. Incremental replacement is practical in legacy code.
Summary
jQuery remains a historically important and practically useful library. Its selectors, chainable DOM manipulation, and event handling set many patterns still seen today. Learning it eases maintenance of older codebases and integration with plugins.