El selector [atributo^=valor] se usa para seleccionar todos los elementos con un atributo dado especificado por parámetro de atributo que comienza con la palabra especificada por parámetro de valor.
Sintaxis:
$("[attribute^='value']")
Parámetros: este selector contiene dos parámetros que se enumeran a continuación:
- atributo: Se utiliza para especificar los atributos que deben seleccionarse (cualquier elemento html).
- valor: Contiene la string desde la cual debe comenzar el valor de cada elemento seleccionado.
Valor devuelto: Devuelve una array de todos los elementos seleccionados.
Ejemplo 1: este ejemplo usa el selector [atributo^=valor] para seleccionar aquellos elementos cuyo nombre de clase comienza con arriba.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery [attribute^=value] Selector
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h3 class="top-heading">
Welcome to GeeksforGeeks
</h3>
<p class="top-content">
A Computer Science portal for geeks.<br/> It
contains well written, well thought and well
explained<br/> computer science and
programming articles
</p>
<p class="topcoder">
Competitive programming is not tough.
</p>
<p class="be-on-top">
Every one should learn Programming.
</p>
<!-- Script to use attribute^=value selector -->
<script>
$(document).ready(function() {
var select = $("[class^='top']")
select.css({
background:"green"
})
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa el selector [atributo^=valor] para seleccionar aquellos elementos cuyo nombre de clase comienza con arriba.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery [attribute^=value] Selector
</title>
<style>
div{
width: 50px;
height:50px;
background-color: yellow;
margin: 20px;
}
</style>
</head>
<body>
<!-- All div selected whose class
starts with top -->
<div class="top">
One
</div>
<div class="top-only">
Two
</div>
<div class="top second-class">
Three
</div>
<div class="first top">
Four
</div>
<div class="first top third">
Five
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use [attribute^=value] selector -->
<script>
$(document).ready(function() {
var select = $("[class^='top']");
select.css({
background: "green"
});
});
</script>
</body>
</html>
Producción:
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