您的位置:首页 > Web前端 > JQuery

jquery中attr() & prop() 的区别与其实现方法

2017-04-02 20:03 656 查看
$(function(){
$('#check').attr('checked');        //   undefind   ???一头雾水
})


在jquery中 attr 本来就是用来设置或者获取属性的,可是上面的方法却返回给 undefined ?

然后我尝试用

$('#check').prop('checked');


发现可以正常运行!!

在jquery中prop是相对来说版本比较新的一个方法,乍一看它的功能好像和attr没有什么很大的差别,的确,它们都可设置或者来获取属性,比如

$('#div').attr('title','hello');
$('#div').prop('title','hello');
$('#div').attr('class');
$('#div').prop('class');


都可以正常的运行,通过查看他们在jquery中的源码我有所发现:

  在原生js中我们可以用 setAttribute() 和 getAttribute() 进行操作 ,也可以用  .|[] 进行操作 (exp: document.getElementById('div').title|| document.getElementById('div')[title] )。

  在jquery当中 attr() 方法最主要的就是应用了原生中的 setAttribute() 和 getAttribute()  而  prop() 方法用的则是 . | []  这就是他们之间为什么会有不同之处的根本原因(当然,其中还有一些hook的因素影响着,感兴趣的同学可以去看一看源码)

  那么 attr() 和 prop()  在平常的使用中有什么区别呢,在jQuery 1.6中,
.attr()
方法查询那些没有设置的属性,则会返回一个undefined。如果你要去恢复或者改变DOM状态值,类似
checked
selected
disabled
等表单元素的状态,最好使用
.prop()
方法,而自定义的属性最好使用attr()
方法,若使用prop() 同样可能会出现undefined的情况。官方给出了下面的一个表:(什么时候用哪种方法)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: