jQuery Attribute Selector

The attribute selector lets you find HTML elements based on their attributes and attribute values. This is useful when elements do not have a unique ID or class, but share a common attribute like type, href, name, or data-*.

What is an Attribute Selector?

Every HTML element can have attributes. For example, <input type="text"> has an attribute called type with the value text. Attribute selectors let you select elements based on these attribute names and values.

Basic Syntax

$("[attribute]")            → has the attribute
$("[attribute='value']")    → attribute equals exact value
$("[attribute!='value']")   → attribute does NOT equal value
$("[attribute^='value']")   → attribute starts with value
$("[attribute$='value']")   → attribute ends with value
$("[attribute*='value']")   → attribute contains value

Diagram: Attribute Selector Types

  HTML:
  <a href="https://google.com">Google</a>
  <a href="https://yahoo.com">Yahoo</a>
  <a href="http://example.com">Example</a>

  $("[href]")                → selects all 3 (all have href)
  $("[href='https://google.com']") → selects only Google
  $("[href^='https']")       → selects Google and Yahoo (start with https)
  $("[href$='.com']")        → selects all 3 (end with .com)
  $("[href*='yahoo']")       → selects only Yahoo (contains yahoo)

Selecting by Attribute Existence

The simplest use is selecting elements that simply have a particular attribute, regardless of value.

$("[disabled]")    → all disabled form elements
$("[href]")        → all elements with an href attribute
$("[title]")       → all elements with a title attribute
$("[data-id]")     → all elements with a data-id attribute

Exact Value Match

HTML:
<input type="text" />
<input type="password" />
<input type="checkbox" />
<input type="submit" />

jQuery:
$("[type='text']").css("border", "2px solid blue");
→ Only the text input gets a blue border

Starts With — ^ Operator

The ^= operator selects elements whose attribute value starts with a specific string. Think of it like finding all phone numbers that start with a country code.

$("[href^='https']").css("color", "green");
→ All links starting with https turn green (secure links)

$("[class^='btn']").css("font-weight", "bold");
→ Elements with class starting with "btn" (btn-primary, btn-danger, etc.)

Ends With — $ Operator

The $= operator selects elements whose attribute value ends with a specific string.

$("[href$='.pdf']").css("color", "red");
→ All links pointing to PDF files turn red

$("[src$='.png']")
→ All images with .png extension

Contains — * Operator

The *= operator selects elements whose attribute value contains a string anywhere inside it.

$("[href*='google']")
→ Matches https://google.com, http://mail.google.com, etc.

$("[class*='col']")
→ Matches col-sm-4, col-md-6, col-lg-12, etc. (Bootstrap grid classes)

Practical Example: Form Field Targeting

HTML:
<form>
  <input type="text" name="username" />
  <input type="text" name="email" />
  <input type="password" name="pass" />
  <input type="submit" value="Login" />
</form>

jQuery:
$(document).ready(function() {
    // Highlight all text inputs
    $("[type='text']").css("background", "#fffde7");

    // Disable the submit button
    $("[type='submit']").prop("disabled", true);

    // Add placeholder to username field
    $("[name='username']").attr("placeholder", "Enter username");
});

Multiple Attribute Selectors Combined

Chain multiple attribute conditions together without a space to require all conditions to match.

$("input[type='text'][required]")
→ All text inputs that also have the required attribute

$("a[href][target='_blank']")
→ All links that have an href AND open in a new tab

Diagram: Chained Attribute Conditions

  $("input[type='text'][required]")
       │
       ├── Must be an <input> tag
       ├── Must have type="text"
       └── Must have the "required" attribute present

  Only elements matching ALL three conditions are selected.

Not Equal Operator — !=

$("[type!='password']")
→ Selects all elements where type is NOT "password"
→ Includes elements with no type attribute at all

Common Use Cases

• Find all external links: $("[href^='http']")
• Find all image tags with alt text: $("img[alt]")
• Find all required form fields: $("[required]")
• Find all data attributes: $("[data-toggle]")
• Find PDF download links: $("[href$='.pdf']")

Quick Summary

• Attribute selectors use square brackets: $("[attr]").
• = matches exact value, ^= matches start, $= matches end, *= matches anywhere.
• You can combine multiple attribute conditions on one element.
• Attribute selectors work well for forms, links, and data attributes.