element节点的attribute和property初探

最近在用jquery的时候,发现$('input[checked="checked"]')有时候不能正确的选择被勾选的checkbox.
所以调查了一下

在javascript里,任何一个obj都有property,并且可以任意添加

			var o=new Object();
			o.name='crap';
			alert(typeof(o.name));

显示是个string

对于element元素,有个readonly的property,叫做attributes,这是个NamedNodeMap.
http://www.w3schools.com/dom/prop_element_attributes.asp
http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614
element元素可以通过getAttribute,setAttribute来操作attributes这个NamedNodeMap里的内容
以下内容是在火狐18.0.1演示的.

		<script type="text/javascript">
			function crap() {
				var item = document.getElementById("key");
				alert(item.type);
				alert(item.getAttribute('type'));
			}
		</script>
		<input type="text" id="key">
		<button onclick="crap()">button</button>

看到输出都是text,因为item.type这个属性是由它的html attributes暴露的
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288

				var item = document.getElementById("key");
				alert(item.type);
				item.setAttribute('type','checkbox');
				alert(item.type);

输出分别是text,checkbox,因为item.setAttribute('type','checkbox')更改了item.type属性

把代码改成如下

		<script type="text/javascript">
			function crap() {
				var item = document.getElementById("key");
				alert(item.checked);
				alert(item.getAttribute('checked'));
			}
		</script>
		<input type="checkbox" id="key">
		<button onclick="crap()">button</button>

在checkbox没选中的情况下,输出分别为false,null
鼠标勾选以后,是true,null

IE7中分别是false,false
true,true

看来火狐没有进行setAttribute

我猜测这就是jquery中input[checked='checked'] selector有时候不能选中被勾选的元素的原因,
要用:checked这个选择器.

不过换句话说,一个checkbox元素e被勾选以后,它到底应该e.checked=true才对,
还是e.setAttribute('checked','checked')?

规范说

那岂不是火狐应该setAttribute('checked','checked')?

jquery新增了prop()方法
http://api.jquery.com/prop/
文档上写了prop
attr()中的介绍
http://api.jquery.com/attr/
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

请注意jquery的升级

$("input").find(":checkbox")
然后each循环就得了 里面去判断 $(this).attr("checked")==true