jQuery: From Zero to Hero
The friendliest jQuery tutorial on the internet. Learn to write powerful JavaScript in far fewer lines — no experience needed.
📋 Table of Contents
What is jQuery & Why Use It?
jQuery is a fast, small JavaScript library that makes it dramatically simpler to select HTML elements, handle events, create animations, and send server requests.
Think of JavaScript as a powerful but wordy language, and jQuery as a set of helpful shortcuts. Instead of writing five lines of plain JavaScript to do one thing, jQuery lets you do it in one line.
Here’s the same task done two ways — hiding an element with a red border when clicked:
Find Elements
Grab any HTML element using CSS-style selectors — by ID, class, tag, and more.
Change Content
Update text, HTML, attributes, and CSS styles of any element on the page.
Handle Events
React to clicks, keyboard input, mouse movements, form submissions, and more.
Animate
Fade elements in and out, slide panels, and build smooth custom animations.
Talk to Servers
Send and receive data from a web server without reloading the page (AJAX).
Cross-browser
Works the same in Chrome, Firefox, Safari and Edge — no compatibility headaches.
Setting Up jQuery
Getting started with jQuery takes less than a minute. You have two main options: use a CDN link, or download the file yourself.
A CDN (Content Delivery Network) serves jQuery from fast servers around the world. Just copy this one line inside your HTML’s <head> tag — no downloads needed:
- 1Go to jquery.comVisit jquery.com/download and click “Download the compressed, production jQuery 3.x.x”
- 2Save the filePut
jquery.min.jsin your project folder, e.g. in ajs/subfolder. - 3Link it in your HTMLAdd
<script src="js/jquery.min.js"></script>before your own script tag.
Here’s a complete HTML file you can use as a starting point for every jQuery project:
$(document).ready()This is one of the most important concepts in jQuery. The $(document).ready() function ensures your code only runs after the entire HTML page has loaded:
<script> tags at the bottom of <body>, or wrap your code in $(document).ready(). If you try to select an element before it exists in the HTML, jQuery can’t find it!Selectors — Finding Elements
Before you can do anything with an element, you need to find it. jQuery selectors work exactly like CSS selectors — so if you know CSS, you already know how to select elements!
The magic symbol in jQuery is the dollar sign $. You pass a selector string into it, and jQuery finds all matching elements for you.
| Selector | What It Matches | Example |
|---|---|---|
:first | The very first matched element | $('li:first') |
:last | The very last matched element | $('li:last') |
:even | Elements with even index (0, 2, 4…) | $('tr:even') |
:odd | Elements with odd index (1, 3, 5…) | $('tr:odd') |
:eq(n) | The element at index n | $('li:eq(2)') — 3rd item |
:not(sel) | All elements NOT matching sel | $('p:not(.intro)') |
:empty | Elements with no children or text | $('td:empty') |
:hidden | Elements that are hidden | $('div:hidden') |
:visible | Elements that are visible | $('div:visible') |
:contains(text) | Elements that contain specific text | $('p:contains("jQuery")') |
#myId) is the fastest selector because IDs are unique. When speed matters, use IDs first, then classes, and avoid selecting by tag name alone on large pages.DOM Manipulation
The DOM (Document Object Model) is the live, in-memory version of your HTML. jQuery makes it incredibly easy to read and change any part of it.
The same methods work for both getting a value (no argument) and setting a value (with argument):
| Method | What It Does | Position |
|---|---|---|
append() | Adds content inside the element, at the end | End of children |
prepend() | Adds content inside the element, at the start | Start of children |
after() | Adds content after the element (sibling) | After element |
before() | Adds content before the element (sibling) | Before element |
remove() | Removes the element and all its children from the DOM | — |
empty() | Removes all children, but keeps the element itself | — |
clone() | Makes a copy of the element | — |
wrap() | Wraps the element in a new HTML structure | Around element |
One of the most common tasks in jQuery is toggling CSS classes to show/hide things or change their appearance:
Once you’ve found an element, you can move to its relatives:
Events — Making Things Interactive
Events are how your page responds to the user. A click, a keypress, hovering over something — jQuery makes it effortless to listen for and react to any of these.
.on()The modern and recommended way to attach events is with .on(). It’s flexible — you can attach multiple events at once:
Event delegation is a powerful technique for elements that are added to the page after it loads. Instead of attaching events to individual elements, you attach them to a parent:
$(this)?this refers to the specific element that triggered the event. Wrapping it in $(this) gives you the full jQuery power for that element. For example, if you click one of five buttons, $(this) refers to only the button you clicked.Effects & Animations
jQuery comes with built-in effects that make your pages feel alive — fading, sliding, and custom animations — all with just one line of code.
| Method | What it does | Speed Options |
|---|---|---|
hide() | Hides the element (shrinks it to nothing) | ‘slow’, ‘fast’, or ms number |
show() | Shows a hidden element | ‘slow’, ‘fast’, or ms number |
toggle() | Shows if hidden, hides if visible | ‘slow’, ‘fast’, or ms number |
fadeIn() | Fades element from invisible to visible | ‘slow’, ‘fast’, or ms number |
fadeOut() | Fades element out to invisible | ‘slow’, ‘fast’, or ms number |
fadeToggle() | Toggles fade in/out | ‘slow’, ‘fast’, or ms number |
fadeTo() | Fades to a specific opacity (0–1) | speed + opacity required |
slideDown() | Reveals element with a downward slide | ‘slow’, ‘fast’, or ms number |
slideUp() | Hides element with an upward slide | ‘slow’, ‘fast’, or ms number |
slideToggle() | Toggles slide down/up | ‘slow’, ‘fast’, or ms number |
.animate()The .animate() method lets you animate any numeric CSS property — width, height, left, top, opacity, font-size, and more:
$('#box').addClass('active').fadeIn(400).css('color','red') — all three things happen in sequence. It’s called “chaining” and it’s one of jQuery’s most elegant features.AJAX — Talking to Servers
AJAX stands for Asynchronous JavaScript And XML. It lets your page send requests to a server and receive data back — without ever reloading the page. Think of live search results, like-buttons, and infinite scroll.
$.ajax() or $.get() to send a request to a URL in the background.$.get() and $.post()$.ajax() MethodFor complete control over your requests, use $.ajax():
.load().load() method is a shortcut that fetches HTML from a URL and injects it into an element: $('#content').load('about.html'); — perfect for loading page sections on demand.Quick Reference Cheat Sheet
Bookmark this page! Here’s everything you need at a glance — the most important jQuery methods organized by category.
$('#id')By ID$('.class')By class$('tag')By tag name$('ul li')Descendant$('a[href]')Has attribute$(':first')First element$(':hidden')Hidden elements.text()Get/set text.html()Get/set HTML.val()Get/set input value.attr('href')Get/set attribute.removeAttr()Remove attribute.css('color')Get/set style.data('key')Get/set data-* attr.append()Add to end inside.prepend()Add to start inside.after()Add after element.before()Add before element.remove()Delete element.empty()Clear children.clone()Copy element.addClass()Add CSS class.removeClass()Remove CSS class.toggleClass()Toggle CSS class.hasClass()Check for class.on('click', fn)Attach event.off('click')Remove event.click(fn)Click shorthand.hover(in, out)Hover in/out.submit(fn)Form submit.keyup(fn)Key releasede.preventDefault()Stop default.show() / .hide()Show/hide.toggle()Toggle visibility.fadeIn() / .fadeOut()Fade effects.fadeToggle()Toggle fade.slideDown() / .slideUp()Slide effects.slideToggle()Toggle slide.animate({})Custom animation$.get(url, fn)GET request$.post(url, data, fn)POST request$.ajax({})Full AJAX control$.getJSON(url, fn)Fetch JSON$('#el').load(url)Load HTML.parent()Direct parent.children()Direct children.find('sel')All descendants.siblings()All siblings.next() / .prev()Next/prev sibling.closest('sel')Nearest ancestor.each(fn)Loop elements