Jquery中的prop()、data()与attr()区别详解

程序员文章站 2022-05-08 17:42:59

目前在学些过程中遇到关于jquery的几个基础知识，这里做记录相当于笔记加深自己的记忆与理解！ jquery的prop()、data()与attr()的区别 1、jquer...

目前在学些过程中遇到关于jquery的几个基础知识，这里做记录相当于笔记加深自己的记忆与理解！

jquery的prop()、data()与attr()的区别

1、jquery版本的差异

（1）prop()：此方法jquery1.6引入，读/写dom的property。

（2）data()：此方法在jquery1.2.3引入，作用是把任意的数据读取/存储到dom元素对应的jquery对象上。

（3）attr()：此方法从jquery1.0开始就一直存在，官方文档写的作用是读/写dom的attribute值，后面容易与property混淆。

2、先比较prop与atrr的区别

（1）源代码上的重点区别

atrr是通过使用的 dom 的 api setattribute() 和 getattribute() 方法操作的属性元素节点。

elem.setattribute( name, value + "" ); 
ret =  elem.getattribute( name );

prop是通过类似与document.getelementbyid(el)[name] = value，这是转化成 element 的一个属性。

return ( elem[ name ] = value );
return elem[ name ];

（2）操作对象不同

attr()：操作的是html文档节点元素的属性attribute，也就是name，id，class等

prop()：操作的是dom元素（js对象）的property属性（这里属性可以理解成特性），如checked、selected等。

（3）建议使用的情况场合

atrr()：建议操作dom文档节点固有的属性值，如id、class、name、type等

prop()：根据官方文档跟经验建议使用在一些状态描述的属性上，即checked、selected、disablied、readonly等具有true跟false状态的属性上。

  <input type="text" id="test" name="username" class="user-login"/>  
  //获取固有的name属性  
  var attr = $('#test').attr('name');  
  <select id="test1" name="address">  
        <option value="yn">云南</option>  
     <option value="bj">北京</option>  
  </select>  
  //设置最后一个option被selected  
  $('#test1' option:last).prop('selected','selected');  
 //如果1.6以后使用attr则会出现undefined   
 var isselected = ('#test1' option:last).attr('selected');  
 console.log(isselected);

（4）效率上的区别

在可以使用prop与atrr的时候，优先选择prop，效率往往prop大于attr。

（5）细节上的区别

attr与prop在获取<a>的href属性的时候，atrr获取的是href的值，而prop获得是绝对地址。

<a href="#" id="myurl" data-name="test"></a>  
<script>  
    var myurl  = $('#myurl');  
        console.log(myurl.prop("href"));//输出xxx//xxxx//1.html#  
    console.log(myurl.attr("href"));//输出#  
</script>

<script>
	var myurl  = $('#myurl');
console.log(myurl.prop("href"));//输出xxx//xxxx//1.html#
	console.log(myurl.attr("href"));//输出#
</script>

attr()操作的是文档节点的属性，所以设置的属性值是字符串类型，如果不是字符串类型，也会调用其tostring()方法将其转换为字符串类型。而prop()操作的是js对象的属性，设置的属性值可以为包括数组和对象在内的任意类型。

3、data()与attr()、prop()的区别

（1）首先是data的用法

在html5中可以在节点元素中添加data-xxx（注意xxx只能为全小写或者全大写）的标签，这样使用可以将data-xxx的属性值存储到jquery的的data对象里，这样可以避免内存泄漏（下面会介绍），如下代码：

<p id="mydiv" data-id="1" data-name="lijian" data-pass="123" data-address='{"province":yunnan","city":"kunming"}'></p>  
<script>  
    var mydiv = $('#mydiv');  
    console.log("id: "+mydiv.data('id'));  
    console.log("name: "+mydiv.data('name'));  
    console.log("password: "+mydiv.data('pass'));  
    console.log("address: "+mydiv.data('address'));  
</script>

输出结果：

Jquery中的prop()、data()与attr()区别详解

最后总结data-xxx的使用方式：利用data-xxx在节点中添加标签，之后获取data对象,其中xxx就是data对象中的属性，使用data('xxx')就可以获得data-xxx的值，而且data-xxx这样的形式可以存储任何的数据类型。

（2）prop()与data()的区别：

两者的区别主要就是内存泄漏问题，什么是内存泄漏？

所谓的内存泄漏在我理解就是，变量是一直引用，甚至在已经销毁结束的时候还未结束对其引用，并没有回收垃圾。这时就会造成泄漏，大大降低性能。也就是如果使用 .prop()为 dom 元素的 property 设置的值不是一个简单的原始值（number、string 或 boolean），且该 property 在 dom 元素从 document 移除前未被移除（使用 .removeprop()）且被引用，则会导致内存泄漏。因此data就是防止prop内存泄漏的。

为什么data会防止内存泄漏呢？

这是因为data并不会直接将数据“挂”在元素属性上，而是通过间接的创建对象进行存储（也就是data对象），这样就起到了cache的作用。

（3）data()与attr()的区别

通过一下代码理解：

<p id="mydiv" data-id="1" data-name="lijian" data-pass="123" data-address='{"province":yunnan","city":"kunming"}'></p>  
<script>  
    var mydiv = $('#mydiv');  
    //修改data-name属性值  
    mydiv.data('name','zhangsan');  
    console.log("data: "mydiv.data('name'));//zhangsan  
    console.log("attr: "mydiv.attr('data-name'));//lijian  
</script>

Jquery中的prop()、data()与attr()区别详解