5.1 表单应用
文本框是表单域中最基本的元素------获取和失去焦点改变样式
创建一个表单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> body{ font: normal 12px/17px Arial; } div{ padding: 2px; } input, textarea{ width: 12em; border: 1px solid #888; } </style> </head> <body> <form action="#" method="POST" id="regForm"> <fieldset> <legend>个人信息</legend> <div> <label for="username">名称：</label> <input type="text" id="username" name=""> </div> <div> <label for="pass">密码：</label> <input type="password" id="pass" name=""> </div> <div> <label for="msg">详细信息：</label> <textarea id="msg"></textarea> </div> </fieldset> </form> <script type="text/javascript"> </script> </body> </html>
效果：当文本框获取焦点，颜色变化，失去焦点，恢复样式
CSS：
input:focus , textarea:focus{ border: 1px solid #f00; background: #fcc; }
但是 IE 6 并不支持除了 :hover 之外的其他伪类选择器。可以使用 jQuery
首先创建一个类名为 focus 样式
.focus{ border: 1px solid #f00; background: #fcc; }
然后添加获取和失去焦点事件
$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus") }); })
5.1.2 多行文本框应用
1 高度变化
如果所示，放大放小按钮控制
首先创建表单
<style type="text/css"> *{margin: 0;padding: 0;font: normal 12px/17px Arial;} .msg{width: 300px;margin: 100px;} .msg_caption{width: 100%;overflow: hidden;margin-bottom: 1px;} .msg_caption span{display: block;float: left;margin: 0 2px;padding: 4px 10px;background: #898989; cursor: pointer; color: white;} .msg textarea{width: 300px;height: 80px;height: 100px;border: 1px solid #000;} </style> </head> <body> <form action=""> <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="smaller">放小</span> </div> <div> <textarea id="comment" rows="8" cols="20"> 多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化. </textarea> </div> </div> </form>
思路：
①单击“放大”，如果高度小于500px ，则在原有高度基础上加 50px
②单击“放小”，如果高度大于50px，则在原有高度上减去50px。
$(function(){ var $comment = $("#comment"); $(".bigger").click(function(){ if($comment.height()<500){ //重新设置高度，在原有基础上加 50 $comment.height($comment.height()+50); } }); $(".smaller").click(function(){ if($comment.height()>50){ //重新设置高度，在原有的基础上减50 $comment.height($comment.height()-50); } }); })
添加缓冲效果，让变化效果更圆滑，不呆滞
$comment.height($comment.height()+50); //改为 $comment.animate({height:"+=50"},400);
因此，当单击“当大”按钮后，评论框高度会在 0.4秒内增大50px；
在动画的过程中，需要判断评论框是否正处于动画，如果处于动画过程中，则不追加其他动画，以免造成动画队列不必要的积累
$(function(){ var $comment = $("#comment"); $(".bigger").click(function(){ if(!$comment.is(":animated")){ if($comment.height()<500){ //重新设置高度，在原有基础上加 50 $comment.animate({height:"+=50"},400) } } }); var $comment = $("#comment"); $(".smaller").click(function(){ if(!$comment.is(":animated")){ if($comment.height()>50){ //重新设置高度，在原有基础上加 50 $comment.animate({height:"-=50"},400) } } }); })
2 滚动条高度变化
在多行文本框中，还有另一个应用，通过控制多行文本框的滚动条变化，使文本框内容滚动。
与控制高度方法相同，使用 scrollTop 替换即可。
HTML
<style type="text/css"> * { margin:0; padding:0;font:normal 12px/17px Arial; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style> </head> <body> <form action="" method="post"> <div class="msg"> <div class="msg_caption"> <span class="up" >向上</span> <span class="down" >向下</span> </div> <div> <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea> </div> </div> </form>
jQuery
$(function(){ var $comment = $('#comment');//获取评论框 $('.up').click(function(){ //向上按钮绑定单击事件 if(!$comment.is(":animated")){//判断是否处于动画 $comment.animate({ scrollTop : "-=50" } , 400); } }) $('.down').click(function(){//向下按钮绑定单击事件 if(!$comment.is(":animated")){ $comment.animate({ scrollTop : "+=50" } , 400); } }); });
点击向上或者向下时，可以滚动显示
5.1.3 复选框应用
对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作，复杂的操作需要与选项挂钩，来达到各种级联反应效果
创建一个复选框表单
<form action=""> 你爱好的运动？<br/><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/><br/> <input type="button" id="CheckedAll" value="全 选" name=""> <input type="button" id="CheckedNo" value="全不选" name=""> <input type="button" id="CheckedRev" value="反 选" name=""> <input type="button" id="send" value="提 交" name=""> </form>
如果需要使复选框处于选中或者不选状态，必须通过控制元素的 checked 属性来打到目的，如果属性 checked 的值为 true，说明被选中，如果值为 false，说明没被选中，因此可以基于这个属性来完成需求。
全选
找到“全选”按钮，绑定单击事件，然后使用选择符寻找符合要求的复选框“[namt=items]:checkbox”，最后通过attr() 方法来设置属性checked值
$("#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(){
$(this).attr("checked",!$(this).attr("checked"));
})
})
使用jQuery 可能有些复杂，可以使用原声 javascript
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked = !this.checked;
})
})
复选框被选中后，用户单击“提交”按钮，需要将选中的选项值输出，可以通过 val() 方法获取选中的值
$("#send").click(function(){
var str = "你选中的是：
";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"
";
});
alert(str);
})
♥ 用一个复选框控制全选 / 全不选
HTML
<form action=""> 你爱好的运动？<br/><br/> <input type="checkbox" id="CheckedAll" name="">全选/全不选<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/><br/> <input type="button" id="send" value="提 交" name=""> </form>
首页需要对另一个复选框控制
$("#CheckedAll").click(function(){
if(this.checked){
$('[name=items]:checkbox').attr("checked",true);
}else{
$('[name=items]:checkbox').attr("checked",false);
}
})
通过上述发下，所有复选框的 checked 属性的值和控制全选的复选框的 checked 属性值是相同的，因此可以省略 if 判断，直接赋值
$("#CheckedAll").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
})
当单击 id 为 “CheckedAll” 的复选框后，复选框被选中，当在复选框组里取消某一个选项的选中状态时，复选框并没有被取消选中状态，此时需要把它和复选框联系起来。
思路如下：
方法一
① 对复选框绑定单击事件
② 定义一个flag变量，默认为 true
③ 循环复选框组，当有没被选中的项时，则把变量flad值设置为 false
④ 根据变量 flag 值来设置“CheckedAll” 的复选框是否选中
（1） 如果 flag 为 true，说明复选框组都被选中
（2）如果 flag 为 false，说明复选框组至少有一个未被选中
// 设置全选/全不选 功能键 $("#CheckedAll").click(function(){ if(this.checked){ $('[name=items]:checkbox').attr("checked",true); }else{ $('[name=items]:checkbox').attr("checked",false); } }) // 修改后 $('[name=items]:checkbox').click(function(){ var flag = true; $('[name=items]:checkbox').each(function(){ if(!this.checked){ flag = false; } }); $("#CheckedAll").attr('checked',flag); })
方法二
（1）对复选框组绑定单击事件
（2） 判断复选框的总数是否与选中的复选框数量相等
（3） 如果相等，则说明全选，否则为不全选
//全选 $("#CheckedAll").click(function(){ //所有checkbox跟着全选的checkbox走。 $('[name=items]:checkbox').attr("checked", this.checked ); }); $('[name=items]:checkbox').click(function(){ //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率 var $tmp = $('[name=items]:checkbox'); // 用 filter() 方法筛选出选中的复选框，并直接给CheckedAll 赋值 $('#CheckedAll').attr('checked',$tmp.length == $tmp.filter(':checked').length); })
5.1.4 下拉应用
<style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white; } </style> </head> <body> <div class="centent"> <select multiple="multiple" id="select1" style="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> <option value="7">选项7</option> </select> <div> <span id="add" >选中添加到右边>></span> <span id="add_all" >全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style=" 100px;height:160px;"> <option value="8">选项8</option> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> <script type="text/javascript"> </script> </body>
需要实现功能
（1） 将选中的选项添加给对方
（2） 将全部选项添加给对方
（3） 双击某个选项将其添加给对方
① 先获取下拉列表中被选中的选项，然后将当前下拉列表中选中的选项删除，最后将删除的选项添加给对方
/* $("#add").click(function(){ var $options = $('#select1 option:selected'); //获取选中的项 var $remove = $options.remove(); //删除下拉列表中选中的项 $remove.appendTo('#select2'); });*/ // 删除和添加可以使用 sppendTo() 直接完成，左边到右边......上述代码简化为 $("#add").click(function(){ var $options = $('#select1 option:selected'); //获取选中的项 $options.appendTo('#select2'); })
完整代码
$("#add").click(function(){
var $options = $('#select1 option:selected'); //获取选中的项
$options.appendTo('#select2');
});
$("#remove").click(function(){
var $options = $('#select2 option:selected'); //获取选中的项
$options.appendTo('#select1');
});
②将全部项添加给对方。和第①步只是对象不同
//从左到右 $("#add_all").click(function(){ var $options = $('#select1 option'); //获取选中的项 $options.appendTo('#select2'); }); //从右到左 $("#remove_all").click(function(){ var $options = $('#select2 option'); //获取选中的项 $options.appendTo('#select1'); });
③双击某个选项将其添加给对方
首先绑定双击事件
$("#select1").dblclick(function(){ // dblclick 绑定双击事件
//将选中项添加给对方
})
然后可以通过 $("option:selected",this)方法来获取被选中的选项
//从左到右 $("#select1").dblclick(function(){ var $options = $('option:selected',this); $options.appendTo('#select2'); }); //从右到左 $("#select2").dblclick(function(){ var $options = $('option:selected',this); $options.appendTo('#select1'); });
5.1.5 表单验证
创建表单
<style type="text/css"> body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} form div { margin:5px 0;} .int label { float:left; width:100px; text-align:right;} .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} .sub { padding-left:100px;} .sub input { margin-right:10px; } .formtips{width: 200px;margin:2px;padding:2px;} .onError{ background:#FFE0E9 ; padding-left:25px; } .onSuccess{ background:#E9FBEB ; padding-left:25px; } .high{ color:red; } </style> </head> <body> <form action="" method="POST"> <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="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send"/> <input type="reset" id="res"/> </div> </form>
需要在必填文本框后面加上红色 * 标识
$(function(){ $("form :input.required").each(function(){ var $required = $("<strong class='high'> *</strong>"); //创建元素 $(this).parent().append($required); }); })
当用户在“用户名”文本框填写完信息后，将光标焦点从“用户名”移除，需要判断用户是否符合验证规则，移除邮箱，也需要验证邮箱规则，需要添加失去焦点事件。
$("form :input").blur(function(){ //为表单元素添加失去焦点事件
//.....验证函数
})
验证表单元素步骤如下：
① 判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理
② 如果是“用户名”，判断元素的长度是否小于6，如小于6，则用红色提醒，反之则用绿色提醒
③ 如果是“邮箱”，判断元素的值是否符合邮箱格式，如果不符合，则用红色，反之绿色提醒
④ 将提醒信息追加到当前元素的父元素的最后。
$('form :input').blur(function(){ // 为表单元素添加失去焦点事件
var $parent = $(this).parent();
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
})
由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中。会出现多次提醒信息，因此，需要在创建提醒元素之前，将当前元素以前的提醒元素删除，可以使用 remove() 方法完成
$('form :input').blur(function(){ // 为表单元素添加失去焦点事件
var $parent = $(this).parent();
$parent.find(".formtips").remove(); //去掉先前的提醒
// ......省略函数
})
在表单提交时，需要对表单必须填写的元素进行一次整体验证，可以使用 trigger() 方法来触发 blur 事件，如果填写错误，红色提醒。如果用户名和邮箱都不正确，那么就会有2处错误，即有两个 class 为“onError” 的元素，因此可以根据 class 为“onError” 元素的长度来判断是否可以提交。如果长度为 0，即 true, 说明已经可以提交了，如果长度大于0 ，即 false，说明有错误，需要阻止表单提交，阻止表单提交可以直接用 “return false” 语句。
//提交，最终验证。 $('#send').click(function(){ $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } alert("注册成功,密码已发到你的邮箱,请查收."); });
重置数据
//重置 $('#res').click(function(){ $(".formtips").remove(); });
完整代码：
$(function(){ //如果是必填的，则加红星标识. $("form :input.required").each(function(){ var $required = $("<strong class='high'> *</strong>"); //创建元素 $(this).parent().append($required); //然后将它追加到文档中 }); //文本框失去焦点后 $('form :input').blur(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); //验证用户名 if( $(this).is('#username') ){ if( this.value=="" || this.value.length < 6 ){ var errorMsg = '请输入至少6位的用户名.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } //验证邮件 if( $(this).is('#email') ){ if( this.value=="" || ( this.value!="" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value) ) ){ var errorMsg = '请输入正确的E-Mail地址.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } }); //提交，最终验证。 $('#send').click(function(){ $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } alert("注册成功,密码已发到你的邮箱,请查收."); }); //重置 $('#res').click(function(){ $(".formtips").remove(); }); })
每次输入完字段元素失去焦点后才会提醒是否输入正确，现在设置输入时即提醒输入是否正确
需要给表单绑定 keyup和focus 事件，keyup 事件在用户每次松开按键时触发，实现即时提醒， focus事件在元素得到焦点时候触发，也可以实现即时提醒。
$('form :input').blur(function(){
//失去焦点处理函数
//....省略
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
})
trigger("blur")不仅会触发为元素绑定的 blur 事件，也会触发浏览器默认的 blur 事件，即不能将光标定位到文本框上，而 triggerHandler("blur") 只会触发为元素绑定的 blur 事件，而不会触发浏览器默认的blur 事件。
完整代码：
$(function(){ //如果是必填的，则加红星标识. $("form :input.required").each(function(){ var $required = $("<strong class='high'> *</strong>"); //创建元素 $(this).parent().append($required); //然后将它追加到文档中 }); //文本框失去焦点后 $('form :input').blur(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); //验证用户名 if( $(this).is('#username') ){ if( this.value=="" || this.value.length < 6 ){ var errorMsg = '请输入至少6位的用户名.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } //验证邮件 if( $(this).is('#email') ){ if( this.value=="" || ( this.value!="" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value) ) ){ var errorMsg = '请输入正确的E-Mail地址.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); });//end blur //提交，最终验证。 $('#send').click(function(){ $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } alert("注册成功,密码已发到你的邮箱,请查收."); }); //重置 $('#res').click(function(){ $(".formtips").remove(); }); })