$(“[atributo*=valor]”) se utiliza para seleccionar todos los elementos con el atributo especificado por el parámetro de atributo que contiene la palabra especificada por el parámetro de valor.
Sintaxis:
$("[attribute*='value']")
Parámetros: Este selector tiene dos parámetros.
- atributo: el atributo especifica los atributos que necesita encontrar.
- valor: el valor es la string que es el valor coincidente de cada elemento que tiene el atributo especificado.
Retorno: Devuelve una array de todos los elementos seleccionados.
Ejemplo 1:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text"
name="name"
placeholder="Name" />
<br/>
<!--This input element contains name
attribute which have name string in it-->
<input type="text"
name="fathers_name"
placeholder="Father's Name" />
<br/>
<!--This input element contains name
attribute which have name string in it-->
<input type="text"
name="address"
placeholder="Address" />
<br/>
<input type="email"
name="email"
placeholder="Your Email" />
<br/>
<input type="password"
name="password"
placeholder="Your Password" />
<br/>
<input type="button"
value="Register" />
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("input[name*='name']").css({
background: "green"
});
});
</script>
</html>
Producción:
Ejemplo-2:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">.
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
background-color: yellow;
margin: 20px;
}
</style>
</head>
<body>
<!--All these will be selected because
target attribute contains first as value-->
<div target="first"> First div </div>
<div target="first"> First div </div>
<div target="first"> First div </div>
<div target="second first">
Second Div
</div>
<!-- this will be selected as target
attribute contains first as value-->
<div target="second">
Second Div
</div>
<button id="CC">Change Color</button>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
// change color.
$("#CC").click(function() {
$("div[target*='first']").css({
background: "green"
});
});
</script>
</html>
Antes:
Después:
Publicación traducida automáticamente
Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA