Как получить значение из атрибута data jquery

Как получить значение data с помощью jquery, сегодня будем получать значение из атрибута data в jquery! И это аналогично обращению или как обратиться к атрибуту data в jquery.

Подробно о получении значения из атрибута data в jquery!

1. Как получить значение из атрибута data в jquery!

Как получить значение из атрибута data в jquery

Вообще... атрибут "data" - очень, очень интересный! На нем построен один из блоков "DW: HIDE & SHOW". Рекомендую к изучению!

И вот, в том числе можно обратиться к "data" с помщью jquery, чтобы получить значение из атрибута data в jquery нам понадобится:

Возьмем простой элемент Dom - div, поскольку id - самый лучший уникальный атрибут - будем использовать его! Как вы знаете, что атрибут "data" - это двойной атрибут, поэтому нам нужно задать вторую часть, пусть это будет "text" и у нас получится "data-text":

<div id="get_data" data-text="Получи data с помощью jquery">Здесь элемент с атрибутом data. </div>

И опять нам нужна кнопка, чтобы мы могли увидеть процесс получения data в jquery вживую:

<button id="id_button">Получить значение из data</button>

И передадим полученное значение data в jquery в result:

<div id="id_result">result</div>

Переходим к jquery, нам понадобится click

$("#id_button").click( function()

Используем метод "html" и "attr"

$("#id_result").html
(
$("#get_data").attr("data-text")
);


Соберем весь код получения значения data в jquery

<input id="get_data" data-text="Получи data с помощью jquery">

<button id="id_button">Получить значение из data</button>

<div id="id_result">result</div>

<script>

$("#id_button").click( function()

{

  $("#id_result").html

  (

    $("#get_data").attr("data-text")

  );

});

</script>

Как работает получение значения из атрибута data в jquery?

Для того, чтобы протестировать работу получения значения из атрибута data в jquery, нажмите по ниже идущей кнопке..."Получить значение из data"

Здесь элемент с атрибутом data.
Получить значение из data
result