Back to: jQuery Tutorials
jQuery Attribute Value Selector with Examples
In this article, I am going to discuss jQuery Attribute Value Selector with Examples. Please read our previous article, where we discussed jQuery Attribute Selector. At the end of this article, you will understand everything about the jQuery Attribute Value Selector.
jQuery Attribute Value Selectors
Following are the lists of jQuery Attribute Value Selectors.
Attribute Equals Selector:
Syntax: [name = “value”]
Example: $(‘[title=”sample1Title”]’)
Selects all the elements that have title attribute value equal to sample1Title.
Attribute Not Equal Selector:
Syntax: [name != “value”]
Example: $(‘[title !=”sample1Title”]’)
Selects all the elements that have title attribute value not equal to sample1Title.
Attribute Contains Selector:
Syntax: [name *= “value”]
Example: $(‘[title *=”Title”]’)
Selects all the elements that have title attribute value containing given substring ‘Title’.
Attribute Contains Word Selector:
Syntax: [name ~= “value”]
Example: $(‘[title ~=”mySample”]’)
Selects all the elements that have title attribute value containing the given word – mySample, delimited by space
Attribute Contains Prefix Selector:
Syntax: [name |= “value”]
Example: $(‘[title |=”mySample”]’)
Selects all the elements that have title attribute value mySample or starting with mySample followed by hyphen(-).
Attribute Starts with Selector:
Syntax: [name ^= “value”]
Example: $(‘[title ^=”div”]’)
Selects all the elements that have title attribute value starting with div
Attribute Ends with Selector:
Syntax: [name $= “value”]
Example: $(‘[title $=”Heading”]’)
Selects all the elements that have title attribute value ending with Heading.
Let us jump to the practical session to understand these selectors.
Example: Attribute Equals Selector: [name = “value”]
In the below example, we are selecting all the elements that have title attribute value equal to sample1Title and applying the border by clicking the button
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Equals Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section class="test">
<p title="sample1Title">This is a paragraph</p>
<span title="sample1Title">This is a Span </span>
<div title="sample">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$('[title="sample1Title"]').css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example: Attribute Not Equal Selector: [name != “value”]
In the below example, we are selecting all the elements inside the section that have title attribute value not equal to sample1Title and applying the border by clicking the button. Notice that only the div element is matching the criteria.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Not Equal Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section>
<p title="sample1Title">This is a paragraph</p>
<span title="sample1Title">This is a Span </span>
<div title="sample">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$( 'section [title !="sample1Title"]').css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example: Attribute Contains Selector: [name *= “value”]
In the below example, we are selecting all the elements that have title attribute value containing the given substring ‘Title’ and applying those to the border. Notice that, Paragraph and span tag is matching the criteria.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Contains Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section>
<p title="sample1Title">This is a paragraph</p>
<span title="sample1Title">This is a Span </span>
<div title="sample">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$( '[title *= "Title"]' ).css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example: Attribute Contains Word Selector: [name ~= “value”]
In the below example, we are selecting all the elements that have title attribute value containing the given word – mySample, delimited by space. Notice that the p element has also an attribute value containing the word mySample but that is not delimited by space. So that is not selected here.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Contains Word Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section>
<p title="mySampleTitle">This is a paragraph</p>
<span title="Title mySample">This is a Span </span>
<div title="mySample Title">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$( '[title ~= "mySample"]' ).css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example: Attribute Contains Prefix Selector: [name |= “value”]
In the below example, we are selecting all the elements that have title attribute value mySample or starting with mySample followed by hyphen(-). Notice that, div is also having mySample but that isn’t followed by hyphen(-). So that is not selected here.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Contains Prefix Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section>
<p title="mySample-Title">This is a paragraph</p>
<span title="mySample">This is a Span </span>
<div title="mySample Title">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$( '[title |= "mySample"]' ).css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example: Attribute Starts with Selector: [name ^= “value”]
In the below example, we are selecting all the elements that have title attribute value starting with div and applying the border. Notice that div has also ‘div’ in the title attribute value but it is not started with that.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Starts with Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section>
<p title="divmySample-Title">This is a paragraph</p>
<span title="divmySample">This is a Span </span>
<div title="mySamplediv Title">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$( '[title ^= "div"]' ).css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example: Attribute Ends with Selector: [name $= “value”]
In the below example, we are selecting all the elements that have title attribute value ending with Heading.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Ends with Selector</title>
</head>
<body>
<h3>jQuery Atrribute Value Selector</h3>
<section>
<p title="mySampleHeading">This is a paragraph</p>
<span title="mySample">This is a Span </span>
<div title="mySamplediv Heading">This is a DIV</div>
</section>
<button id="demo">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#demo').click(function () {
$( '[title $= "Heading"]' ).css('border','2px solid red');
});
});
</script>
</body>
</html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Note that all these selectors are case sensitive, in the next article we will discuss how to make these selectors case-insensitive. Here, in this article, I try to explain jQuery Attribute Value Selector with Examples and I hope you enjoy this jQuery Attribute Value Selector article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.