Jquery自定义属性访问

Question

我的js文件中有一个div

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

当我尝试使用纯javascript

访问自定义属性数据时

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

单独jquery

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

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

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

然后是错误？但是没能弄到原因？有人可以解释一下吗？

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当您使用data属性时，最好使用data-*属性，jQuery有一种方法可以使用.data()方法获取它：

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

然后在jQuery中：

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

Answer 2

因为$("#"+myid)是一个jQuery实例，而不是HTML Element对象。所以你不能在某个任意对象上使用DOM方法。

jQuery实例对象是一个类似于数组的DOM元素集合。这意味着如果您确实需要，可以通过索引从中提取单个DOM元素。所以在你的情况下你可以这样做：

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

jQuery还为它提供专用方法$.fn.get：

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

Answer 3

这应该有效：

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

因为要使用javascript代码，你需要使用DOM对象，但jQuery使用类似数组的集合对象。