Attribute Equals [attr="value"]S2C Home « Selectors « Attribute Equals [attr="value"]
Exact match selector.
Shorthand version $('[attr="value"]')
Description
The [attr="value"] selector, selects all elements with the specified attribute name and a value equal to the specified string or prefixed with that string followed by a hyphen (-).
Syntax
| Signature | Description |
|---|---|
jQuery('[attr="value"]') | Exact match |
Parameters
| Parameter | Description |
|---|---|
attr | The attribute name. |
value | The attribute value which can be either an unquoted single word or a quoted string. |
Return
N/A.
Attribute Equals [attr="value"] ExamplesTop
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');
});
});