Explain jQuery selectors with Example

jQuery selectors allow you to select and manipulate HTML elements. They are based on CSS selectors, but they also include some additional functionalities. Here's an overview of common jQuery selectors with examples:

Basic Selectors

Element Selector
- Selects all elements of a specified type.
```
$("p") // Selects all <p> elements
```

ID Selector

Selects a single element with a specified ID.

$("#myElement") // Selects the element with id="myElement"

Class Selector

Selects all elements with a specified class.

$(".myClass") // Selects all elements with class="myClass"

Attribute Selectors

Attribute Selector

Selects elements with a specified attribute.

$("input[name='username']") // Selects all <input> elements with name="username"

Attribute Contains Selector
- Selects elements whose specified attribute contains a given value.
```
$("a[href*='example']") // Selects all <a> elements with "example" in their href attribute
```

Hierarchy Selectors

Descendant Selector
- Selects all elements that are descendants of a specified element.
```
$("div p") // Selects all <p> elements inside <div> elements
```

Child Selector

Selects all elements that are direct children of a specified element.

$("ul > li") // Selects all <li> elements that are direct children of <ul> elements

Filter Selectors

First Child Selector

Selects the first child of each matched element.

$("p:first-child") // Selects the first <p> element in each parent

Last Child Selector

Selects the last child of each matched element.

$("p:last-child") // Selects the last <p> element in each parent

Even and Odd Selectors

Selects elements based on their position in a group (even or odd).

$("tr:even") // Selects all even <tr> elements (0-based index)
$("tr:odd")  // Selects all odd <tr> elements (0-based index)

Not Selector
- Selects all elements that do not match the specified selector.
```
$("input:not(:checked)") // Selects all unchecked input elements
```

Form Selectors

:input Selector

Selects all input, textarea, select, and button elements.

$(":input") // Selects all input, textarea, select, and button elements

:checked Selector

Selects all checked checkboxes or radio buttons.

$("input:checked") // Selects all checked checkboxes or radio buttons

:disabled Selector

Selects all disabled elements.

$(":disabled") // Selects all disabled elements

Example Code

Here's an example that demonstrates some of these selectors:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Selectors Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select and hide all paragraphs
      $("p").hide();

      // Select the element with ID 'header' and change its text color
      $("#header").css("color", "blue");

      // Select all elements with class 'intro' and change their background color
      $(".intro").css("background-color", "yellow");

      // Select all <input> elements with name 'username' and add a border
      $("input[name='username']").css("border", "2px solid red");

      // Select the first <li> element in each <ul> and make the text bold
      $("ul li:first-child").css("font-weight", "bold");

      // Select all even rows in a table and change their background color
      $("tr:even").css("background-color", "#f2f2f2");
    });
  </script>
</head>
<body>
  <h1 id="header">Welcome to jQuery Selectors</h1>
  <p class="intro">This is an introduction paragraph.</p>
  <p class="intro">Another introduction paragraph.</p>
  <p>This is a normal paragraph.</p>

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>

  <table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </table>

  <form>
    <input type="text" name="username" placeholder="Username">
    <input type="checkbox" checked> Check me
    <input type="radio" checked> Select me
    <input type="text" disabled placeholder="Disabled input">
  </form>
</body>
</html>

This example includes various jQuery selectors to manipulate different elements on the page. When the document is ready, it hides all paragraphs, changes the color of the header text, modifies the background color of elements with the class intro, adds a border to input elements with the name username, makes the first list item in each unordered list bold, and sets the background color for even rows in the table.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us