jQuery Selectors

jQuery selectors are used to find (select) HTML elements on a webpage so that you can perform actions on them — such as hiding, showing, or changing their content, attributes, or style.

They are based on CSS selectors, which means if you already know CSS, using jQuery selectors will feel very familiar.

Syntax:

$(selector).action();

$ → Refers to the jQuery function.
selector → The HTML element(s) you want to target.
action() → The operation to perform on the selected elements.

Example:

$("p").hide();   // Hides all <p> elements on the page

Types of jQuery Selectors

1. Element Selector

Selects all elements with a specific HTML tag name.

$("p").css("color", "blue");
// Changes text color of all <p> elements to blue

2. ID Selector

Selects an element by its unique ID.

$("#demo").hide();
// Hides the element with id="demo"

3. Class Selector

Selects all elements with a given class name.

$(".note").css("font-size", "18px");
// Changes text size for elements with class="note"

4. Universal Selector

Selects all HTML elements in the document.

$("*").css("margin", "5px");

5. Group Selector

Selects multiple elements at once, separated by commas.

$("h1, p, .highlight").css("background", "yellow");

Advanced Selectors

6. Descendant Selector

Selects all elements that are descendants of a specified element.

$("div p").hide();
// Hides all <p> elements inside <div>

7. Child Selector (>)

Selects only direct child elements of a specific parent.

$("div > p").css("color", "red");

8. Sibling Selectors

Adjacent Sibling (+)

Selects the element that is immediately next to another element.

$("h2 + p").css("font-style", "italic");

General Sibling (~)

Selects all siblings after a specified element.

$("h2 ~ p").css("color", "green");

9. First and Last Selector

Selects the first or last element from a group.

$("p:first").css("font-weight", "bold");
$("p:last").css("color", "green");

10. Even and Odd Selectors

Often used with lists or tables for styling alternate rows.

$("li:even").css("background", "#f2f2f2"); // Even-indexed elements
$("li:odd").css("background", "#ddd");     // Odd-indexed elements

11. Attribute Selectors

Used to select elements based on their attributes and values.

$("[href]").css("color", "blue");                 // All elements with href
$("input[type='text']").css("border", "2px solid blue");
$("a[target='_blank']").css("color", "orange");

Additional Attribute Filters:

$("a[href^='https']").css("color", "green");  // Starts with
$("a[href$='.pdf']").css("font-weight", "bold"); // Ends with
$("a[href*='google']").css("color", "purple"); // Contains

12. Filter Selectors

Fine-tune your selections using filters.

$("p:not(.intro)").css("color", "gray"); // Excludes .intro
$("p:contains('Hello')").css("color", "red"); // Contains text
$("div:empty").css("background", "#ccc"); // Empty elements
$("div:parent").css("border", "2px solid green"); // Non-empty

13. Form Selectors

Special selectors for working with forms.

Selector	Description
`:input`	Selects all input, textarea, select, and button elements
`:text`	Selects text fields
`:password`	Selects password fields
`:radio`	Selects radio buttons
`:checkbox`	Selects checkboxes
`:submit`	Selects submit buttons
`:reset`	Selects reset buttons
`:button`	Selects button elements
`:file`	Selects file input fields
`:checked`	Selects all checked checkboxes or radio buttons
`:selected`	Selects selected `<option>` elements

Example:

$(":checkbox:checked").css("outline", "2px solid blue");
$(":text").val("Enter your name");

Example in Action

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Selectors Example</title>
  <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
  <script>
    $(document).ready(function() {
      // Hide paragraph when clicked
      $("p").click(function() {
        $(this).hide();
      });

      // Change color of first heading
      $("h1:first").css("color", "darkblue");

      // Highlight all input fields
      $(":input").css("background", "#eef");
    });
  </script>
</head>
<body>
  <h1>Welcome to jQuery Selectors</h1>
  <h2>Click any paragraph to hide it</h2>

  <p>This is paragraph one.</p>
  <p>This is paragraph two.</p>

  <form>
    <input type="text" placeholder="Type here...">
    <input type="checkbox" checked> I agree
  </form>
</body>
</html>

Summary

Category	Description	Example
Basic Selectors	Select elements by tag, ID, class	`$("p"), $("#id"), $(".class")`
Hierarchy Selectors	Select elements based on parent-child/sibling relationships	`$("div > p"), $("h2 + p")`
Attribute Selectors	Select by attribute or attribute value	`$("[href]"), $("input[type='text']")`
Filter Selectors	Select based on position or content	`$(":first"), $(":contains('text')")`
Form Selectors	Select form fields easily	`$(":text"), $(":checkbox"), $(":selected")`

JavaScript Handbook