详细介绍jQuery的attr与prop的区别

标签: jqueryattrprop   时间:2017-09-26
在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东西的缩写。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得。

1. 于build-in属性,attribute和property共享数据,attribute更改了会对property造成影响,反之亦然,但是两者的自定义属性是独立的数据,即使name一样,也互不影响,看起来是下面这张图,但是IE6、7没有作区分,依然共享自定义属性数据

 

2. 并不是所有的attribute与对应的property名字都一致,比如刚才使用的attribute 的class属性,使用property操作的时候应该是这样className

t.className='active2';

 

3. 对于值是true/false的property,类似于input的checked attribute等,attribute取得值是HTML文档字面量值,property是取得计算结果,property改变并不影响attribute字面量,但attribute改变会一向property计算

<input id="test3" type="checkbox"/>
var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;
        
        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true
        
        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

 

4. 对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径

<a id="test4" href="#">Click</a>
var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

  

5. attr 是从页面搜索获得元素值,所以页面必须明确定义元素才能获取值,相对来说比较慢。 如:

<input name='test' type='checkbox'> 
$('input:checkbox').attr('type'); 返回checkbox. 
$('input:checkbox').attr('checked'); 返回undefined。

因为<input name='test' type='checkbox'>中没有checked关键字。

 

6. prop是从属性对象中取值,属性对象中有多少属性,就能获取多少值,不需要在页面中显示定义。 比如 

$('input:checkbox').prop('checked'); 返回false。

这里就会遇到个问题:如果是自定义的属性,那么属性对象中是没有这个属性的。所以prop返回undefined。但是页面中可以检索到这个属性,所以attr是可以获取的。

 

7. attr获取的是初始化值,除非通过attr(‘name’,’value’)改变,否则值不变。prop属性值是动态的,比如checkbox,选中后,checked变为true,prop值也会发生改变。

 

总结

所以有个经验就是:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。快速,准确。

  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

原文地址:http://www.manongjc.com/article/2160.html

上一篇:分享php多文件上传实现源码

下一篇:已是最后一篇