jQuery Selectors & Events: Beginner’s Guide with Examples

Introduction

Want to interact with HTML elements and respond to user actions easily?

That’s exactly what jQuery selectors and events help you do.

Selectors allow you to target specific elements on a webpage, while events let you respond to user actions like clicks, typing, or hovering.

Together, they form the core foundation of jQuery.

What You Will Learn

How jQuery selectors work
Different ways to select elements
Common jQuery events
How to handle events with simple examples

What are jQuery Selectors?

jQuery selectors are used to find and select HTML elements.

👉 They work very similar to CSS selectors.

Once an element is selected, you can:

change its content
modify styles
handle events
animate it

What are jQuery Events?

Events are actions performed by users on a webpage.

👉 Examples:

clicking a button
typing in an input field
hovering over an element

jQuery makes it easy to detect and respond to these actions.

jQuery Selector Syntax

$("selector").action();

Example:

$("#btn").click();

Types of jQuery Selectors

There are multiple types of selectors in jQuery:

ID selectors (#id)
Class selectors (.class)
Tag selectors (tag)
Multiple selectors

👉 These help you target elements efficiently.

Common jQuery Selectors

1️⃣ Select by ID

$("#title").hide();

<h2 id="title">Welcome to jQuery</h2>

2️⃣ Select by Class

$(".box").css("background", "yellow");

<div class="box">Box 1</div>
<div class="box">Box 2</div>

3️⃣ Select by Tag

$("p").css("color", "blue");

<p>This is a paragraph</p>

4️⃣ Select Multiple Elements

$("h1, h2, h3").css("color", "green");

Advanced jQuery Selectors

Apart from basic selectors, jQuery also provides advanced selectors to target elements more precisely.

Attribute Selector

Select elements based on attributes:

$("input[type='text']").css("border", "2px solid blue");

First & Last Selector

$("p:first").css("color", "red");
$("p:last").css("color", "green");

Even & Odd Selector

$("tr:even").css("background", "#f2f2f2");
$("tr:odd").css("background", "#ddd");

👉 These selectors are useful when working with lists, tables, and forms.

Real-Life Use Cases

jQuery selectors and events are used in:

Dropdown menus
Form validation
Image sliders
Show/hide content
Interactive buttons

jQuery Events

Events are actions performed by users.

👉 Almost every interactive website uses these concepts.

Common jQuery Events

🔹 click()

$("#btn").click(function(){
    alert("Button clicked");
});

🔹 mouseover()

$(".box").mouseover(function(){
    $(this).css("background", "lightblue");
});

🔹 mouseout()

$(".box").mouseout(function(){
    $(this).css("background", "white");
});

🔹 keyup()

$("#name").keyup(function(){
    console.log($(this).val());
});

🔹 submit()

$("form").submit(function(){
    alert("Form submitted");
});

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selectors & Events</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<button id="btn">Click Me</button>
<p class="text">Hello jQuery</p>

<script>
$(document).ready(function(){
    $("#btn").click(function(){
        $(".text").toggle();
    });
});
</script>

</body>
</html>

Important Notes

Always wrap jQuery inside $(document).ready()
Use this to refer to current element
jQuery selectors are similar to CSS

Best Practices for jQuery Selectors & Events

Use specific selectors to improve performance
Avoid selecting too many elements unnecessarily
Always use $(document).ready()
Use this for better performance inside events
Keep your code clean and readable

Common Beginner Mistakes

Forgetting jQuery CDN
Using # for class selector
Running jQuery before page load

FAQs

What are jQuery selectors?

jQuery selectors are used to select HTML elements so you can manipulate them.

What are jQuery events?

Events are user actions like clicks, typing, or hovering that trigger code execution.

What is the difference between selector and event?

Selectors choose elements, while events define actions performed on those elements.

Why use jQuery events instead of JavaScript?

jQuery provides simpler syntax and better cross-browser support.

Is jQuery still useful in 2026?

Yes, especially for WordPress and small interactive projects.

Practice Tasks

Try these exercises to improve your understanding:

Show and hide a div using button click
Change text color when hovering over an element
Capture input value while typing
Validate a form before submission
Create a simple toggle menu

👉 Practicing these will make your concepts stronger.

Conclusion

jQuery selectors and events are essential for creating interactive websites.

By learning how to select elements and respond to user actions, you can build dynamic features like buttons, forms, and animations.

👉 These concepts are the foundation of jQuery and will be used in almost every project.

Practice the examples and try building small interactions to improve your understanding.

In the next tutorial, we’ll learn about jQuery DOM Manipulation.