$(“[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