【Jquery】prop与attr的区别

最近因项目需要用到复选框，其中一个控制全选。

// 全选
$(".ckb_all").click(function(){
    if($(this).attr("checked") == true){
		$(":input[name='ckb_img']").attr("checked",true);
	}else{
		$(":input[name='ckb_img']").attr("checked",false);
	};
});

一开始是像上面这样做是可以实现效果的，复制粘贴同样的代码到其他需要的地方，结果发现不起作用，找了半天，发现用的jquery版本是1.8的，所以使用attr不起作用。下面就讲讲prop与attr的主要区别。

jquery在1.6版本中添加了prop方法，与attr的主要区别是：

对于HTML元素本身的固有属性，使用prop方法

对于HTML元素开发者自定义的属性，使用attr方法

举个例子：

<a href="http://www.hao123.com" class="">hao123</a>

对于a标签来说，像href、class这些属性是它本来就有的，在获取时一般就用prop；

<a href="http://www.hao123.com" class="" goto="hao123">hao123</a>

在这个例子中，a标签本身并没有goto属性，是我们自定义的，在获取时就用attr

像checkbox、select，选中属性对应“checked”和“selected”，都是固有属性，因此在1.6以上版本的jquery中需要使用prop方法才能获取到正确的结果。

比如 checkbox的 checked属性， 使用prop，选中时返回true，没选中时返回false；如果使用attr的话，选中时返回 checked，没选中时返回undefined。

Author：顾故

Sign：别输给曾经的自己