Hierarchy Selectors in jQuery

Hierarchy Selectors in jQuery are used to select elements based on their hierarchical relationship within the DOM. These selectors allow you to target elements based on their position relative to other elements, such as their parent, child, or sibling elements. Here’s a breakdown of the key hierarchy selectors:

1. Descendant Selector

• Syntax: $("ancestor descendant")
• Description: Selects all elements that are descendants of a specified ancestor element, at any level of nesting.
• Example:

  $("div p").css("color", "blue");
  

  Explanation: Selects all <p> elements inside <div> elements and changes their text color to blue.

2. Child Selector

• Syntax: $("parent > child")
• Description: Selects elements that are direct children of a specified parent element. Only immediate children are selected, not deeper descendants.
• Example:

  $("ul > li").css("color", "green");
  

  Explanation: Selects all <li> elements that are direct children of <ul> and changes their text color to green.

3. Adjacent Sibling Selector

• Syntax: $("previous + next")
• Description: Selects an element that is immediately preceded by a specified sibling element.
• Example:

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

  Explanation: Selects the first <p> element immediately following each <h2> element and applies italic styling.

4. General Sibling Selector

• Syntax: $("previous ~ siblings")
• Description: Selects all sibling elements that follow a specified element, not just the immediate one.
• Example:

  $("h2 ~ p").css("font-weight", "bold");
  

  Explanation: Selects all <p> elements that follow each <h2> element and applies bold styling.

Form Selectors in jQuery

Form Selectors in jQuery are specifically designed to target form elements and their states. These selectors are useful for interacting with form fields, managing form submissions, and handling user input.

1. Input Type Selector

• Syntax: $("input[type='type']")
• Description: Selects <input> elements of a specified type.
• Example:

  $("input[type='text']").css("border", "1px solid red");
  

  Explanation: Selects all <input> elements with type='text' and applies a red border.

2. Checkbox Selector

• Syntax: $("input:checkbox")
• Description: Selects all <input> elements of type checkbox.
• Example:

  $("input:checkbox").each(function() {
    if ($(this).is(":checked")) {
      $(this).next("label").css("font-weight", "bold");
    }
  });
  

  Explanation: Checks if each checkbox is checked and, if so, makes the associated label’s font bold.

3. Radio Button Selector

• Syntax: $("input:radio")
• Description: Selects all <input> elements of type radio.
• Example:

  $("input:radio[name='gender']:checked").val();
  

  Explanation: Gets the value of the selected radio button within the gender group.

4. Selected Option Selector

• Syntax: $("select option:selected")
• Description: Selects <option> elements that are selected within a <select> dropdown.
• Example:

  $("select option:selected").css("background-color", "yellow");
  

  Explanation: Changes the background color of the selected options to yellow.

5. Form Element Selector

• Syntax: $("form :input")
• Description: Selects all form elements (<input>, <textarea>, <select>, etc.) within a specified form.
• Example:

  $("form :input").on("focus", function() {
    $(this).css("border", "2px solid blue");
  });
  

  Explanation: Adds a blue border to all form elements when they are focused.

Summary

• Hierarchy Selectors: These selectors allow you to target elements based on their hierarchical relationships in the DOM. They include the Descendant Selector, Child Selector, Adjacent Sibling Selector, and General Sibling Selector.
• Form Selectors: These selectors focus on form elements and their states. They include Input Type Selectors, Checkbox and Radio Button Selectors, Selected Option Selectors, and Form Element Selectors.