jQuery contains attribute selectors with the help of which we can select the elements with name attribute as a particular string or select the elements which contain a particular string or begin with a particular string or ends with a particular string or don’t contain a particular string as a name attribute.
In this article, we will learn to find all the divisions with a name attribute that contains the word ‘geeks’ and sets the background color green using jQuery attribute selectors.
Approach 1: To find the name attribute that contains a particular string, we can use an attribute selector with ~ to select all the elements that contain a word with a name attribute as geeks.
Syntax:
$("[attribute~='word']");
Example: In this example, we will use the above approach.
HTML Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
text-align: center;
}
.bg-green {
background-color: #006600;
color: white;
margin: 2px;
border: 2px solid black;
}
#btn {
color: #006600;
text-align: center;
margin: 10px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<button id="btn">
How to find all the divisions with a name
attribute that contains the word 'geeks'
and sets the background color?
</button>
<div name="geeks for geeks">
jQuery is one of the powerful libraries
of javascript which has many powerful
methods that make the manipulation of
DOM much simpler using the selectors and
makes the interaction with DOM much easier.
</div>
<div name="gfg">
jQuery is one of the powerful libraries of
javascript which has many powerful methods
that make the manipulation of DOM much simpler
using the selectors and makes the interaction
with DOM much easier.
</div>
<div name="geeks">
jQuery is one of the powerful libraries of
javascript which has many powerful methods
that make the manipulation of DOM much simpler
using the selectors and makes the interaction
with DOM much easier.
</div>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$("div[name~='geeks']").addClass('bg-green');
});
});
</script>
</body>
</html>
|
Output:
Approach 2: Use * for selecting all divs that contain the word “geeks” but the difference between the ~ and * is that ~ selects words separated by spaces. For * there need not be any spaces, it can select even a substring.
Syntax:
$("[attribute*='word']");
Example: In this example, we will use the above approach
HTML Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
text-align: center;
}
.bg-green {
background-color: #006600;
color: white;
margin: 2px;
border: 2px solid black;
}
#btn {
color: #006600;
text-align: center;
margin: 10px;
}
body {
text-align : center;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<button id= "btn">
How to find all the divisions with a name
attribute that contains the word 'geeks'
and sets the background color?
</button>
<div name = "geeks for geeks">
jQuery is one of the powerful libraries of
javascript which has many powerful methods
that make the manipulation of DOM much simpler
using the selectors and makes the interaction
with DOM much easier.
</div>
<div name = "gfg">
jQuery is one of the powerful libraries of
javascript which has many powerful methods
that make the manipulation of DOM much simpler
using the selectors and makes the interaction
with DOM much easier.
</div>
<div name = "geeks">
jQuery is one of the powerful libraries of
javascript which has many powerful methods
that make the manipulation of DOM much simpler
using the selectors and makes the interaction
with DOM much easier.
</div>
<script>
$(document).ready(function () {
$('#btn').click(function(){
$("div[name*='geeks']").addClass('bg-green');
});
});
</script>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 May, 2023
Like Article
Save Article