Introduction to jQuery Selectors
jQuery is a fast, lightweight, and feature-rich JavaScript library that simplifies HTML document manipulation. One of its core features is selectors, which allow developers to find and manipulate HTML elements easily. jQuery selectors are inspired by CSS selectors but come with additional functionalities that make DOM traversal even more powerful.
In this article, we will explore jQuery Selectors with suitable examples and explanations.
1. Basic Selectors in jQuery
1.1 The Universal Selector (*)
The * selector selects all elements on a web page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Universal Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("*").css("color", "blue");
});
</script>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
Explanation:
The * selector applies the color: blue style to all elements in the document.
1.2 ID Selector (#id)
The #id selector selects an element by its unique ID.
Example:
<p id="myPara">This is a paragraph.</p>
<script>
$(document).ready(function(){
$("#myPara").css("color", "red");
});
</script>
Explanation:
The paragraph with id="myPara" is selected and its text color is changed to red.
1.3 Class Selector (.class)
The .class selector selects all elements with a specific class name.
Example:
<p class="highlight">Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<script>
$(document).ready(function(){
$(".highlight").css("background-color", "yellow");
});
</script>
Explanation: All elements with the class highlight get a yellow background. 1.4 Element Selector (tagname) The tagname selector selects all elements with the specified tag. Example:
<h2>Heading 1</h2>
<h2>Heading 2</h2>
<script>
$(document).ready(function(){
$("h2").css("font-size", "30px");
});
</script>
Explanation:
All <h2> elements have their font size increased to 30px.
2. Attribute Selectors in jQuery
2.1 Selecting Elements with a Specific Attribute
Use [attribute] to select elements that have a specific attribute.
Example:
<input type="text" placeholder="Enter Name">
<input type="password">
<script>
$(document).ready(function(){
$("[placeholder]").css("border", "2px solid green");
});
</script>
Explanation:
All elements with a placeholder attribute receive a green border.
2.2 Selecting Elements with a Specific Attribute Value
Use [attribute="value"] to select elements with a specific attribute value.
Example:
<input type="text">
<input type="password">
<script>
$(document).ready(function(){
$("input[type='password']").css("background-color", "lightgray");
});
</script>
Explanation:
Only <input> elements with type="password" will have a light gray background.
3. Hierarchical Selectors in jQuery
3.1 Child Selector (parent > child)
Selects direct child elements of a parent.
Example:
<div>
<p>Paragraph inside div</p>
<span><p>Nested paragraph</p></span>
</div>
<script>
$(document).ready(function(){
$("div > p").css("color", "blue");
});
</script>
Explanation:
Only direct <p> children inside <div> are selected, excluding nested <p> inside <span>.
3.2 Descendant Selector (ancestor descendant)
Selects all descendant elements.
Example:
<div>
<p>Paragraph inside div</p>
<span><p>Nested paragraph</p></span>
</div>
<script>
$(document).ready(function(){
$("div p").css("color", "green");
});
</script>
Explanation:
All <p> elements inside <div>, whether directly inside or nested, are selected.
4. Filtering Selectors in jQuery
4.1 First and Last Element Selectors (:first and :last)
Selects the first and last element in a group.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
$(document).ready(function(){
$("li:first").css("font-weight", "bold");
$("li:last").css("color", "red");
});
</script>
Explanation:
- The first
<li>is made bold. - The last
<li>turns red.
4.2 Even and Odd Elements Selectors (:even and :odd)
Selects elements based on even and odd index numbers.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
$(document).ready(function(){
$("li:even").css("background-color", "lightblue");
$("li:odd").css("background-color", "lightgray");
});
</script>
Explanation:
- Even-indexed
<li>elements get a blue background. - Odd-indexed
<li>elements get a gray background.
4.3 Selecting Hidden Elements (:hidden)
Used to select elements that are hidden using display: none or visibility: hidden.
Example:
<p style="display: none;">This is a hidden paragraph.</p>
<script>
$(document).ready(function(){
$(":hidden").show();
});
</script>
Conclusion
jQuery selectors are a powerful way to manipulate DOM elements efficiently. By mastering these selectors, developers can write cleaner and more effective jQuery code for their web applications.
