javascript (三）
表单过滤器
-
:input
匹配所有input，textarea，select和button元素
$(":input")
-
:text
匹配所有的单行文本框
$(":text")
含义：查找type属性为text的input元素
-
:password
匹配所有密码框
$("password")
含义：查找所有type属性为password的input元素
-
:radio
匹配所有单旋按钮
$(":radio")
含义：查找所有type属性为radio的input元素
-
:checkbox
匹配所有复选框
$(":checkbox")
含义：查找所有type属性为checkbox的input元素
-
:submit
匹配所有提交按钮
$(":submit")
含义：查找所有type属性为submit的input元素
-
:reset
匹配所有重置按钮
$(":reset")
含义：查找所有type属性为reset的input元素
-
:button
匹配所有按钮
$(":button")
含义：查找所有type属性为button的input元素和按钮元素
-
:file
匹配所有文件域
$(":file")
含义：匹配所有type属性为file的input元素
-
:hidden
匹配所有不可见元素，或者type为hidden的元素
-
:enabled
匹配所有可用元素
-
:disabled
匹配所有不可用元素
-
:checked
匹配所有被选中元素（复选框、单选框，不包括select中的option）
$("input:checked")
含义：查找所有选中的复选框元素
-
:selected
匹配所有选中的option元素(下拉列表中)
$("select option:selected")
元素筛选
-
filter(expr|obj|ele|fn)
筛选出与指定表达式匹配的元素集合
$("p").filter(".selected")
含义：匹配class属性为selected的p元素
-
is()
判断是否匹配给定的选择器，只要有一个匹配就返回true。
jQuery属性操作
html()
可以设置和获取起始标签和结束标签中的内容，和dom属性的innerHTML一样。
text()
可以设置和获取起始标签和结束标签中的文本，和dom属性的innerText一样
val()
可以设置和获取表单项的value属性值
val()还可以批量操作选中状态，如
$(":radio").val(["radio2"])
含义：设置value为radio2的单选框成为被选中状态
attr()
可以设置和获取属性的值，不推荐操作checked、eadonly、selected、disabled等等。因为返回值可能是undefined。
prop()
可以设置和获取属性的值，只推荐操作checked、readonly、selected、disabled等等。
全选、全不选、反选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入jQuery库-->
<script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//给全选绑定单击事件
$("#checkedAllBtn").click(function(){
$(":checkbox").prop("checked",true);
});
//给全不选绑定单击事件
$("#checkedNoBtn").click(function(){
$(":checkbox").prop("checked",false);
});
//给反选绑定单击事件
$("#checkedRevBtn").click(function(){
$(":checkbox[name='items']").each(function(){
this.checked=!this.checked;
})
//如果反选之后所有球类都被选择了，那么全选框要勾上
//获取此时一共有几个选项
var allCount=$(":checkbox[name='items']").length;
//获取当前被选中的选项有几个
var checkedCount=$(":checkbox[name='items']:checked").length;
//根据情况给全选框的checked赋值
$("#checkedAllBox").prop("checked",allCount==checkedCount);
})
//给提交按钮绑上单击事件
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
//给全选框绑上单击事件
$("#checkedAllBox").click(function(){
$(":checkbox[name='items']").prop("checked",this.checked);
});
$(":checkbox[name='items']").click(function(){
var allCount=$(":checkbox[name='items']").length;
var checkedCount=$(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount==checkedCount);
});
});
</script>
</head>
<body>
<form>
你爱好的运动是？
<input type="checkbox" id="checkedAllBox" value="haha">全选/全不选
<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="乒乓球">乒乓球
<br>
<input type="button" id="checkedAllBtn" value ="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
dom的增删改：
内部插入：
appendTo()
a.appendTo(b)
把a插入到b子元素末尾，成为最后一个子元素
prependTo()
a.prependTo(b)
把a插入到b所有子元素前面，成为第一个子元素
外部插入：
insertAfter()
a.insertAfter(b)
得到ba
insertBefore()
a.insertBefore(b)
得到ab
替换：
replaceWith()
a.replaceWith(b)
用b替换掉所有的a
replaceAll()
a.replaceAll(b)
用a替换掉所有b
删除：
remove()
a.remove()
删除a标签
empty()
a.empty()
清空a标签的内容
