Tutoriais

HTML5 – Use jQuery com data-*

Mostramos como usar o atributo HTML5 data-*, um dos recursos mais úteis da linguagem e que pode ser associado ao jQuery para lidar com marcação de dados associados. Baixe os arquivos e confira!

Com o HTML5, os websites ganharam mais vida. Entre os novos recursos, um dos mais úteis é o atributo data-*, que foi abordado no tutorial da edição 161 da Revista W. Desde os primeiros tempos do HTML foi possível adicionar atributos arbitrários. No entanto, isso invalidava a marcação e muitos navegadores falahavam na renderizaçãodo elemento. O HTML5 oferece um modo de tornar esses atributos customizados úteis e válidos.

Se qualquer atributo customizado for prefixado com data-*, ele será renderizado no DOM e estará acessível ao método JavaScript getAttribute. Também é possível usar a propriedade dataset do elemento DOM para obter todos os seus atributos data-* (embora o suporte continue pobre com o IE). De qualquer forma, vale a pena dominar esse elemento tão poderoso.

Faça o download dos arquivos e experimente!

Comente