Back to: jQuery Tutorials
jQuery Attribute Selector with Examples
In this article, I am going to discuss jQuery Attribute Selector with Examples. Please read our previous article, where we discussed jQuery Class Selector. The jQuery Attribute Selector allows us to select an element from the HTML page based on the attribute name. At the end of this article, you will understand everything about the jQuery Attribute selector.
jQuery Attribute Selector
If we want to select any HTML element by its attribute name, then we have to use the jQuery Attribute selector. To the jQuery function if we pass the attribute name as its selector then it is called as jQuery Attribute selector.
Syntax: $(‘[attribute]’)
For example, suppose that we have an input element in our HTML
<input name=’fname’>
To select this input element, we have to use the attribute selector as follows
$(‘input[name]’)
The usage of selecting the element by their Attributes name is exactly as same as we have used in CSS. For example
- $(‘[name]’): This will select all the elements with the attribute name
- $(‘input[name]’): This will select all the input elements which have the attribute name
- $(‘[name=”a1″]’): This will select all the elements having attribute name with value a1
- $(‘input[name=”a1″]’): This will select all the input elements having attribute name with value a1
Points to Remember while working with jQuery Attribute Selector:
The CSS specification allows elements to be identified by their attributes. While not supported by some older browsers for the purpose of styling documents, jQuery allows you to employ them regardless of the browser being used.
When using any of the following attribute selectors, you should account for attributes that have multiple, space-separated values. Since these selectors see attribute values as a single string, this selector, for example, $(“a[rel=’nofollow’]”), will select <a href=”example.html” rel=”nofollow”>Some text</a> but not <a href=”example.html” rel=”nofollow foe”>Some text</a>.
Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.
- double quotes inside single quotes: $(‘a[rel=”nofollow self”]’)
- single quotes inside double quotes: $(“a[rel=’nofollow self’]”)
- escaped single quotes inside single quotes: $(‘a[rel=\’nofollow self\’]’)
- escaped double quotes inside double quotes: $(“a[rel=\”nofollow self\”]”)
Reference: https://api.jquery.com/category/selectors/attribute-selectors/
Example:
In the below example, we are targeting those elements which have the name attribute by $(‘[name]’) and applying the border around them.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Atrribute Selector</h3>
<div>
<form action="">
<input type="text" name="fname" placeholder="Enter Your first name"> <br/><br/>
<input type="text" name="lname" placeholder="Enter Your last name"> <br/><br/>
<input type="password" placeholder="Enter the password"> <br/><br/>
</form>
</div>
<button id="demo">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('[name]').css('border','2px solid black');
});
</script>
</body>
</html>
Now, run the above HTML code and you will see that the border is applied to the First and Last Name text boxes as shown in the below image.
Example:
In the below example, we are using the same HTML and we are targeting those input elements which have the attribute type by $(‘input[type]’)
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Atrribute Selector</h3>
<div>
<form action="">
<input type="text" name="fname" placeholder="Enter Your first name"> <br/><br/>
<input type="text" name="lname" placeholder="Enter Your last name"> <br/><br/>
<input type="password" placeholder="Enter the password"> <br/><br/>
</form>
</div>
<button id="demo">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[type]').css('border','2px solid black');
});
</script>
</body>
</html>
Now, run the above HTML code and you will see that the border is applied to all the text boxes as shown in the below image.
Example:
In the below example, we are targeting those input elements have the attribute required
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Atrribute Selector</h3>
<div class="test">
<form action="">
<input type="text" name="fname" placeholder="Enter Your first name" required> </br></br>
<input type="text" name="lname" placeholder="Enter Your last name" ></br></br>
<input type="password" name="password" placeholder="Enter the password" required> </br></br>
</form>
</div>
<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 () {
$('[required]').css('border','2px solid red');
});
</script>
</body>
</html>
Now, run the above HTML code and you should get the following output.
Example
In the below example, only the div element which has the title attribute is selected. span element has also the title attribute but that is not selected
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Attribute Selector</h3>
<section>
<div title="div">This is DIV element with title</div>
<span title="span">This is span element with title</span>
<p>This is p Element</p>
</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 () {
$('div[title]').css('backgroundColor', 'skyblue');
});
</script>
</body>
</html>
Now, run the above HTML code and you will get the following output.
Example:
In the below example, we are targeting that element(s) having the name attribute with value fname by $( ‘[name=”fname”]’ ). Notice that other elements with name attribute which don’t have the value fname those are not targeted.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Atrribute Selector</h3>
<div class="test">
<form action="">
<input type="text" name="fname" placeholder="Enter Your first name"> </br></br>
<input type="text" name="lname" placeholder="Enter Your last name"></br></br>
<input type="password" name="password" placeholder="Enter the password"></br></br>
</form>
</div>
<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 () {
$('[name="fname"]').css('border','2px solid red');
});
});
</script>
</body>
</html>
Now, run the above HTML code and click on the Click Me button, you will get the following output.
Example:
In the below example, we are targeting those input elements which have the type attribute with value text by $(‘input[type=”text”]’). Notice that, that element with the type attribute with value password is not targeted here.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Attribute Selector</h3>
<div class="test">
<form action="">
<input type="text" name="fname" placeholder="Enter Your first name"> </br></br>
<input type="text" name="lname" placeholder="Enter Your last name"></br></br>
<input type="password" name="password" placeholder="Enter the password"> </br></br>
</form>
</div>
<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 () {
$('input[type="text"]').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:
In the below example, we are targeting those input elements whose type attribute value is text and who are children of div element whose title attribute value is main.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Atrribute Selector</title>
</head>
<body>
<h3>jQuery Atrribute Selector</h3>
<div class="test">
<form action="">
<div title="main">
<input type="text" name="fname" placeholder="Enter Your first name"> </br></br>
<input type="text" name="lname" placeholder="Enter Your last name"></br></br>
</div>
<input type="password" name="password" placeholder="Enter the password"></br></br>
</form>
</div>
<button class="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 () {
$('div[title="main"] input[type="text"]').css('border', '2px solid red');
});
});
</script>
</body>
</html>
Now, run the above HTML Code and then click on the Click Me button and you should get the following output.
In the next article, I am going to discuss jQuery Attribute Value Selector with Examples. Here, in this article, I try to explain jQuery Attribute Selector with Examples and I hope you enjoy this Query Attribute Selector with Examples 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.