Why Use jQuery?

Why use jQuery? Because it turns common web tasks — selection, events, animation, AJAX, DOM updates — into one-line, cross-browser-safe expressions. That sounds small, but it adds up to thousands of lines of application code saved over the lifetime of a project.

1. Tiny runtime — ~30 kB minified + gzipped. No build step. Drop a <script> and go.
2. Battle-tested cross-browser behaviour — event normalisation, fixed scroll positions, form serialisation that behaves the same everywhere.
3. Readable selectors — $('form .row:first input[type="email"]') is a single line that does what 15 lines of vanilla JS would do.
4. Event delegation is one flag: $('#list').on('click', 'li', handler) — one handler covers every existing AND future <li>.
5. Promise-based AJAX that works even in older browsers: $.ajax(...).done(...).fail(...).always(...).
6. Massive plugin ecosystem — DataTables, Select2, Slick carousel, Magnific Popup, FullCalendar — all assume jQuery.

Task: add a done class to every checked checkbox, then fade non-checked ones to 50%.

jQuery (3 lines, works everywhere):

js
$(':checkbox:checked').closest('li').addClass('done');
$(':checkbox:not(:checked)').closest('li').fadeTo(200, 0.5);

Vanilla JS (more verbose, handles IE/older Safari yourself):

js
document.querySelectorAll('input[type="checkbox"]:checked').forEach(el =>
  el.closest('li').classList.add('done')
);
document.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach(el =>
  el.closest('li').animate([{ opacity: 1 }, { opacity: 0.5 }], { duration: 200, fill: 'forwards' })
);

• You're building a React, Vue, or Svelte app — jQuery will fight the virtual DOM.
• You support only modern browsers (ES2020+) and the page is tiny — vanilla querySelector + fetch is enough.
• Bundle size matters (mobile-first, SEO-critical) — those 30 kB add up if you'd use only one or two lines.

• jQuery wins on developer speed — one readable line = lots of vanilla code.
• Cross-browser quirks are handled for you — huge productivity win on legacy targets.
• Event delegation via $('#parent').on('click', '.child', fn) solves a huge class of bugs.
• Don't mix jQuery with React/Vue — let the framework own the DOM it renders.
• If your whole page needs only 2 lines of JS, load vanilla — jQuery is overkill.

1. Find a 10+ line vanilla-JS snippet on Stack Overflow. Rewrite it in jQuery. Compare line count.
2. On any Bootstrap 4 demo site, open DevTools and type $.fn.jquery — note the version.
3. Delete a pro/con from the list above and defend your decision in a paragraph.

• Default to the slim build if you don't need AJAX or effects.
• For React apps, never let jQuery manipulate DOM under a React-owned root.
• If you only need one or two one-liners, you probably want vanilla JS + 3 lines of code.