《锋利的jQuery》学习总结（4）-prop()和attr()

为什么80%的码农都做不了架构师？>>>   

在学习到“复选框应用”这一小节的时候，我发现代码运行在ff上没有效果，开始以为是浏览器的原因，后来换成IE也不行，后来在网上查到，是因为其中的attr()应该换成prop()，这样就可以正常显示了。 代码如下：

你爱好的运动是?<br/>
		<input type="checkbox" name="items" value="足球"/>
		<input type="checkbox" name="items" value="篮球"/>
		<input type="checkbox" name="items" value="羽毛球"/>
		<input type="checkbox" name="items" value="乒乓球"/>
		<input type="button" id="checkedAll" value="全选"/>
		<input type="button" id="checkedRev" value="反选"/>
		<input type="button" id="checkedNo" value="全不选">
		<input type="button" id="send" value="提交"/>
	</form> 
	<script type="text/javascript">
		$("#checkedAll").click(function(){
			$('[name=items]:checkbox').prop('checked',true);
		});//全选
		$("#checkedNo").click(function(){
			$('[name=items]:checkbox').prop('checked',false);
		});//全不选
		$("#checkedRev").click(function(){
			$('[name=items]:checkbox').each(function(){
				this.checked=!this.checked;
			})
		});//反选
		//用prop()取代attr();
		$("#send").click(function(){
			var str="你选中的是：\r\n";
			$('[name=items]:checkbox:checked').each(function(){
				str+=$(this).val()+"rn";
			});
			alert(str);
		});//提交输出内容
		//复选框应用
	</script> 

---

现在总结下为什么会这样？

在以前jQuery版本中，一直用attr()来获取对象的属性，比如取一个图片的alt属性，就是$("#img").attr('alt');但是，比如：disabled="disabled”，在不同的浏览器里要求就不一样；所以从jQuery1.6版之后，使用prop()来获取标准属性：true/false;那么$“#checkbox”).prop('checked') 只会返回true/false，而不会返回“disabled”或“”；

用prop()的原则：

1. 只添加属性名称属性就会立即生效的属性，比如selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected;
   2.只存在true/false的属性，也就是属性只有布尔值的属性;

转载于:https://my.oschina.net/hyzccc/blog/774710