Jquery get HTML 5 Атрибуты данных с дефисами и чувствительностью к регистру

Как получить атрибуты данных с помощью jquery .data()? В этом случае атрибуты html5 data-* преобразуются в нижний регистр и на верблюд? Каковы все основные правила, которые следует соблюдать при использовании пользовательских атрибутов для хранения данных?

<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"/>

Ответ 1

HTML5 позволяет нам создавать собственные пользовательские атрибуты для хранения данных. Пользовательские атрибуты можно назвать любыми, что нам нравится, например имена переменных, но они должны быть добавлены со словом "данные", а слова разделены тире. Вы можете добавить атрибуты атрибутов "foo", "bar" и "foo bar" к следующему:

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

jQuery .data() даст вам доступ к атрибутам data-*.

Используя jQuery вплоть до версии 1.4, атрибуты данных нечувствительны к регистру, поэтому:

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

будет доступно с помощью

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

jQuery 1.5 и 1.6

Однако изменения в jQuery 1.5 и 1.6 означают, что атрибуты данных теперь вынуждены иметь строчные значения, поэтому:

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

доступен только с помощью

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

Любые атрибуты data-* становятся свойствами объекта dataset элементов. Новые имена свойств производятся следующим образом:

Имя атрибута преобразуется во все строчные буквы.
Префикс data- удаляется из имени атрибута.
Любые символы дефиса также удаляются из имени атрибута.
Остальные символы преобразуются в CamelCase. Символы, следующие за дефисами, удаленными на шаге 3, становятся прописными.

Обратите внимание, что исходное имя атрибута data-product-id было преобразовано в productId в объекте набора данных. Процесс преобразования имен должен учитываться при присвоении имен атрибутам data-*. Поскольку имена атрибутов преобразуются в нижний регистр, лучше избегать использования заглавных букв. В следующем примере показано, как несколько имен атрибутов преобразуются в свойства набора данных.

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

Примечание:

Пользовательские атрибуты данных обычно используются для хранения метаданных, которые помогают/упрощают код JavaScript.
Элемент может иметь любое количество настраиваемых атрибутов данных.
Пользовательские атрибуты данных должны использоваться только в том случае, если более подходящий элемент или атрибут не существует. Например, вам не следует создавать настраиваемый атрибут "текстовое описание" на изображении. Существующий атрибут alt - лучший выбор.
В спецификации HTML5 четко указано, что атрибуты data-* не должны использоваться сторонними приложениями. Это означает, что такие программы, как поисковые системы, не должны полагаться на атрибуты пользовательских данных при подготовке результатов поиска.

Реализация пользовательских атрибутов в HTML5 не является технически сложным сама по себе, однако реальная трудность заключается в выборе того, целесообразно ли использовать их в ваших собственных проектах, и если да, то как это сделать эффективно. Наконец, помните, что еще немного рано начать использовать подход набора данных для функций, на которые полагаются ваши страницы, поэтому не забудьте предоставить альтернативу для не поддерживающих браузеров.

DEMO