Select By Attribute & Value $("[attribute=value]")

This jQuery selector selects elements that have the given attribute assigned with given value. For example to select element <input type='text'> use $('[type=text]')

$("[attribute=value]")

$("[attribute=value]") selects all elements that have attribute=value.

  • attribute is an element attribute e.g. type is an attribute in <input type='text'>
  • value is the attribute value e.g. 'text' is the value in <input type='text'>
For example, $("[type=text]") will find all elements that have attribute type='text'
<input type='text' />
<input type='button' />
<div type='text' />

Selecting by attribute & value has many formats

  • $("[a ='v']")Selects elements that have attribute a with value equal 'v'
  • $("[a^='v']")Selects elements that have attribute a with value starting with 'v'
  • $("[a$='v']")Selects elements that have attribute a with value ending with 'v'
  • $("[a*='v']")Selects elements that have attribute a with value containing 'v'
  • $("[a!='v']")Selects elements that do NOT have attribute a or attribute a exists with value that does not equal 'v'
  • $("[a~='v']")Selects elements that have attribute a with value containing 'v' delimited by spaces.
  • $("[a|='v']")Selects elements that have attribute a with value equal 'v' or value starting with 'v' followed by a hyphen (-).

Code: Find all elements with attribute='value'

HTML
<div name="banana">banana</div>
<div name="orange1">orangle1</div>
<div name="orange 2">orangle 2</div>
<div name="apple">apple</div>
<div name="apple-2">apple-2</div>
jQuery code
$("[name='banana']"); // selects elements where name equals 'banana'
$("[name^='or']"); // selects elements where name starts with 'or'
$("[name$='e']"); // selects elements where name ends with 'e'
$("[name*='n']"); // select elements where name contains 'n'
$("[name!='banana']"); // selects elements where name does not equal 'banana'
$("[name~='orange']"); // selects elements where name contains 'orange' delimited by spaces
$("[name|='apple']"); // selects elements where name equals 'apple' or starts with 'apple' followed by '-'
Demo

banana
orangle1
orangle 2
apple
apple-2
jQuery selector $("[attribute=value]")