Usage of data custom attribute in jquery

kirin 2021-01-14 14:25:24
usage data custom attribute jquery


(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 :


  1. <body>
  2. <div class=“test” data-role=“1” data-Role=“2” data-then-value=“3” data-options=‘{“name” : “john”}’></div>
  3. </body>
  4. </html>
  5. <script src=“jquery-1.11.3.js”></script>
  6. <script>
  7. $(function() {
  8. console.log($(“.test”).data(“role”));
  9. console.log($(“.test”).data(“Role”));
  10. console.log($(“.test”).data(“thenValue”));
  11. console.log($(“.test”).data(“thenvalue”));
  12. console.log($(“.test”).data(“options”));
  13. $(“.test”).data(“UP”,123);
  14. console.log($(“.test”).data(“UP”));
  15. console.log($(“.test”).data(“up”));
  16. </script>

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 .

版权声明
本文为[kirin]所创,转载请带上原文链接,感谢
https://javamana.com/2021/01/20210114124845967d.html

  1. Redis basic command
  2. Summary of MySQL articles
  3. 2、 Create k8s cluster in 5 seconds
  4. data自定义属性在jQuery中的用法
  5. Linux常见解压缩
  6. Detailed explanation of HBase basic principle
  7. 1、 Why and how to learn k8s
  8. Java advanced (29) -- HashMap set
  9. java中大文件上传
  10. Weblogic 2017-3248 analysis of Java Security
  11. Kubernetes official java client 8: fluent style
  12. Explain the function of thread pool and how to use it in Java
  13. Programming software tutorial video Encyclopedia: C + + / Java / Python / assembly / easy language (with tutorial)
  14. Description of dependency problem after javacv is updated to 1.5. X and how to reduce the size of dependency package
  15. Java reflection & dynamic agent
  16. Building Apache 2.4 + php7 + mysql8 in centos7 environment
  17. Summary of Java multithreading (1)
  18. Oracle AWR report generation
  19. Four magic functions of mybatis, don't step on the pit!
  20. A 16-year-old high school student successfully transplanted Linux to iPhone and posted a detailed guide
  21. Centos7 one click installation of JDK1.8 shell script
  22. Mounting of file system in Linux (centos7)
  23. How does serverless deal with the resource supply demand of k8s in the offline scenario
  24. Detailed explanation of HBase basic principle
  25. Spring security oauth2.0 authentication and authorization 4: distributed system authentication and authorization
  26. Redis performance Part 5 redis buffer
  27. JavaScript this keyword
  28. Summary of Java multithreading (3)
  29. Sentry(v20.12.1) K8S 云原生架构探索, SENTRY FOR JAVASCRIPT 手动捕获事件基本用法
  30. Sentry(v20.12.1) K8S 云原生架构探索, SENTRY FOR JAVASCRIPT 手动捕获事件基本用法
  31. (10) Spring from the beginning to the end
  32. Summary of Java multithreading (2)
  33. Spring source notes! From the introduction to the source code, let you really understand the source code
  34. A stormy sunny day
  35. Zookeeper (curator), the implementation of distributed lock
  36. Show the sky! Tencent T4's core Java Dictionary (framework + principle + Notes + map)
  37. Spring boot project, how to gracefully replace the blank value in the interface parameter with null value?
  38. Spring boot project, how to gracefully replace the blank value in the interface parameter with null value?
  39. docker+mysql集群+读写分离+mycat管理+垂直分库+负载均衡
  40. docker+mysql集群+读写分离+mycat管理+垂直分库+负载均衡
  41. To what extent can I go out to work?
  42. Java 使用拦截器无限转发/重定向无限循环/重定向次数过多报错(StackOverflowError) 解决方案
  43. Implementation of rocketmq message sending based on JMeter
  44. How to choose the ticket grabbing app in the Spring Festival? We have measured
  45. Implementation of rocketmq message sending based on JMeter
  46. My programmer's Road: self study java
  47. My programmer's Road: self study java
  48. All in one, one article talks about the use of virtual machine VirtualBox and Linux
  49. All in one, one article talks about the use of virtual machine VirtualBox and Linux
  50. Java 使用拦截器无限转发/重定向无限循环/重定向次数过多报错(StackOverflowError) 解决方案
  51. [Java training project] Java ID number recognition system
  52. How does serverless deal with the resource supply demand of k8s in the offline scenario
  53. Detailed explanation of HBase basic principle
  54. Explain the function of thread pool and how to use it in Java
  55. Kubernetes official java client 8: fluent style
  56. 010_MySQL
  57. Vibrant special purchases for the Spring Festival tiktok section, hundreds of good things to make the year more rich flavor.
  58. 010_MySQL
  59. Of the 4 million docker images, 51% have high-risk vulnerabilities
  60. Rocketmq CPP client visual studio 2019 compilation