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 small JavaScript library that makes selecting elements, handling events, updating the DOM, and calling APIs shorter. QueryVerse is this course’s sample admin UI.
Why should you care?
Many legacy and ASP.NET pages still use jQuery — learning it helps you maintain and improve them safely.
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; }
</style>
</head>
<body>
<h1>QueryVerse</h1>
<p class="muted" id="msg">Waiting…</p>
<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');
});
});
</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, wait for DOM ready with $(function(){...}), then select with $() and call methods.
- Follow the steps below — typing the code yourself is the fastest way to learn.
Practice next
- Paste into an HTML file and open it.
- Click the button.
- Change the message text.
- Use console.log($.fn.jquery) to print the version.
- Rename #msg and update the selector.
Remember
jQuery shortens DOM work. Ready runs after HTML is parsed. your page is your practice app.
Why jQuery
Team inherits an old admin page.
Outcome: You can explain jQuery’s role 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!