<!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
>