Introduction to jQuery
Introduction to jQuery: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.
On this page
jQuery Tutorial · Lesson 1 of 100
Introduction to jQuery
Setup & DOM → Events Effects AJAX → Perf & Integrate → Ship & Projects
Setup & DOM · 1 — Select · ~6 min · Setup and Selectors
What is this?
jQuery is a compact JavaScript library that shortens selecting elements, binding events, updating the DOM, and calling APIs. QueryVerse is this course’s sample admin UI where every demo lives.
Why should you care?
Large Indian product and bank portals still ship jQuery on many screens — you need to read and improve that code without guessing.
See it live — copy this example
Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QueryVerse</title>
<style>
body { font-family: system-ui, sans-serif; margin: 1.25rem; }
.box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
.muted { color: #666; }
button { margin-right: .35rem; margin-top: .35rem; }
input, select, textarea { margin: .25rem 0; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
.hidden { display: none; }
.row-odd { background: #f7f7f7; }
.active { font-weight: 700; }
.toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
</style>
</head>
<body>
<h1>QueryVerse</h1>
<p class="muted" id="msg">Waiting…</p>
<button type="button" id="go">Say hello</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
$('#go').on('click', function () {
$('#msg').text('Hello from jQuery ' + $.fn.jquery);
});
});
</script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Load jQuery from a script tag, wait for DOM ready with $(function(){...}), select with $(), then call methods like .text() and .on().
- Follow the steps below — typing the code yourself is the fastest way to learn.
Practice next
- Save the example as an HTML file and open it in a browser.
- Click Say hello and confirm the version string appears.
- Change the greeting text and reload.
- Log the raw DOM node with $("#msg").get(0).
- Swap .text for .html with a trusted tag only.
Remember
jQuery wraps DOM work in a short API. Ready ensures nodes exist before you touch them. your page is the practice shell for later lessons.
Legacy admin takeover
Your team inherits QueryVerse HR screens at a Bengaluru SaaS company still on jQuery 3.
Outcome: You can explain what jQuery owns on the page in plain English.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
