1. 往checkbox添加checked属性
<input type="checkbox" name="test" value="" checked="checked"/>
<input type="checkbox" name="test" value="" checked=""/>
<input type="checkbox" name="test" value="" checked="maomao"/>
<input type="checkbox" name="test" value=""/>
上面前三种出来的结果相同,都可勾选,证明只要添加checked属性,不管值为何,都可,系统会自动赋值
2. prop和attr
<form action="" method="post">
<input type="checkbox" name="test1" value=""/>
<input type="checkbox" name="test2" value=""/>
<input type="checkbox" name="test3" value=""/>
<input type="checkbox" name="test4" value=""/>
<input type="submit" value="submit">
</form>
<script>
$("input[name='test1']").prop("checked","checked");
$("input[name='test2']").prop("checked","maomaojiong");
$("input[name='test3']").prop("checked","");
$("input[name='test4']").attr("checked","checked");
</script>
除了第三个没勾选,其他都勾选了,为什么会出现这种情况?在第一块代码片段是,checked=" "不是也勾选了吗?
因为prop是布尔值,只有true和false,你赋不为空即为true。
这里有个问题,attr()应该只有添加属性的作用,并没有使checked=“checked”动作生效,不知道为什么也勾选了;而prop()则可以使其生效。
3. 在高版本的iquery引入prop后,什么时候该用prop,什么时候该用atrr呢?
主流的观点的处理固有属性时用prop(); 处理自定义属性时用attr();
举个例子:
<a href="https://www.aliyun.com/" target="_blank" id="yun">阿里云</a>
上面a标签里面的属性都是w3c标准里带有的固有属性
<span class="_blank" action="del">删除</span>
在这个标签有一个我们自定义的action
下面让我们操作下(dom结构接上面)
document.write("<pre>");
document.writeln($("a").prop("id"));
document.writeln($("a").attr("id"));
document.writeln("---------分割线---------");
document.writeln($("span").prop("action"));
document.writeln($("span").attr("action"));
document.write("</pre>");
在用prop输出span的自定义属性action时,浏览器返回了underfined。
因次prop只能拿来获取标签的固有属性;而attr都可。
再来看一个例子:
html
<input id="ck" type="checkbox"/>是否可见
<input id="ck2" type="checkbox" checked="checked" />是否可见
js
console.log($("#ck").prop("checked"));
console.log($("#ck2").prop("checked"));
console.log($("#ck").attr("checked"));
console.log($("#ck2").attr("checked"));
返回结果:
三个例子很明显那了,prop()用于固有属性;特别的有checked这种,返回布尔值;
attr()返回的是存在的属性的值,不存在则返回undeifined