jQuery Attribute Selectors

Attribute selectors enable you to target elements that contain specific attribute values, making your selection more precise and flexible.

Basic Syntax for Attribute Selectors:

$("[attribute='value']").action();

• attribute: The name of the attribute you want to target (e.g., href, src, class).
• value: The value of the attribute you want to match.

Common jQuery Attribute Selectors:

1. Select Elements with a Specific Attribute ([attribute]):

Selects elements that have a specific attribute, regardless of its value.

$("[href]").action();

Example:

$("[href]").css("color", "red");  // Selects all elements with an 'href' attribute and changes the color to red

2. Select Elements with a Specific Attribute and Value ([attribute='value']):

Selects elements that have an attribute with a specific value.

$("[type='text']").action();

Example:

$("[type='text']").css("background-color", "yellow");  // Selects all input elements with type='text' and changes the background color to yellow

3. Select Elements with an Attribute that Contains a Specific Value ([attribute*='value']):

Selects elements whose attribute value contains a specific substring.

$("[class*='btn']").action();

Example:

$("[class*='btn']").css("border", "2px solid blue");  // Selects all elements with a class that contains 'btn' and adds a blue border

4. Select Elements with an Attribute that Starts with a Specific Value ([attribute^='value']):

Selects elements whose attribute value starts with a specific substring.

$("[href^='https']").action();

Example:

$("[href^='https']").css("color", "green");  // Selects all elements with an href attribute starting with 'https' and changes the color to green

5. Select Elements with an Attribute that Ends with a Specific Value ([attribute$='value']):

Selects elements whose attribute value ends with a specific substring.

$("[src$='.jpg']").action();

Example:

$("[src$='.jpg']").css("border", "1px solid red");  // Selects all elements with a src attribute ending with '.jpg' and adds a red border

6. Select Elements with an Attribute Value Containing a Specific Word ([attribute~='value']):

Selects elements whose attribute value contains a specific word (space-separated values).

$("[class~='active']").action();

Example:

$("[class~='active']").css("font-weight", "bold");  // Selects all elements whose class contains the word 'active' and makes the text bold

7. Select Elements with an Attribute that Does Not Have a Specific Value ([attribute!='value']):

Selects elements whose attribute value is not equal to a specific value.

$("[type!='password']").action();

Example:

$("[type!='password']").css("background-color", "lightblue");  // Selects all elements whose type is not 'password' and changes the background color

8. Select Elements with an Attribute that Contains a Specific Value at a Given Position ([attribute|='value']):

Selects elements whose attribute value begins with the specified value, followed by a hyphen (useful for selecting language attributes).

$("[lang|='en']").action();

Example:

$("[lang|='en']").css("font-family", "Arial");  // Selects all elements with a language attribute starting with 'en' (e.g., 'en-US') and changes the font to Arial

Combining Attribute Selectors with Other Selectors:

You can combine attribute selectors with other jQuery selectors to refine your selection.

$("a[href^='https']:not([href$='.pdf'])").action();

Example:

$("a[href^='https']:not([href$='.pdf'])").css("color", "blue");  // Selects all 'a' tags with href starting with 'https' but not ending with '.pdf' and changes the color to blue

Use Cases for Attribute Selectors:

• Targeting Form Elements: Select form input fields by type, such as text fields, checkboxes, or radio buttons.
• Link Styling: Apply different styles to links with specific attributes, such as href values that start with “https”.
• Image Handling: Select image elements based on their src attribute to apply styles or manipulate them.