Jquery prop()、data()与attr()区别

目前在学些过程中遇到关于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>

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

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

（1）首先是data的用法

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

<div id="myDiv" data-id="1" data-name="Lijian" data-pass="123" data-address='{"province":Yunnan","city":"Kunming"}'></div>
<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>

输出结果：

最后总结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()的区别

通过一下代码理解：

<div id="myDiv" data-id="1" data-name="Lijian" data-pass="123" data-address='{"province":Yunnan","city":"Kunming"}'></div>
<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>

通过data-name设置属性的值是无法通过attr获取得到的，这也是一种个人理解的一种安全机制。