En este artículo, seleccionaremos todos los div HTML con el valor del atributo de nombre que termina en ‘geeks’ y usaremos la propiedad de fondo CSS para establecer el color de fondo en verde .
Sintaxis: La siguiente sintaxis se puede utilizar para obtener lo anterior.
$( "div[name$='geeks']" ).css( "background", "green" );
Acercarse :
- Cree algunas etiquetas con algunos valores de atributos de nombres que terminen en ‘geeks’.
- Cree algunas etiquetas div normales para diferenciar.
- Cree un botón que llamará al método jQuery.
- Cree el método jQuery para seleccionar todos los div con un valor de atributo de nombre que termine en ‘geeks’ y establezca el color de fondo en verde.
Ejemplo 1: este ejemplo tiene tres etiquetas div . Dos de ellos tienen atributos de nombre con valores que terminan en ‘geeks’ y el tercero es un div normal . Cuando hacemos clic en el botón, el color de fondo de los dos primeros div se establecerá en verde.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width">
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
}
</style>
<script>
$(document).ready(function () {
$('#button').click(function () {
$("div[name$='geeks']")
.css("background", "green");
});
});
</script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div name="Iamgeeks">
<p>This is Division 1</p>
</div>
<div name="geeksforgeeks">
<p>This is Division 2</p>
</div>
<div name="simplediv">
<p>This is Division 3</p>
</div>
<button id="button">
Click to see the effect
</button>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo tiene cuatro etiquetas div . Los atributos de nombre de div primero, segundo y cuarto terminan con «geeks», pero el tercer atributo de nombre de div no termina con la palabra clave «geeks». Eso significa que el fondo del tercer div no cambiará.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width">
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
}
</style>
<script>
$(document).ready(function () {
$('#button1').click(function () {
$("div[name$='geeks']")
.css("background", "green");
});
});
</script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div name="Iamgeeks">
Name attribute value is Iamgeeks
</div>
<div name="geeksforgeeks">
Name attribute value is geeksforgeeks
</div>
<div name="geekssimplediv">
Name attribute value is geeksSimpleDiv
(not ends with geeks)
</div>
<div name="geeks">
Name attribute value is geeks
</div>
<button id="button1">
Click to see the effect
</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KapilChhipa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA