jQuery Selectors

jQuery selectors are used to “select” and manipulate HTML elements. They are a powerful way to navigate and interact with the DOM. In this guide, you’ll find an overview of different selectors, their syntax, and examples to help you master them.

At The Coding College, we focus on delivering actionable, practical guides to make your learning experience seamless.

What are jQuery Selectors?

Selectors allow you to target HTML elements in your webpage. You can then apply jQuery actions or effects to these selected elements.

Basic Syntax:

$(selector).action();
  • selector: Identifies the HTML element(s) to select.
  • action: Specifies what to do with the selected elements.

Types of jQuery Selectors

1. Universal Selector

Selects all elements in the DOM.
Syntax:

$("*")

Example:

$("*").css("border", "1px solid red");

2. ID Selector

Selects an element with a specific id.
Syntax:

$("#id")

Example:

$("#header").hide();

3. Class Selector

Selects all elements with a specific class.
Syntax:

$(".class")

Example:

$(".highlight").css("background-color", "yellow");

4. Element Selector

Selects all elements of a specific type.
Syntax:

$("element")

Example:

$("p").text("This is a paragraph.");

Hierarchy Selectors

1. Child Selector (>)

Selects direct child elements of a specific element.
Syntax:

$("parent > child")

Example:

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

2. Descendant Selector (Space)

Selects all descendants of a specific element.
Syntax:

$("ancestor descendant")

Example:

$("div p").css("font-size", "14px");

3. Adjacent Sibling Selector (+)

Selects the next sibling of an element.
Syntax:

$("element1 + element2")

Example:

$("h1 + p").css("font-weight", "bold");

4. General Sibling Selector (~)

Selects all siblings of an element.
Syntax:

$("element1 ~ element2")

Example:

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

Attribute Selectors

1. Basic Attribute Selector

Selects elements with a specific attribute.
Syntax:

$("[attribute]")

Example:

$("[href]").addClass("link-highlight");

2. Attribute Equals Selector

Selects elements with an attribute of a specific value.
Syntax:

$("[attribute='value']")

Example:

$("[type='text']").val("Default Text");

3. Attribute Contains Selector (*=)

Selects elements where the attribute contains a specified value.
Syntax:

$("[attribute*='value']")

Example:

$("[src*='logo']").css("width", "100px");

4. Attribute Starts With Selector (^=)

Selects elements where the attribute starts with a specific value.
Syntax:

$("[attribute^='value']")

Example:

$("[class^='btn']").addClass("active");

5. Attribute Ends With Selector ($=)

Selects elements where the attribute ends with a specific value.
Syntax:

$("[attribute$='value']")

Example:

$("[class$='error']").css("color", "red");

Filters

1. First and Last

  • First Selector: :first
  • Last Selector: :last
    Example:
$("ul li:first").css("color", "green");
$("ul li:last").css("color", "red");

2. Even and Odd

  • Even Selector: :even
  • Odd Selector: :odd
    Example:
$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#fff");

3. Visibility Filters

  • Visible Selector: :visible
  • Hidden Selector: :hidden
    Example:
$(":visible").css("border", "2px solid green");
$(":hidden").show();

4. Contains Selector

Selects elements containing specific text.
Syntax:

$(":contains('text')")

Example:

$("p:contains('jQuery')").css("font-weight", "bold");

Group Selectors

Select multiple elements in a single statement.
Syntax:

$("selector1, selector2, selector3")

Example:

$("h1, h2, h3").css("color", "blue");

Custom jQuery Selector Example

Let’s build an example where we apply multiple selectors.

HTML:

<div id="content">
    <h1 class="header">Welcome</h1>
    <p class="text">Learn jQuery Selectors at <a href="#">The Coding College</a>.</p>
    <p>Another paragraph.</p>
</div>

jQuery Code:

// Select the header and change its color
$("#content .header").css("color", "blue");

// Highlight all links
$("a[href]").css("background-color", "yellow");

// Change the font of even paragraphs
$("p:even").css("font-style", "italic");

Conclusion

jQuery selectors provide a versatile and efficient way to navigate and manipulate the DOM. Mastering these will significantly boost your ability to create interactive web pages.

Leave a Comment