jquery中prop()与attr()的区别

JQuery

当在做多选时用jquery的attr()时发现只能实现一次，而且是在input初始化时没点击过的情况下，可以实现一次，再次使用就不管用了。
这时搜资料发现可以用prop()解决问题。

关于这个问题，我们对attr()和prop()做一些探究：

说到prop()和attr()，就要牵扯到attribute和property。

1
<div class="myClass" id="myId"><div>

attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性存放所有的attribute节点。

attributes就像是一个数组容器。形式如下：

1
2
3
4
5
6
[class="myClass", id="myId"]

//我们可以这样取到他的attribute
document.getElementById('myId')[0].attributes[0]   //class="myClass"
document.getElementById('myId')[0].attributes[0].name  //class
document.getElementById('myId')[0].attributes[0].value  //myClass

property就是一个属性，每个DOM元素就像是一个Object，property就是以键值对的形式存储在properties中。

1
2
3
4
[{class:"myClass", id:"myId"}]

//我们可以这样取到他的property
document.getElementById('myId')[0].class   //myClass

注：property在html标签只是一个键值对属性，是不可见的，而attitude节点都是html标签上可见的，但是标签原先自带的attitude节点好像都有对应的属性property。（比如我们在标签上自定义一个attitude， 这是去他的对应的property是undefined的，是没有值的）

下面我们就来说一下prop()和attr():

prop()就像data()方法，prop()改变或返回的是property的值；attr()改变和返回的是attitude的值。
而input的checkbox选中与与不选中状态需要改变的是checked的property的值，所以使用attr()不管用，需要使用prop()。

举个例子深入了解一下prop()和attr():

1
<div class="myClass"></div>

1
2
3
4
5
6
7
8
9
10
11
$('.myClass').attr('data_1', 'data_1');
//这时我们标签会变成 <div class="myClass" "data_1"="data_1"></div>
    
$('.myClass').prop('data_1');  //undefined
$('.myClass').attr('data_1'); //data_1
    
$('.myClass').prop('data_2', 'data_2');
//这时我们标签还是 <div class="myClass" "data_1"="data_1"></div>，没有任何变化
    
$('.myClass').prop('data_2');  //data_2
$('.myClass').prop('data_2');  //undefined

那我们什么时候使用prop()，什么时候选用attr()呢？一般总结下来，当标签改变值传的是boolean类型时，通常选用prop()，其余的情况选用attr()。这样的判定其实不是很精确，只能是通常情况。最好还是理清上面的原理。

但是到这里，还是不能解释为什么input的checkbox使用attr第一次有效，第二次就失效的问题。