Как получить данные атрибутов пользовательских элементов в jQuery?

Помимо атрибутов, мы также можем использовать пользовательские атрибуты элемента. В этой статье мы узнаем, как получить значение пользовательского атрибута в элементе HTML с помощью jQuery.

Что такое атрибут? Атрибут HTML предоставляет информацию об элементе. Он определяет поведение элемента.

Примеры атрибутов:

• name: указывает имя элемента
• стиль: используется для украшения элемента

Атрибут пользовательского элемента. Атрибуты пользовательского элемента можно использовать для встраивания пользовательских данных об элементе в формате (ключ, значение). Их можно использовать для хранения данных в частном порядке на определенной странице.

Использование data(): метод data() в jQuery можно использовать для получения данных пользовательских атрибутов, которые начинаются с data- .

Синтаксис:

.data( key )

Параметры:

• key: Строка с названием части данных, которую необходимо получить.

Возвращаться:

• Он возвращает значение в именованном хранилище данных для первого элемента в наборе совпадающих элементов.

Подход:

• Учтите, что mydata — это имя вашего пользовательского атрибута. В элементе HTML напишите его как data-mydata и сохраните в нем некоторые данные.

<h1 id="someid" data-mydata ="THIS IS CUSTOM ATTRIBUTE DATA"></h1>

• Теперь передайте имя атрибута методу data(), чтобы получить данные пользовательского атрибута.

$("#someid").data("mydata")

Пример 1: мы увидим полный код того, как использовать атрибуты пользовательских элементов и как получить данные пользовательских атрибутов в jQuery.

Выход:

Использование .attr(): метод attr() в jQuery можно использовать для получения данных пользовательских атрибутов.

Синтаксис:

.attr( key )

Параметры:

• ключ: имя атрибута, который нужно получить.

Возвращаться:

• Он возвращает значение в именованном хранилище данных для первого элемента в наборе совпадающих элементов.

Подход:

1. Учтите, что mydata — это имя вашего пользовательского атрибута. В элементе HTML назначьте некоторые данные атрибуту mydata .

<h1 id="someid" mydata ="THIS IS CUSTOM ATTRIBUTE DATA"></h1>

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

$("#someid").attr("mydata")

Пример 2:

Выход: