Interaction between data-* and js-H5 Tutorial-php.cn

Interaction between data-* and js

php中世界最好的语言

Release： 2018-03-27 09:17:12

Original

2007 people have browsed it

This time I will bring you the interaction between data-* and js. What are the precautions for the interaction between data-* and js? The following is a practical case, let's take a look.

HTML5New Attributedata-*

Writing Example

<p data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options=&#39;{"name":"John"}&#39;>
</p>

Copy after login

1. Definition:

data-* attributes are used to store private custom data for a page or application.

data-* attributes give us the ability to embed custom data attributes on all HTML elements.

2. Note:

data-* attribute consists of two parts:

The attribute name should not contain any capital letters letters, and there must be at least one character after the prefix "data-"
The attribute value can be any
string

data-* attribute and jQueryInteraction

Use the .data() function in jQuery to get the data-* attribute value

console.log($("p").data('lastValue'));  //输出的值为:43
console.log($("p").data('role'));  //输出的值为:page

Copy after login

Note

data-**Attribute name format camel case naming rewriting

data-attribute is the first time After using this data attribute, there is no need to access or change it (all data values are stored internally in jQuery)

Demo:

 console.log($("p").data('lastValue'));  //输出的值为:43
    $('p').data('lastValue',44);  //设置data-last-value=44
    $('p')[2]  //假设这是文档中的第3个p,我们输出这个dom
    //输出:<p data-role="page" data-last-value="43" data-hidden="true" data-options=&#39;{"name":"John"}&#39;>

Copy after login

Don’t be afraid, you can output it again

 console.log($("p").data('lastValue'));  //输出的值为:44

Copy after login

The value is just stored inside jQuery

Use the .attr() function in jQuery to get the data-* attribute value

console.log($('p').attr('data-role')); //输出的值为:page
console.log($('p').attr('data-last-value')); //输出的值为:43

Copy after login

Use the .attr() function in jQuery to set the data-* Attribute value

$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象

Copy after login

Note: dashes should be converted into camel case naming

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!