Attribute Equals [attr="value"] JQ Home  <<  Selectors  <<  Attribute Equals [attr="value"]

• <<    Attribute Ends With
• Attribute Not Equal     >>

Exact match selector.

Shorthand version $('[attr="value"]')

Description

The [attr="value"] selector, selects all elements that have the specified attribute name with a value exactly equal to the specified value.

Syntax

Parameters

Return

N/A.

Attribute Equals [attr="value"] Examples Selectors  <<  Top

Selects all elements that have the specified attribute name with a value exactly equal to the specified value.

The following example will select 'input' elements on the page that have a value attribute containing the values 'Turn Orange' or 'Turn Yellow' and change their background color to orange or yellow respectively (look at the two buttons below).

$(function(){
  $('#btn1').on('click', function() {
    $('input[value="Turn Orange"]').css('backgroundColor', 'orange');
  });
  $('#btn2').on('click', function() {
    $('input[value="Turn Yellow"]').css('backgroundColor', 'yellow');
  });
}); 

The following example will select 'input' elements that have a type attribute that equals 'text' and input' elements that have a 'type' attribute that equals 'image' and change their borders colors to orange and yellow respectively.

When we press the left button any input elements that have a type attribute that equals 'text' will have 3px orange border added.

When we press the right button any input elements that have a type attribute that equals 'image' will have 3px yellow border added.

$(function(){
  $('#btn3').on('click', function() {
    $('input[type="text"]').css('border', '3px solid orange');
  });
  $('#btn4').on('click', function() {
    $('input[type="image"]').css('border', '3px solid yellow');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    Attribute Ends With Selector
• Attribute Not Equal Selector     >>