jQuery Selectors
One of the most powerful features of jQuery is its selectors. They let you
easily find and work with HTML elements on your page.
What Are jQuery Selectors?
jQuery selectors are used to select HTML elements so you can do things
with them — like hide them, change their text, or add a class. You can
select elements by their:
- Tag name (like p, div, h1)
- ID (using #id)
- Class (using .class)
- Attributes (like [type="text"])
And more!
jQuery selectors are built on CSS selectors, so if you're familiar with
CSS, you'll pick it up quickly. jQuery also adds some extra selectors that
are unique to it.
Syntax
All jQuery selectors start with a dollar sign and parentheses:
$(selector)
The jQuery Element Selector:
In jQuery, element selectors let you select HTML elements by their tag
name — just like in CSS.
How It Works
To select all elements of a specific type (like paragraphs, divs, or
headers), simply use the tag name inside the jQuery selector:
$("p")
This line selects all <p> (paragraph) elements on the page.
Example
Let’s look at a simple example. When a user clicks a button, all
paragraph elements will be hidden:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>jQuery Example</h2>
<p>This is a paragraph that will disappear.</p>
<p>Another paragraph to test.</p>
<button>Click Me</button>
</body>
</html>
Output:
jQuery Example
This is a paragraph that will disappear.
Another paragraph to test.
jQuery Example
The jQuery #id Selector:
jQuery makes it super simple to select and work with individual elements using their id attribute. This is where the #id selector comes in handy.
What Is the #id Selector?
Every HTML element can have an id attribute, and that id should be
unique on the page. jQuery lets you select that exact element using a #
followed by the ID name.
$("#test")
This selects the element with id="test".
Example:
Let’s say you want to hide just one specific element when a user clicks
a button. Here’s how you can do it:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide Example</title>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>jQuery Example</h2>
<p id="test">This paragraph will disappear when you click the button.</p>
<p>This paragraph will stay (because it has no id).</p>
<button>Click Me</button>
</body>
</html>
Output:
jQuery Example
This paragraph will disappear when you click the button.
This paragraph will stay (because it has no id).
jQuery Example
This paragraph will stay (because it has no id).
The jQuery .class Selector:
In jQuery, selecting multiple elements that share the same class is
easy — thanks to the .class selector.
What Is the .class Selector?
Classes are often used in HTML to group elements that share the same
styling or behavior. In jQuery, you can select these elements by writing
a dot (.) followed by the class name:
$(".test")
This selects all elements that have class="test".
Example:
Let’s say you want to hide all elements with the class test when a user
clicks a button. Here’s how you can do that with jQuery:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide by Class Example</title>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2>jQuery Example</h2>
<p class="test">Paragraph 1 (class="test") → will hide</p>
<p class="test">Paragraph 2 (class="test") → will hide</p>
<p>Paragraph 3 (no class) → will stay visible</p>
<button>Click Me</button>
</body>
</html>
Output:
jQuery Example
Paragraph 1 (class="test") → will hide
Paragraph 2 (class="test") → will hide
Paragraph 3 (no class) → will stay visible
jQuery Example
Paragraph 3 (no class) → will stay visible
More topic in jQuery
