Данные. В мире jQuery все дело в битах информации, которые прикрепляются непосредственно к элементам (а не, скажем, к переменной, которая несет ответственность только за себя). Существует масса способов сохранить биты данных на «стороне клиента» (в браузере, а не на сервере). Есть переменные любого вида, куки, localStorage, indexDB и кто знает что еще. Данные используются, когда эти данные имеют прямое отношение к определенному элементу.
Как и многие методы jQuery, у него есть сеттер (два параметра):
$("#thing").data("name", "value");и геттер (один параметр):
$("#thing").data("name"); // "value"Вы можете использовать его с любым объектом jQuery. Если в этом объекте есть несколько элементов, все они получают это значение данных, когда вы используете его в качестве установщика. Если в этом объекте есть несколько элементов, когда вы используете его в качестве получателя, он будет использовать первый элемент.
Один из способов представления данных - это что-то вроде пространства имен. Многие элементы могут использовать одно и то же «имя» данных, но иметь разные значения.
В старой демонстрации CSS-Tricks, слайдере Google Maps, есть реальный пример использования. В этой демонстрации есть список мест и встроенная карта Google. При наведении курсора на места карта перемещается к центру этого места. Для этого API карты нужны координаты. Имеет смысл иметь эти данные в HTML для этих мест, но нам не нужно их видеть. Это идеальный вариант использования data-*атрибутов в HTML (новое в HTML5). Тогда элемент списка в этом списке местоположений может быть таким:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*это просто способ сказать data- anything . Вы можете просто придумать атрибуты данных. Все, что вы хотите. В этом случае мы составили один для широты, а другой - для долготы. Когда на этом элементе списка срабатывает событие наведения мыши, мы просто используем геттер jQuery, .data()чтобы извлечь информацию и использовать ее с API.
Итак, теперь мы рассмотрели данные двумя способами: данные, которые устанавливаются и получаются из самого JavaScript, и данные, которые начинаются в HTML и используются JavaScript. И то, и другое в порядке, и API такой же. Вы можете подумать об использовании .data()в качестве получателя информации в rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Вы можете использовать его и так, если хотите:
$("#thing").attr("data-geo-lat");.data()Добытчик это просто ярлык. И мне это нравится, потому что это помогает вам правильно настроиться.
Однако важно отметить, что использование .data()в качестве установщика фактически не изменяет data-*атрибут в HTML . Это хорошее значение по умолчанию, потому что отсутствие изменения DOM означает, что он работает быстрее. Если вам абсолютно необходимо изменить атрибут в HTML, используйте .attr()метод как установщик. Также обратите внимание, что при использовании .attr()вам необходимо включить префикс «data-», который вам не нужен .data().
$("#thing").attr("data-name", "Chris");Возможно, вам потребуется сделать это, чтобы вы могли быть уверены, что другие части приложения имеют доступ, или если вы делаете что-то вроде написания селекторов CSS вместо них (например (data-something="whatever") ( ))