jQuery Introduction

What jQuery is and how to include it.

✍️ 3 exercises + code challenge in this lesson

jQuery is a small JavaScript library that makes common tasks shorter: selecting elements, handling events, animating and making AJAX requests.

Include it from a CDN before your own scripts:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Modern JavaScript can do everything jQuery does, but you will meet jQuery in many existing projects, especially WordPress themes and older admin panels.

Key Takeaways: jQuery Introduction

Mastering jQuery Introduction helps you write clean and reliable jQuery code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

jQuery Introduction Code Example

jQuery
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<h2 id="title">Hello!</h2>
<button id="btn">Change with jQuery</button>

<script>
  $("#btn").click(function () {
    $("#title").text("Hello from jQuery!").css("color", "#0769AD");
  });
</script>
Free sign-in required · Google login available

jQuery Introduction Practice Exercises

Check what you learned in “jQuery Introduction”.

/ 3 solved
Fill in the blank

Select the element with id "title" in jQuery.

("#title").text("Hi");
✓ Correct! Not quite. Try again.
Multiple choice

What is jQuery?

✓ Correct! Not quite. Try again.
Code challenge

Use jQuery to set the text of #title to "Hello jQuery".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services