valor - jquery obtiene HTML 5 Atributos de datos con guiones y sensibilidad de mayúsculas y minúsculas

seleccionar elementos jquery

Question

Cómo obtener atributos de datos usando jquery .data() ? ¿En qué caso los atributos html5 data-* convierten a minúsculas y camelcase? ¿Cuáles son las principales reglas a seguir al usar atributos personalizados para almacenar datos?

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

Answer 1

HTML5 nos permite crear nuestros propios atributos personalizados para almacenar datos. Los atributos personalizados se pueden llamar de cualquier manera que nos guste, como los nombres de variables, pero deben ir precedidos de la palabra "datos", y las palabras están separadas por guiones. Puede agregar los atributos de datos "foo", "bar" y "foo bar" a una entrada como esta:

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

El método .data() jQuery le dará acceso a los atributos data-* .

Usando jQuery hasta e incluyendo la versión 1.4, los atributos de los datos fueron insensibles a las mayúsculas y minúsculas, por lo tanto:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

sería accesible con

$(''.myButton'').data(''productId'');

jQuery 1.5 y 1.6

Sin embargo, los cambios en jQuery 1.5 y 1.6 significan que los atributos de los datos ahora están obligados a minúsculas, entonces:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

solo es accesible con

$(''.myButton'').data(''productid'');

Los atributos data-* convierten en propiedades del objeto del conjunto de datos del elemento. Los nuevos nombres de propiedades se derivan de la siguiente manera:

• El nombre del atributo se convierte a todas las letras minúsculas.
• El prefijo de data- se elimina del nombre del atributo.
• Los caracteres de guión también se eliminan del nombre del atributo.
• Los caracteres restantes se convierten en CamelCase. Los caracteres que siguen inmediatamente a los guiones eliminados en el Paso 3 se convierten en mayúsculas.

Observe que el nombre del atributo original data-product-id se ha convertido a productId en el objeto del conjunto de datos. El proceso de conversión de nombre debe tenerse en cuenta al nombrar atributos data-* . Como los nombres de los atributos se convierten a minúsculas, es mejor evitar el uso de letras mayúsculas. El siguiente ejemplo muestra cómo varios nombres de atributos se traducen en propiedades de conjuntos de datos.

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

NOTA:

• Los atributos de datos personalizados generalmente se usan para almacenar metadatos que ayudan / simplifican el código JavaScript.
• Un elemento puede tener cualquier cantidad de atributos de datos personalizados.
• Los atributos de datos personalizados solo se deben usar si no existe un elemento o atributo más apropiado. Por ejemplo, no debe crear un atributo personalizado de "descripción de texto" en una imagen. El atributo alt existente es una mejor opción.
• La especificación HTML5 indica claramente que los atributos data-* no deben ser utilizados por aplicaciones de terceros. Esto significa que los programas, como los motores de búsqueda, no deben depender de atributos de datos personalizados al preparar los resultados de búsqueda.

La implementación de atributos personalizados en HTML5 no es técnicamente compleja en sí misma, sin embargo, la dificultad real es elegir si es apropiado usarlos en sus propios proyectos, y si es así, cómo hacerlo de manera eficiente. Finalmente, recuerde que todavía es un poco pronto para comenzar a usar el enfoque del conjunto de datos para las funciones en las que confían sus páginas, así que asegúrese de proporcionar una alternativa para navegadores no compatibles.

DEMO