jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal, event handling, and manipulation.
One of the key features of jQuery is its selectors, which allow you to find and manipulate elements in the DOM easily.
This tutorial will guide you through various types of jQuery selectors, along with examples.
Table of Contents:
1. Basic Selectors
Basic selectors target elements by their name, ID, or class.
Example 1.1: Selecting by Element Name
<!DOCTYPE html>
<html>
<head>
<title>jQuery Basic Selectors</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("color", "blue"); // Changes all <p> elements to blue
});
</script>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
Example 1.2: Selecting by ID
$("#myDiv").text("Hello, world!");
Example 1.3: Selecting by Class
$(".myClass").hide(); // Hides all elements with class "myClass"
2. Attribute Selectors
Attribute selectors target elements based on their attributes.
Example 2.1: Selecting by Attribute
$("[href]").css("color", "green"); // Changes all links to green
Example 2.2: Selecting by Attribute Value
$("[type='text']").val("Default Text"); // Sets default text for all text inputs
Example 2.3: Selecting by Partial Attribute Value
$("[src*='image']").addClass("highlight"); // Adds a class to images with "image" in their src
3. Hierarchy Selectors
Hierarchy selectors are used to find elements based on their relationship in the DOM.
Example 3.1: Descendant Selector
$("div p").css("font-size", "18px"); // Selects all <p> inside <div>
Example 3.2: Child Selector
$("ul > li").css("background-color", "yellow"); // Selects direct children <li> of <ul>
Example 3.3: Sibling Selectors
$("#first ~ p").css("color", "red"); // Selects all <p> siblings of #first
$("#first + p").css("color", "blue"); // Selects the immediate <p> sibling of #first
4. Filter Selectors
Filter selectors allow you to narrow down your selection.
Example 4.1: :first and :last
$("li:first").css("font-weight", "bold"); // Selects the first <li>
$("li:last").css("font-weight", "bold"); // Selects the last <li>
Example 4.2: :even and :odd
$("tr:even").css("background-color", "#f2f2f2"); // Even rows in a table
$("tr:odd").css("background-color", "#ddd"); // Odd rows in a table
Example 4.3: :not
$("p:not(.intro)").hide(); // Hides all <p> elements except those with class "intro"
5. Content Selectors
Content selectors help you select elements based on their text content.
Example 5.1: :contains
$("p:contains('jQuery')").css("text-decoration", "underline"); // Underlines paragraphs containing "jQuery"
Example 5.2: :empty
$("div:empty").text("This was empty!"); // Adds text to empty <div> elements
6. Form Selectors
Form selectors are useful for manipulating form elements.
Example 6.1: Input Selectors
$(":input").css("border", "1px solid red"); // Adds a border to all input elements
Example 6.2: Checkbox Selectors
$(":checkbox:checked").parent().css("background-color", "lightgreen"); // Highlights checked checkboxes
Example 6.3: Disabled Elements
$(":disabled").css("opacity", "0.5"); // Grays out disabled elements
Conclusion
jQuery selectors are powerful and make DOM manipulation extremely efficient. By mastering these selectors, you can easily target specific elements and apply styles or perform actions.
Experiment with the examples above and explore the official jQuery documentation for more advanced uses