jQuery Selectors

One of the most powerful features of jQuery is its ability to select and manipulate HTML elements effortlessly. jQuery selectors use CSS-like syntax to target elements on a web page, enabling you to perform various actions on them. At The Coding College, we aim to simplify coding concepts for developers of all levels. In this post, we’ll explore jQuery selectors and how they work.

What Are jQuery Selectors?

jQuery selectors are methods used to identify and select HTML elements. Once selected, you can perform actions such as hiding, showing, modifying styles, or adding interactivity.

The basic syntax for using jQuery selectors is:

$(selector).action();
  • selector: Identifies the element(s) to be targeted.
  • action: Specifies the jQuery method to perform on the selected element(s).

Types of jQuery Selectors

1. Basic Selectors

  • Universal Selector (*): Selects all elements on the page. 
$("*").hide(); // Hides all elements
  • Tag Selector: Selects elements by their tag name.
$("p").css("color", "blue"); // Changes text color of all `<p>` tags to blue
  • ID Selector (#id): Selects a single element by its ID. 
$("#header").text("Welcome!"); // Changes the text of the element with ID "header"
  • Class Selector (.class): Selects all elements with a specific class. 
$(".highlight").css("background-color", "yellow"); // Changes the background color of elements with class "highlight"

2. Hierarchy Selectors

  • Descendant Selector: Selects elements inside another element. 
$("div p").css("font-size", "16px"); // Selects all `<p>` elements inside `<div>` tags
  • Child Selector (>): Selects immediate children of an element. 
$("ul > li").css("color", "green"); // Changes the text color of direct `<li>` children of `<ul>`
  • Sibling Selector (+): Selects the next sibling element. 
$("h1 + p").hide(); // Hides the `<p>` immediately following an `<h1>`
  • General Sibling Selector (~): Selects all sibling elements after a specified element. 
$("h1 ~ p").hide(); // Hides all `<p>` siblings of an `<h1>`

3. Attribute Selectors

  • Basic Attribute Selector: Selects elements with a specific attribute. 
$("input[name]").val("Default Value"); // Sets the value of inputs with a "name" attribute
  • Attribute Equals Selector ([attr='value']): Matches elements with a specific attribute value. 
$("input[type='text']").css("border", "1px solid red"); // Adds a border to all text inputs
  • Attribute Contains Selector ([attr*='value']): Matches elements whose attribute contains a specific substring. 
$("a[href*='coding']").css("color", "blue"); // Changes the color of links containing "coding" in their `href`
  • Attribute Starts With Selector ([attr^='value']): Matches elements whose attribute starts with a specific value. 
$("img[src^='https']").addClass("secure"); // Adds a class to images with `src` starting with "https"
  • Attribute Ends With Selector ([attr$='value']): Matches elements whose attribute ends with a specific value. 
$("img[src$='.png']").hide(); // Hides all PNG images

4. Form Selectors

  • All Input Elements: 
$(":input").css("border", "1px solid black"); // Adds a border to all input elements
  • Specific Input Types: 
$(":text").val("Enter your name"); // Targets all text inputs
$(":checkbox").prop("checked", true); // Checks all checkboxes
  • Selected/Checked Elements: 
$(":checked").css("outline", "2px solid blue"); // Highlights checked checkboxes or selected radio buttons

5. Filtering Selectors

  • First Element (:first): 
$("li:first").css("font-weight", "bold"); // Makes the first list item bold
  • Last Element (:last): 
$("li:last").css("color", "red"); // Changes the color of the last list item
  • Even and Odd Elements (:even, :odd): 
$("tr:even").css("background-color", "#f2f2f2"); // Styles even rows of a table
$("tr:odd").css("background-color", "#ffffff"); // Styles odd rows of a table
  • Contains Text (:contains('text')): 
$("p:contains('jQuery')").css("font-style", "italic"); // Italicizes paragraphs containing "jQuery"
  • Has Child Elements (:has()): 
$("div:has(p)").css("border", "1px solid blue"); // Adds a border to divs that contain `<p>` elements

Example: Combining Selectors

$("div#content p.highlight:contains('Learn')").css("color", "green");

This example selects all <p> tags with the class highlight inside a <div> with the ID content that contain the word “Learn.”

Conclusion

jQuery selectors are incredibly versatile, allowing you to target HTML elements with precision and ease. By mastering them, you can create dynamic, interactive web applications in no time.

Leave a Comment