jquery select data attr

Статья, в которой рассмотрим, какие в jQuery существуют методы для работы с data-атрибутами и внутренним хранилищем Data.

Назначение HTML 5 data-атрибутов

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

Работа с data-атрибутами посредством методов attr и removeAttr

Выполнение действий над атрибутами data в jQuery обычно осуществляется с помощью методов: attr и removeAttr .

Например, выведем значение data-атрибутов элемента div с в консоль браузера:

Данный метод (attr) возвращает значение data-атрибута в виде строки.

Например, добавим атрибут data-year к вышеприведённому элементу:

Более детально разобраться, как работать с данными методами можно в статье jQuery — Работа с атрибутами HTML элементов.

jQuery — data-атрибуты и метод data

Метод data используется в jQuery не для общения с data-атрибутами. Его основное предназначение — это чтение данных из внутреннего хранилища jQuery ( $.cache ) или запись в него некоторой информации.

Внутреннее хранилище jQuery — это некий контейнер, в который можно помещать произвольную информацию, связанную с определённым DOM-элементом текущей страницы.

Но, тем не менее, данный метод может выполнять чтение HTML5 data-атрибутов, и помещать их во внутреннее хранилище. Это случается только в том случае, если в хранилище jQuery нет ключа с именем, равным имени data-атрибута. В противном случае вы получите значение из хранилища $.cache .

Таким образом работать с data-атрибутами посредством метода data имеет смысл только в том случае, если дальнейшая работа с ними будет вестись через хранилище jQuery.

Пример, в котором рассмотрим, как метод data работает с data-атрибутом:

В методе data ключ соответствует имени data-атрибута без приставки data- .

Кроме этого, если в окончании имени data-атрибута (после data- ) содержится дефисы («-«), то при обращении к нему с помощью метода data буквы стоящие перед дефисом должны быть заменены на заглавные, а сами дефисы убраны. Например, имя атрибута data-last-name должно быть указано в методе data как lastName .

Ещё один момент при работе с методом data заключается в том, что когда jQuery разбирает значение data-атрибута, то он пытается привести его значение (строку) к соответствующему типу JavaScript (булевскому значению, числу, объекту, массиву или null ). Например, значение «420» преобразуется в число 420. Если значение data-атрибута является объектом (начинается с » < ") или массивом (начинается с " [ "), то jQuery использует для разбора значения метод parseJSON . Это означает то, что содержимое атрибута должно иметь валидный JSON синтаксис (включая указания имен свойств в двойных кавычках). Но если попытка разобрать значение data-атрибута окажется не удачной, то оно останется в исходном в виде (т.е. в виде строки).

В итоге, метод data используется для выполнения следующих операций (в зависимости от указанных аргументов):

1. Получение значения ключа, связанного с элементом, из внутреннего хранилища jQuery:

Данный вариант метода data выполняет одно из следующих действий:

• Чтение data-атрибута (имя которого соответствует указанному ключу) у первого элемента текущего набора, помещение его в хранилище, и возвращение значение этого ключа в качестве результата. Данное действие данный метод выполняет только в том случае, если у элемента есть data-элемент соответствующий ключу и в контейнере $.cache у данного элемента нет записи с указанным ключом.
• Получает значение указанного ключа из хранилища jQuery. Это действие метод data выполняет только в том случае, если в $.cache у элемента есть указанный ключ.
• возвращает значение undefined или пустой объект, если ни одно из вышеперечисленных действий не выполняется.

Если в результате выборки $(‘селектор’) возвращается несколько элементов, то данный метод возвращает значение только для первого элемента из полученного набора.

2. Получение всех данных в виде объекта JavaScript из хранилища jQuery, связанных с указанным элементом:

Более детально этот вариант метода data осуществляет следующее:

1. Автоматически помещает data-атрибуты во внутреннее хранилище jQuery. Это действие он выполняет только для тех data-атрибутов, имён (ключей) которых нет на текущий момент в хранилище jQuery.
2. Возвращает объект, состоящий из пар ключ-значение, связанных с текущим элементом.

3. Метод data применяют не только для чтения значений, но и для записи данных (ключ-значение), ассоциированных с некоторым элементом DOM во внутреннее хранилище jQuery.

Пример работы с методом data :

Методы для работы с data-хранилищем jQuery

Рассмотрим, какие ещё есть методы в jQuery для работы с data хранилищем кроме data .

Метод removeData

Данный метод предназначен для удаления данных, связанных с определённым элементом, из внутреннего хранилища jQuery. Данный метод не работает с data-атрибутами, поэтому все соответствующие ключу data-атрибуты удалены не будут.

Синтаксис метода removeData :

Удалим несколько пар ключ-значений, ассоциированных с элементом с из хранилища jQuery:

Функция $.data()

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

Данная функция предназначена только для работы с jQuery хранилищем и в отличие от метода $(‘селектор’).data() не извлекает данные из HTML 5 data-атрибутов.

Синтаксис функции jQuery.data() :

Пример использования функции $.data() для сохранения информации, связанной с определённым DOM-элементом, в хранилище jQuery:

Функция $.hasData()

Эта функция определяет, имеет ли элемент, какие-либо данные во внутреннем хранилище jQuery.

Функция hasData возвращает true , если в хранилище есть какие-либо данные связанные с указанным элементом. В противном случае данная функция возвращает false .

Внутреннее хранилище $.cache используется также самой библиотекой jQuery. Один из примеров — это использование его для хранения кода обработчиков событий jQuery.

Пример использования функции hasData :

Разобраться, как работать в jQuery с data-атрибутами, которые появились в спецификации языка HTML5, можно в статье «jQuery – Методы attr и removeAttr». Эти методы ( attr и removeAttr ) используются не только для управления data-атрибутами, но и любых других атрибутов HTML элементов.

Привязка и чтение собственные переменные к/от любым элементов страницы.

version added: 1.2.3 .data( key, value )

key

Название параметра данных.

value

Новое значение; может быть любого типа, поддерживаемого Javascript, включая Массивы или Объекты.

version added: 1.4.3 .data( obj )

obj

Объект вида ключ:значение для обновления данных.

version added: 1.2.3 .data( key )

key

Имя параметра данных для считки значения.

version added: 1.4 .data()

Данный метод не принимает аргументов.

Возвращает объект со всеми переменными, прикрепленными к первому из выбранных элементов.

Метод .data() позволяет нам присоединить пачку данных к DOM элементам, а затем в нужный момент, считывать.

В качестве данных, можем использовать разные типы значений:

Метод .data() нельзя применить к элементу (если это Flash плагин), или элементу .

Пример

Сохранить значение в div, а затем извлечь его.

Мы можем одновременно извлекать несколько значений с одного и того же элемента:

Если вы питаетесь извлечь данные, которые предварительно не записали, то в качестве значения получите undefined.

Атрибут HTML5 data-*

Начиная с jQuery 1.4.3 HTML 5 серия атрибутов data-* будет автоматически использоваться при использовании объекта данных jQuery.

К примеру, дан следующий HTML код:

Весь следующий код будет рабочим.

Все данные будут преобразованы в типы данных JavaScript (включая булевы значения, цифры, объекты, массивы, и null).

Для получения данных в виде строки, воспользуйтесь методом attr().

При вызове метода .data() без параметров, данные будут помещены в объект JavaScript. Его можно закэшировать и пользоваться дальше, обращаясь к полям:

Доброго времени суток
Как известно к атрибутам data-* можно обращаться через функцию jQuery data(‘foo’) и получить значение этого пользовательского атрибута.

то есть если повесить обработчик onclick на класс demo и вызвать в функции $(this).data(‘id’) он вернет нам значение этого атрибута, т.е. щелкнули на пункт 3, вернется 3
Но! Как добраться непосредственно по значению id к элементу li, то есть знаем что нам нужен li с id 2 как к нему обратиться? Нашёл способ
$(‘[data- )
но чувствую, что есть другой способ или функция, которая специально для этого создана