（1） If in HTML Set in the document data- If there is an upper case value in the attribute of the name of a single string of the custom attribute , stay js File can only be obtained in lowercase form . Such as ：
HTML in data-Role, At that time, it was $(node).data(“role”);
（2） If in HTML Set in data-role and data-Role It's the same ,html Properties are case insensitive . Then we can see from the verification results that ,js Only the first one that matches it will be returned directly .
（3） If you use js To set up data attribute , So if you define the upper case format , Then the access must also be in uppercase .
$(“.test”).data(“UP”,123); console.log($(“.test”).data(“UP”));// return 123 console.log($(“.test”).data(“up”));// return undefined
（4） If we just want to data-Role attribute , You can use a third usage ：
$(“.test”).data(“Role”,2); console.log($(“.test”).data(“Role”));// The output is returned 2
The experimental code is as follows ：
Finally, let's talk about data() and attr() The difference between ：
（1） Whether it is necessary to pass the reference ：
data() You don't have to pass in parameters , What this brings is a js object , Even if you are html There is no data When customizing properties , What we get is also an object .
and attr() You have to pass in parameters .
console.log($(“.test”).attr(“data-role”));// Output is 2, Set up data-role=”2″
If the parameter is not set, an error will be reported ：
（2） The types of data obtained are different .
data Get the type value of the corresponding setting , attr Method to get the data type is string （String） type .
（3） about data Method , If we use an object to receive it , Then you can manipulate the object directly （ Set or get a value ）, however attr The value obtained by this method cannot .
（4）data-attribute The properties will be placed in the jQuery In the object , It's cached , and attr The method is not .
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .