javascript - Jquery自定义属性访问

Question

我的 js 文件中有一个 div

<div id="myid" data="mydata"></div>

当我尝试使用纯 JavaScript 访问自定义属性数据时

var data  =  document.getElementById('myid').getAttribute('data');

单独使用jquery

 var data = $("#"+myid).attr('data');

以上两个 mwthods 都工作正常，但是当我尝试同时使用 jquery 和 javascript

var data = $("#"+myid).getAtrribute("data");

那么是不是报错了？但无法得到原因？谁能解释一下吗？

Answer 1

您正在将 dom 方法应用于 jquery 对象，这会导致错误，而 jquery 有一个将选择器转换为 dom 元素的方法 .get() :

$("#"+myid).get(0).getAtrribute("data");

alert($('#myid').get(0).getAttribute('data'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid" data="mydata"></div>

当您使用data时属性那么最好使用data-*属性，jQuery 有一个方法来获取它 .data()方法:

<div id="myid" data-mydata="CustomisedData"></div>

然后在 jQuery 中:

$('#myid').data('mydata'); // will give you "CustomisedData"