Какая разница в использовании между $.data
и $.attr
при использованииdata-someAttribute
?
Я понимаю, что $.data
хранится в JQuery $.cache
, а не в DOM. Поэтому, если я хочу использовать $.cache
для хранения данных, я должен использовать $.data
. Если я хочу добавить атрибуты данных HTML5, я должен использовать $.attr("data-attribute", "myCoolValue")
.
attr()
может привести к утечке памяти (по крайней мере, в IE), в то время как использованиеdata()
безопасно. Он намекает на это в своем ответе, хотя он явно не выходит и не говорит этого. Более подробная информация о документах jQuery (см. «Дополнительные заметки»): api.jquery.com/attrdata-someAttribute
недействителен; согласно спецификации допускается только нижний регистр. Вы столкнетесь с множеством странных проблем, используя символы верхнего регистра.Ответы:
Если вы передаете данные в элемент DOM с сервера, вы должны установить данные для элемента:
Затем к данным можно получить доступ, используя
.data()
в jQuery:Однако, когда вы сохраняете данные на узле DOM в jQuery с использованием данных, переменные сохраняются в объекте узла . Это делается для размещения сложных объектов и ссылок, так как данные хранятся в элементе узла, поскольку атрибут будет содержать только строковые значения.
Продолжая мой пример сверху:Кроме того, соглашение об именах для атрибутов данных имеет скрытую «погрешность»:
HTML: JS:Ключ дефиса все еще будет работать:
HTML: JS:Однако у объекта, возвращаемого
.data()
не будет установлен дефис-ключ:Именно по этой причине я предлагаю избегать дефис-ключа в javascript.
Для HTML продолжайте использовать дефисную форму. Атрибуты HTML должны получить ASCII-строчных автоматически , поэтому
<div data-foobar></div>
,<DIV DATA-FOOBAR></DIV>
и<dIv DaTa-FoObAr></DiV>
которые предполагаются должны рассматриваться как идентичные, но для лучшей совместимости следует предпочесть нижнюю форму случая..data()
Метод будет также выполнять некоторые основные автоматического литья , если значение соответствует признанной схеме:Эта способность автоматического приведения очень удобна для создания экземпляров виджетов и плагинов:
Если вам абсолютно необходимо иметь исходное значение в виде строки, то вам нужно использовать
HTML: JS:.attr()
:Это был надуманный пример. Для хранения значений цвета я использовал числовую шестнадцатеричную нотацию (то есть 0xABC123), но стоит отметить, что hex был неправильно проанализирован в версиях jQuery до 1.7.2 и больше не анализируется в
Number
jQuery 1.8 rc 1.jQuery 1.8 RC 1 изменил поведение авто-кастинга . Раньше любой формат, который был допустимым представлением
HTML: JS:Number
, был приведен кNumber
. Теперь числовые значения автоматически приводятся, только если их представление остается прежним. Это лучше всего иллюстрируется на примере.Если вы планируете использовать альтернативные числовые синтаксисы для доступа к числовым значениям, обязательно приведите значение к
JS (продолжение):Number
первому, например, с унарным+
оператором.источник
.data()
будет не иметь дефис набора форм, так$('#bar').data('foo-bar-baz')
будет работать, но$('#bar').data()['foo-bar-baz']
не будет. Именно по этой причине я предлагаю людям избегать использования дефисной формы.Основное различие между ними заключается в том, где оно хранится и как к нему обращаются.
$.fn.attr
хранит информацию непосредственно об элементе в атрибутах, которые становятся общедоступными при проверке, а также доступны из собственного API элемента.$.fn.data
хранит информацию в смехотворно неясном месте. Он расположен в закрытой локальной переменной,data_user
которая называется экземпляром локальной функции Data. Эта переменная не доступна из-за пределов jQuery напрямую.Набор данных с
attr()
$(element).attr('data-name')
element.getAttribute('data-name')
,data-name
также доступны из$(element).data(name)
иelement.dataset['name']
иelement.dataset.name
Набор данных с
.data()
.data(name)
.attr()
других местисточник
.attr()
это можно сделать, если впоследствии вы захотите использовать данные в качестве селектора (.data()
не будут найдены; см. Codepen.io/anon/pen/EvawPV?editors=1011 )Вы можете использовать
data-*
атрибут для встраивания пользовательских данных. Этиdata-*
атрибуты дают нам возможность встраивать пользовательские атрибуты данных на всех HTML - элементах..data()
Метод jQuery позволяет вам получать / устанавливать данные любого типа на элементы DOM таким образом, чтобы это было безопасно от циклических ссылок и, следовательно, от утечек памяти..attr()
Метод jQuery получает / устанавливает значение атрибута только для первого элемента в соответствующем наборе.Пример:
источник