从is(":checked")说起
*此文所用jQuery版本应大于1.6.1
如何判断一个单选（复选）框是否选中。
对于刚接触jQuery的人，第一反应必然是。
<input id="checkbox1" type="checkbox" checked> <input id="checkbox2" type="checkbox>
$("#checkbox1").attr("checked") // checked
$("#checkbox2").attr("checked") // undefined
无论是否选中，返回的值一直是 checked 。(至于为什么返回的是checked，那是因为checked属性对应的值只有checked这一个，所以写什么checked=false，checked="true",checked="unchecked" 这些是毫无意义的。都等同于checked="checked"，可以参考文档 input标签)
回到正题，我们希望的结果肯定是，如果选中了就返回true，没选中就返回false。
如果对jQuery比较熟悉，一般会这么处理
<input id="checkbox1" type="checkbox" checked> <input id="checkbox2" type="checkbox>
$("#checkbox1").is(":checked") // true
$("#checkbox2").is(":checked") // false
用is方法传入:checked伪类选择器，解决了这个问题。但是，为什么第一种方法不行呢？
二、HTML元素属性 和 DOM节点属性
会造成上面问题的疑问，主要原因是一个html元素，有两种类型属性（不知道这样说是否准确，但是个人认为比较好理解）
一种是DOM节点属性，读取它的方法就是 attr() 方法，拿个input来说
<input id="checkbox1" type="checkbox" checked data-custom='customattribute'>
这个input有的4个dom节点属性 id、type、checked、data-custom。
所以通过attr方法可以拿到这4个属性的值（值和html中写的一样，其中checked的值就是checked，原因上面已解释）
如果你写不存在的属性，返回的就会是undefined。
第二种是HTML元素属性，这种属性你看不到，但是确实存在，而且大部分情况和DOM节点属性对应的值一样。
在jQuery中取得这种值的方法是prop();
看下这个例子就明了了
<input id="checkbox1" type="checkbox" checked data-custom='customattribute'>
$("#checkbox1").prop("id") //checkbox1
$("#checkbox1").prop("type") //checkbox
$("#checkbox1").prop("checked") //true
$("#checkbox1").prop("data-custom") // undefined 自定义的DOM节点属性用取HTML元素属性的方法是取不到的
id和type和attr方法返回的一样。但是checked方法返回的值就不一样了，因为DOM节点属性可以理解为静态的，当页面渲染完，checked属性就确定了，就是checked。而HTML元素属性是动态的，随时可以改变，而且对于checked这个属性，对应的值是true或者false。
同理，a标签的href属性，用prop和attr取出来的也有可能不一样。attr取出的和看到的一样，prop取出的会是完整路径
<a id="a" href="test.html" class="csstest" style="font-size: 30px;">link</a>
$("#a").attr("href") // test.html
$("#a").prop("href") // "file:///E:/jquery/test.html"
所以，回到最开始的问题。
自然而然有另外一种解决方法
<input id="checkbox1" type="checkbox" checked> <input id="checkbox2" type="checkbox>
$("#checkbox1").prop("checked") // true
$("#checkbox2").prop("checked") // false
现在，这个问题应该已经很明了了。不过attr和prop不仅支持读取属性的操作，还支持写入属性的操作，我简单测试了下，发现在写入方面，attr和prop似乎差别不大。应该是jQuery做了兼容吧。
三、从原生Javascript看根本区别
简而言之把。attr相当于 Element.getAttribute / Element.setAttribute 而 prop相当于 Element['name'] / Element.name 这样。
就好比
<a id="a" href="test.html" class="csstest" style="font-size: 30px;">link</a>
document.getElementById("a").getAttribute("style") // font-size: 30px;
document.getElementById("a").style // CSSStyleDeclaration {0: "font-size", parentRule: null, length: 1, cssText: "font-size: 30px;", alignContent: "", alignItems: ""…} 一种浏览器定义的对象
转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途
