未经作者允许，禁止转载。转载请注明出处。
本节知识脑图：
一、表单选择器
选择器在前面接触过，前面有基础选择器，层次选择器等等。但是你会发现表单这里的选择器和之前的选择器相比带上了“：”。而带：号的一般是过滤器。选择器和过滤器的区别我认为是选择器是选第一层，基础选择器和层次选择器都是选择第一层的东西。过滤器是第二层，对选择器已经选中的进行二次过滤，一般是跟在一层选择器后，特点就是带：。而表单这里，应该理解为它是"表单选择器"，而非"选择器"。默认就是表单，所以：前的form可以省略。就好比form就是表单过滤器的body，但是还不能跟原有的过滤器重复，所以须带有：。而后面的过滤器是针对属性的。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var allInputs = $(":input");
var formChildren = $("form > *");
$("#messages").text("找到 " + allInputs.length + " 个input类型元素。");
$(":input").css("border","2px solid red");
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<div id="messages">
</div>
</body>
</html>
运行结果：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var allInputs = $(":button");
var formChildren = $("form > *");
$("#messages").text("找到 " + allInputs.length + " 个input类型元素。");
$(":button").css("border","2px solid red");
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<button>Button</button>
</form>
<input type="button" value="Input Button"/>
<button>Button</button>
<div id="messages">
</div>
</body>
</html>
运行结果：
注意：从结果可以看到匹配的是所有不管是哪种形式的button按钮（input或button都可以），也不管是在表单里面，还是在表单外面。
二、表单过滤器
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
//$("input:enabled").css("border","2px solid red");
$(":input:enabled").css("border","2px solid red");
});
</script>
</head>
<body>
<form>
<input name="uname" disabled="disabled" />
<input type="button" value="b1" />
<button>aaa</button>
<input name="id" />
</form>
</body>
</html>
</div>
</body>
</html>
(注释的运行结果)：
运行结果：
注意：可以看到选择器和表单选择器的区别。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
});
</script>
<style>
div { color:red; }
</style>
</head>
<body>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
<input type="checkbox" name="newsletter" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<input type="checkbox" name="newsletter" value="Yearly" />
</form>
<div></div>
</body>
</html>
运行结果：
三、表单事件处理
1.blur() focus()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","red");
});
$("input").blur(function(){
$("input").css("background-color","yellow");
});
});
</script>
</head>
<body>
输入用户名: <input id= "uname" type="text" /></body>
</html>
运行结果：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function setfocus() {
$("#uname").focus();
}
function lostfocus(){
$("#uname").blur();
}
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","red");
});
$("input").blur(function(){
$("input").css("background-color","yellow");
});
});
</script>
</head>
<body>
输入用户名: <input id="uname" type="text" />
<button onclick="setfocus();">获得焦点</button>
<button onclick="lostfocus();" >取消焦点</button>
</body>
</html>
运行结果：
注意：这两个方法不带参数的时候会触发事件，带了参数就是绑定事件。
2.change()
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<select name="city" multiple="multiple">
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>重庆</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
});
</script>
</body>
</html>
运行结果：
3.select()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="选中我。" />
</body>
</html>
运行结果：
4.submit()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#target').submit(function() {
if($('#name').val() == "")
{
alert("请输入数据");
return false;
}
return true;
});
});
</script>
</head>
<body>
<form id="target" action="do.asp">
<input id="name" type="text" value="" />
<input type="submit" value="提交" />
</form>
</html>
运行结果：
