jQuery contiene selectores de atributos con la ayuda de los cuales podemos seleccionar los elementos con atributo de nombre como una string en particular o seleccionar los elementos que contienen una string en particular o comienzan con una string en particular o terminan con una string en particular o no contienen una string en particular como un atributo de nombre.
En este artículo, aprenderemos a encontrar todas las divisiones con un atributo de nombre que contenga la palabra ‘geeks’ y establezca el color de fondo verde usando los selectores de atributos de jQuery.
Enfoque 1: para encontrar el atributo de nombre que contiene una string en particular, podemos usar un selector de atributos con ~ para seleccionar todos los elementos que contienen una palabra con atributo de nombre como geeks.
Sintaxis:
$("[attribute~='word']");
Código HTML:
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">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
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>
Producción:
Enfoque 2: usar * para seleccionar todos los divs que contienen la palabra «geeks», pero la diferencia entre ~ y * es que ~ selecciona palabras separadas por espacios. Para * no es necesario que haya espacios, puede seleccionar incluso una substring.
Sintaxis:
$("[attribute*='word']");
Código HTML:
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">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA