jquery选择data属性,jquery的data方法详解

　　人们总是喜欢在HTML标签中添加自定义属性来存储和操作数据。但这样做的问题是，你不知道将来其他脚本是否会重置你的自定义属性。此外，您这样做还会导致html语法不符合Html规范以及其他一些副作用。这就是为什么HTML5规范中增加了一个自定义数据属性，你可以用它做很多有用的事情。

　　可以阅读HTML5的详细规范，但是这个自定义数据属性的用法非常简单，就是可以在HTML标签中添加任何以 data-开头的属性。这些属性不会显示在页面上，也不会影响你的页面布局和样式，但是可读可写。

　　以下代码片段是一个有效的HTML5标记：复制代码代码如下：

　　div id=牛逼

　　data-myid=3e4ae6c4e 一些很棒的数据/div

　　然而，如何解读这些数据呢？当然，您可以遍历页面元素来读取您想要的属性，但是jquery有内置的方法来操作这些属性。使用jQuery的。data()方法来访问这些“data-*”属性。其中一个方法是。数据(对象)。这个方法出现在jQuery1.4.3版本1.4.3之后，它可以返回相应的数据属性。

　　例如，您可以通过以下方式读取data-myid属性值：按如下方式复制代码：

　　var myid=jQuery(#awesome )。数据( myid )；

　　console . log(myid)；

　　您还可以在“data-*”属性中使用json语法。例如，如果您编写以下html:按如下方式复制代码：

　　div id= awesome-JSON data-awesome= { game : on } /div

　　您可以通过js直接访问这些数据。通过json的键值，可以得到对应的值：复制代码代码如下：

　　var gameStatus=jQuery( # awesome-JSON )。数据(牛逼)。游戏；

　　console . log(gameStatus)；

　　您还可以通过直接为“data-*”属性赋值。数据(键，值)方法。您应该注意的一件重要事情是，这些“data-*”属性应该与它们所在的元素相关。不要把它当成收纳工具来存放任何东西。

　　译者补充：虽然 data-* 是HTML5中刚刚出现的属性，但是jquery是通用的，所以还是可以使用。data(obj)方法来操作非HTML5页面或浏览器中的“data-*”数据。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。