jquery - usar - ¿Cuál es la diferencia entre[atributo ~=valor] y[atributo*= valor]?
usar atributo alt en html (5)
¿Cuál es la diferencia entre estos dos selectores jQuery?
Aquí están las definiciones de w3schools.com:
El selector
[attribute~=value]selecciona cada elemento con un atributo específico, con un valor que contiene una cadena específica.El selector
[attribute*=value]selecciona cada elemento con un atributo específico, con un valor que contiene una cadena.
ACTUALIZAR:
Aquí están las definiciones de jquery.com. Esto responde mi pregunta:
[attribute~=value]- Selecciona elementos que tienen el atributo especificado con un valor que contiene una palabra dada, delimitada por espacios.[attribute*=value]- Selecciona elementos que tienen el atributo especificado con un valor que contiene una subcadena dada.
[attribute*=value] , a[href*="test"]Selecciona cada elemento cuyo valor de atributo href contiene la subcadena "prueba"
[atributo ~ = valor], [título ~ = flor]
Selecciona todos los elementos con un atributo de título que contiene la palabra "flor"
Esos no son selectores jQuery, son selectores de atributos CSS.
~=- Representa un elemento con el atributo att cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente "val". Si "val" contiene espacios en blanco, nunca representará nada (ya que las palabras están separadas por espacios). Además, si "val" es la cadena vacía, nunca representará nada.
*=- Representa un elemento con el atributo att cuyo valor contiene al menos una instancia de la subcadena "val". Si "val" es la cadena vacía, entonces el selector no representa nada.
La diferencia es que, dado el siguiente HTML:
<span class="abcd efg">First</span>
<span class="abcdefg">Second</span>
[class*=abcd] coincidirá con ambos elementos (ya que busca en el atributo listado cualquier aparición de la cadena dada), mientras que [class~=abcd] solo coincidirá con el primero (porque busca una aparición separada de espacios en blanco de la cadena dada).
[class*=abcd] {
color: #f00;
}
[class~=abcd] {
border-bottom: 2px solid #0f0;
}
<span class="abcd efg">First</span>
<span class="abcdefg">Second</span>
Referencias
La diferencia es que el operador "contiene" ( *= value ) busca estos caracteres en cualquier parte del atributo, mientras que "contiene palabra" ( ~= value ) solo busca palabras enteras.
Le recomendaría que evite mirar las definiciones de w3schools, y use la API oficial de la biblioteca (como esta para el selector de contenidos y esto para contener el selector de palabras ). Para otros asuntos, recomendaría el sitio de MDN o la especificación W3C directamente.
*= es atributoContains selector , de jquery docs :
Selecciona los elementos que tienen el atributo especificado con un valor que contiene una subcadena dada.
~= es el selector attributeContainsWord , de jquery docs :
Selecciona elementos que tienen el atributo especificado con un valor que contiene una palabra dada, delimitada por espacios.
Ver atributoContains selector con Ejemplo de uso aquí y attributeContainsWord selector con ejemplos y uso aquí
El selector attributeContains es para que la cadena esté contenida en el valor del atributo, mientras que el selector attributeContainsWord es para la cadena separada con el espacio delimeted. Los ejemplos oficiales de jquery lo explican claramente.
EXPLICACIÓN:
El atributo contiene el selector [name * = "value"]
HTML:
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
JQUERY:
$( "input[name*=''man'']" ).val( "has man in it!" );
SALIDA:
EJEMPLO DEMO
Ejemplo de atributo contiene selector [nombre * = "valor"]
El atributo contiene el Selector de palabras [name ~ = "value"]
HTML:
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
JQUERY:
$( "input[name~=''man'']" ).val( "mr. man is in it!" );
SALIDA:
EJEMPLO DEMO
Ejemplo de atributo contiene Word Selector [name ~ = "value"]
$("[class*=''b'']").css("color", "green");
$("[class~=''b'']").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class="a b c">1st</p>
<p class="abc">2nd</p>
<p class="a b c">3rd</p>
<p class="abc">4th</p>
<p class="adc">5th</p>
*= significa que el atributo contiene el valor x (como una subcadena).
~= significa que el atributo contiene una lista de palabras separadas por espacios yx es una de ellas.
lea más aquí .