1.单行文本框应用
获得和失去焦点改变样式
添加样式：
<style type="text/css">
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
具体实现：
<body>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="userName">名称：</label>
<input type="text" id="userName" />
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="pass" />
</div>
</fieldset>
</form>
<script type="text/javascript">
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
</script>
</body>
2.多行文本框应用
● 高度变化
<body>
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="30">jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。</textarea>
</div>
</div>
</form>
<script type="text/javascript">
var $comment = $("#comment");
$(".bigger").click(function(){
if($comment.height()<500){//如果高度小于500，每次点击高度增加50
$comment.height($comment.height()+50);
}
});
$(".smaller").click(function(){
if($comment.height()>50){//如果高度大于50，每次点击高度减少50
$comment.height($comment.height()-50);
}
});
</script>
</body>
● 滚动条高度变化
3.复选框应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../script/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//全选
$("#checkedAll").click(function(){
$("[name=items]:checkbox").attr("checked",true);
});
//全不选
$("#checkedNo").click(function(){
$("[name=items]:checkbox").attr("checked",false);
});
//反选
$("#checkedRev").click(function(){
$("[name=items]:checkbox").each(function(){//each()
$(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
<title>复选框应用</title>
</head>
<body>
<form>
你爱好的运动是：<br />
<input type="checkbox" name="items" value="篮球">篮球<br />
<input type="checkbox" name="items" value="足球">足球<br />
<input type="checkbox" name="items" value="羽毛球">羽毛球<br />
<input type="checkbox" name="items" value="乒乓球">乒乓球<br />
<input type="button" id="checkedAll" value="全选" />
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkedRev" value="反选" />
<input type="button" id="send" value="提交" /><br />
</form>
</body>
</html>
如上的代码，我刚开始在IE9上执行的时候，全选、全不选，第一次点击的时候是能够正确执行的，但是第二次再点的时候就没有反应了。在IE8上就是完全正确的。哎，不得不感叹：IE不同版本间的差异真大啊。
使用复选框取代全选、全不选按钮并根据复选框是否全选更新该复选框checkedAll状态
思路：对复选框组绑定单击事件；定义一个变量flag，初始化为true；检查复选框组中的复选框是否全部选中，如果有没有被选中的，flag赋为false；根据flag的值来更新“checkedAll"的状态。
<body>
<form>
你爱好的运动是：<br />
<input type="checkbox" name="items" value="篮球">篮球<br />
<input type="checkbox" name="items" value="足球">足球<br />
<input type="checkbox" name="items" value="羽毛球">羽毛球<br />
<input type="checkbox" name="items" value="乒乓球">乒乓球<br />
<input type="checkbox" id="checkedAll" value="全选/全不选">全选/全不选<br />
<input type="button" id="checkedRev" value="反选" />
<input type="button" id="send" value="提交" /><br />
</form>
<script type="text/javascript">
//全选或者全不选
$("#checkedAll").click(function(){
if(this.checked){
$("[name=items]:checkbox").attr("checked",true);
}else{
$("[name=items]:checkbox").attr("checked",false);
}
});
//反选
$("#checkedRev").click(function(){
$("[name=items]:checkbox").each(function(){//each()
$(this).attr("checked",!$(this).attr("checked"));
});
});
//检查是否全选以更新checkedAll状态
$("[name=items]:checkbox").click(function(){
var flag = true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag = false;
}
});
$("#checkedAll").attr("checked",flag);
});
</script>
</body>
4.下拉列表框应用
选中添加到右边、全部添加到右边、双击添加到右边
<body>
<div class="content">
<select multiple id="select_01" style="width:100px;height:160px">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="content">
<select multiple id="select_02" style="width:100px;height:160px">
</select>
<div>
<span id="remove">选中删除到左边>></span>
<span id="add_all">全部删除到左边>></span>
</div>
</div>
<script type="text/javascript">
//选中添加到右边
$("#add").click(function(){
var $options = $("#select_01 option:selected");
$options.appendTo("#select_02");
});
//全部添加到右边
$("#add_all").click(function(){
var $options = $("#select_01 option");
$options.each(function(){
$(this).appendTo("#select_02");
});
});
//通过双击添加到右边
$("#select_01").dblclick(function(){
var $options = $("option:selected",this);//获得选中的选项
$options.appendTo("#select_02");
});
</script>
</body>
我不明白为什么“var $options = $("option:selected",this);”这一句的“this”是个什么意思？没有功能是一样能够实现的。是不是jQuery选择器？
5.表单验证
用户名长度必须大于6；邮箱格式要正确；正则表达式。
<body>
<form>
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="info">资料：</label>
<input type="text" id="info" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res" value="重置" />
</div>
</form>
<script type="text/javascript">
//alert($("form :input.required").length);
//在必填选项后追加”*”
$("form :input.required").each(function(){//"form :input.required":form后面必须有个空格，否则找不到
//$(this).parent().append("<strong class='high'>*</strong>");
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
$("form :input.required").blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();//删除以前的提示
if($(this).is("#username")){//验证姓名
var username = this.value;//此处如果不另外声明一个变量，会使#username被赋值true或false
if(username="" || username.length<6){
var msg = "用户名不能为空并且长度要大于6个字符";
$parent.append("<strong class='formtips onError'>"+msg+"</strong>");
}else{
var msg = "输入正确";
$parent.append("<strong class='formtips onSuccess'>"+msg+"</strong>");
}
}
if($(this).is("#email")){//验证邮箱
var email = this.value;
if(email="" || (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email))){
var msg = "请填写正确的邮箱";
$parent.append("<strong class='formtips onError'>"+msg+"</strong>");
}else{
var msg = "输入正确";
$parent.append("<strong class='formtips onSuccess'>"+msg+"</strong>");
}
}
});
//当点击提交时，校验必填项是否已经填写。如果没有，则阻止提交
$("#send").click(function(){
$("form :input.required").trigger("blur");
var errorLength = $("strong.onError").length;
if(errorLength == 0){
alert("注册成功");
}else{
alert("你填写的信息有误");
return false;
}
});
</script>
</body>
