What are the different types of jQuery selectors

jQuery provides various selectors to target HTML elements in an efficient manner. Below are the different types of jQuery selectors:

  • Element Selector: Selects elements by their tag name.
  • Class Selector: Selects elements with a specific class.
  • ID Selector: Selects a single element with a specific ID.
  • Attribute Selector: Selects elements based on an attribute or attribute value.
  • Universal Selector: Selects all elements in the document.
  • Hierarchical Selector: Selects elements based on their hierarchy or relationship.
  • Grouping Selector: Selects multiple selectors at once.

Here's a brief code example for these selectors:

$(document).ready(function() { $("div").css("background-color", "yellow"); // Element Selector $(".myClass").css("color", "blue"); // Class Selector $("#myId").css("font-size", "20px"); // ID Selector $("input[name='username']").css("border", "1px solid red"); // Attribute Selector $("*").css("border", "1px solid black"); // Universal Selector $("ul > li").css("list-style", "none"); // Hierarchical Selector $("h1, h2, h3").css("color", "green"); // Grouping Selector });

jQuery selectors JavaScript web development HTML manipulation programming