jQuery Selectors

jQuery selectors are used to find (select) HTML elements and manipulate them. Selectors are based on CSS selectors but also include additional capabilities specific to jQuery.

1. Basic Selectors

Selector	Description	Example
`*`	Selects all elements.	`$(" * ")` selects all elements.
`#id`	Selects an element with the given ID.	`$("#header")` selects the element with ID `header`.
`.class`	Selects all elements with the given class.	`$(".menu")` selects all elements with class `menu`.
`element`	Selects all elements with the specified tag.	`$("p")` selects all `<p>` elements.

2. Hierarchy Selectors

Selector	Description	Example
`ancestor descendant`	Selects all descendants of a specific ancestor.	`$("div p")` selects all `<p>` elements inside `<div>`.
`parent > child`	Selects all direct children of a parent.	`$("ul > li")` selects all `<li>` elements that are direct children of `<ul>`.
`prev + next`	Selects the next sibling of an element.	`$("#header + p")` selects the first `<p>` immediately after `#header`.
`prev ~ siblings`	Selects all siblings after a specified element.	`$("#header ~ p")` selects all `<p>` elements after `#header`.

3. Attribute Selectors

Selector	Description	Example
`[attribute]`	Selects elements with a specific attribute.	`$("[href]")` selects all elements with an `href` attribute.
`[attribute=value]`	Selects elements with a specific attribute value.	`$("[type='text']")` selects all `<input>` elements with `type="text"`.
`[attribute!=value]`	Selects elements where the attribute value is not equal to the specified value.	`$("[type!='password']")` selects all `<input>` elements except those with `type="password"`.
`[attribute^=value]`	Selects elements where the attribute value starts with the specified value.	`$("[name^='user']")` selects elements with a `name` starting with “user”.
`[attribute$=value]`	Selects elements where the attribute value ends with the specified value.	`$("[src$='.jpg']")` selects all elements with `src` ending in `.jpg`.
`[attribute*=value]`	Selects elements where the attribute value contains the specified value.	`$("[title*='info']")` selects elements with “info” in their `title`.

4. Form Selectors

Selector	Description	Example
`:input`	Selects all input, textarea, select, and button elements.	`$(":input")` selects all form input elements.
`:text`	Selects all text input fields.	`$(":text")` selects all `<input type='text'>` fields.
`:password`	Selects all password fields.	`$(":password")` selects all `<input type='password'>`.
`:checkbox`	Selects all checkbox elements.	`$(":checkbox")` selects all `<input type='checkbox'>`.
`:radio`	Selects all radio button elements.	`$(":radio")` selects all `<input type='radio'>`.
`:submit`	Selects all submit buttons.	`$(":submit")` selects all `<input type='submit'>`.
`:reset`	Selects all reset buttons.	`$(":reset")` selects all `<input type='reset'>`.
`:button`	Selects all button elements and `<input type='button'>`.	`$(":button")` selects buttons.
`:file`	Selects all file input elements.	`$(":file")` selects `<input type='file'>`.
`:enabled`	Selects all enabled form elements.	`$(":enabled")` selects all enabled form fields.
`:disabled`	Selects all disabled form elements.	`$(":disabled")` selects all disabled form fields.
`:checked`	Selects all checked checkboxes or radio buttons.	`$(":checked")` selects all checked checkboxes.
`:selected`	Selects all selected options in a dropdown.	`$(":selected")` selects all selected options in `<select>`.

5. Content Filters

Selector	Description	Example
`:contains(text)`	Selects elements containing the specified text.	`$(":contains('Hello')")` selects elements containing “Hello”.
`:empty`	Selects elements with no child elements or text.	`$(":empty")` selects all empty elements.
`:has(selector)`	Selects elements containing at least one element that matches the selector.	`$("div:has(p)")` selects `<div>` elements containing `<p>`.
`:parent`	Selects elements that have at least one child.	`$(":parent")` selects all elements with children.

6. Visibility Filters

Selector	Description	Example
`:visible`	Selects all visible elements.	`$(":visible")` selects all visible elements.
`:hidden`	Selects all hidden elements.	`$(":hidden")` selects all hidden elements.

7. Child Filters

Selector	Description	Example
`:first-child`	Selects the first child of each parent.	`$(":first-child")` selects the first child.
`:last-child`	Selects the last child of each parent.	`$(":last-child")` selects the last child.
`:nth-child(n)`	Selects the nth child of each parent.	`$(":nth-child(2)")` selects the second child.
`:only-child`	Selects elements that are the only child of their parent.	`$(":only-child")` selects elements that are the only child.

8. jQuery Traversal Filters

Selector	Description	Example
`:first`	Selects the first element.	`$("p:first")` selects the first `<p>` element.
`:last`	Selects the last element.	`$("p:last")` selects the last `<p>` element.
`:eq(index)`	Selects an element with the specified index.	`$("li:eq(2)")` selects the third `<li>` element.
`:even`	Selects even-indexed elements.	`$("tr:even")` selects even `<tr>` rows.
`:odd`	Selects odd-indexed elements.	`$("tr:odd")` selects odd `<tr>` rows.
`:lt(index)`	Selects all elements with an index less than the specified one.	`$("li:lt(3)")` selects the first three `<li>` elements.
`:gt(index)`	Selects all elements with an index greater than the specified one.	`$("li:gt(2)")` selects all `<li>` elements after the third one.

Example: Combining Selectors

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Selectors Example</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            // Change text color for all <p> elements
            $("p").css("color", "blue");

            // Select specific element by ID
            $("#specific").css("font-weight", "bold");

            // Apply style to elements with a class
            $(".highlight").css("background-color", "yellow");

            // Select form elements
            $(":checkbox:checked").parent().css("border", "1px solid red");
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p id="specific">This is a specific paragraph.</p>
    <div class="highlight">This is a highlighted div.</div>
    <form>
        <input type="checkbox" checked> Check Me
    </form>
</body>
</html>

Try It Now