1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <p data-foo="0"></p>
6 <h6 data-foo="1"></h6>
7 <script>
8 var a = document.querySelectorAll('[data-foo]');
9
10 for (var i in a) if (a.hasOwnProperty(i)) {
11 alert(a[i].getAttribute('data-foo'));
12 }
13 </script>
14 </body>
15 </html>
16
1data attribute in jquery
2
3For setting attribute data to the element
4Html
5<p id="assign">Assigning data attribute</p>
6jquery
7$("#assign").data("title","firstparagraph");
8
9Output:
10<p id="assign" data-title="firstparagraph">Assigning data attribute</p>
11
12For getting attribute data from the element
13Html
14<p id="assign" data-title="firstparagraph">Assigning data attribute</p>
15jquery
16console.log($("#assign").data("title"));
17console.log($("#assign").data());
18
19Output:
20firstparagraph
21{ title: firstparagraph }