jQuery中attr,prop区别

Posted 2020-10-03

前2篇jQuery笔记中，分别总结了jQuery中attr()和prop()的用法，大家可能会发现这两个方法在使用起来非常类似

没有看过的童鞋可移步：attr()用法  http://www.cnblogs.com/zwwhnly/p/7383960.html

　　　　　　　　　　   prop()用法 http://www.cnblogs.com/zwwhnly/p/7389295.html

本篇笔记主要总结下attr()，prop()之间的区别

假使页面上如如下html标签：

<input type="checkbox" checked="checked" />
<br />
<input type="radio" checked="checked"/>

 我们先使用attr()来获取checked属性的值，会发现返回的是checked：

$("input[type=‘checkbox‘]").attr("checked"); //    返回"checked"
$("input[type=‘radio‘]").attr("checked");    //    返回"checked"

 然后我们再使用prop()来获取checked属性的值，会发现返回的是true：

$("input[type=‘checkbox‘]").prop("checked"); //    返回true
$("input[type=‘radio‘]").prop("checked");    //    返回true

 此时我们在页面上操作下，取消选中该复选框和单选框，然后再分别用attr(),prop()来获取checked属性的值：

$("input[type=‘checkbox‘]").attr("checked"); //    返回"checked"
$("input[type=‘radio‘]").attr("checked");    //    返回"checked"

$("input[type=‘checkbox‘]").prop("checked"); //    返回false
$("input[type=‘radio‘]").prop("checked");    //    返回false

从上面的返回值，我们可以发现，虽然已经没有选中，但使用attr()获取的返回值仍然是checked， 而使用prop()获取的返回值从true变为false

 

综上所述，个人建议以下场景使用prop()而不是attr()：

1.获取radio,checkbox的选中状态时，使用prop()

 

2.设置radio,checkbox的选中状态时，使用prop()

语法如下：

$("input[type=‘checkbox‘]").prop("checked",true);    //    选中
$("input[type=‘checkbox‘]").prop("checked",false);    //   取消选中

 

3.获取input标签的disabled属性时，使用prop()

 语法如下：

$("input").prop("disabled");

 

4.设置input标签的disabled属性时，使用prop()

语法如下：

$("input").prop("disabled",true);    //    禁用所有的input元素
$("input").prop("disabled",false);    //   取消禁用所有的input元素