1、单行文本框
获得或失去焦点改变样式CSS代码:
input:focus,textarea:focus { border: 1px solid #f00; background: #fcc; }
但IE6不支持除超链接元素之外的:hover伪类选择器,可以通过jQuery实现同样的效果。
首先添加css样式
.focus { border: 1px solid #f00; background: #fcc; }
jQuery添加获得/失去焦点事件
$(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); })
2、多行文本框
2.1 高度变化 动画效果优于height()方法的效果
height()方法 $(element).height($(element).height+50);动画方法$(element).animate({height:"+=50px"},400); //注意判断文本框是否处于动画状态
2.2 滚动条高度变化 控制多行文本框的滚动条的变化,使文本框内的内容滚动scrollTop属性
$(element).animate({scrollTop:"+=50px"},400);
3、复选框应用对复选框的全选、反选、全不选等操作
<form> <input type="checkbox" name="items" value="足球">足球 <input type="checkbox" name="items" value="篮球">篮球 <input type="checkbox" name="items" value="羽毛球">羽毛球 <input type="checkbox" name="items" value="乒乓球">乒乓球 <input type="checkbox" id="Checked" value="全选/全不选">全选/全不选 <input type="button" id="CheckedAll" value="全选"> <input type="button" id="CheckedNo" value="全不选"> <input type="button" id="CheckedRev" value="反选"> <input type="button" id="submit" value="提交"> </form>
jQuery代码:
//全选 $("#CheckedAll").click(function(){ $("[name=items]:checkbox").attr("checked",true); }) //全不选 $("#CheckedNo").click(function(){ $("[name=items]:checkbox").attr("checked",false); }) //合并全选与全不选 // $("#Checked").click(function(){ // if (this.checked) { // $("[name=items]:checkbox").attr("checked",true); // }else { // $("[name=items]:checkbox").attr("checked",false); // } // }) //全选与全不选优化 $("#Checked").click(function(){ $("[name=items]:checkbox").attr("checked",this.checked); }) // $("#[name=items]:checkbox").click(function(){ // var flag = true; // $("[name=items]:checkbox").each(function(){ // if(!this.checked){ // flag = false; // } // }); // $("#Checked").attr("checked",flag); // }) $("#[name=items]:checkbox").click(function(){ var $tmp = $("[name=items]:checkbox"); $("#Checked").attr("checked",$tmp.length==$tmp.filter(":checked").length); }) //反选 $("#CheckedRev").click(function(){ $("[name=items]:checkbox").each(function(){ // $(this).attr("checked",!$(this).attr("checked")); this.checked = !this.checked; //javascript方法 }); }) //提交 $("#submit").click(function(){ var str = "checked:\r"; $("[name=items]:checkbox:checked").each(function(){ str += $(this).val()+"\r"; }) alert(str); })
4、下拉框应用
5、表单验证$('#add').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); $('#add_all').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 });
表单验证是网站管理者与浏览者沟通的桥梁。如:用户提交信息、用户查询信息、用户反馈信息
表单中class属性为“required”为必填项。即该项文本框后面红星标识
//如果是必填的,则加红星标识.
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
HTML代码:
<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>
验证表单元素,比如用户名、邮箱是否符合验证规则
- 判断当前失去焦点的元素是用户名还是邮箱,然后分别处理
- 用户名验证
- 邮箱验证
- 将提醒信息追加到当前元素的父元素的后面
注意每次失去焦点后,都会创建一个新的提醒信息,所以在需要创建提醒元素之前,将当前元素之前创建的提醒信息删除掉,可以通过remove()方法实现。
//文本框失去焦点后
$('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>');
}
}
})
提交验证
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
为使表单填写准确,在表单提交之前,需要对表单的必填项进行一次整体的验证。可以直接用trigger()方法来触发blur事件,从而达到提醒的目的。
//提交,最终验证。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收.");
});
为了能否及时提醒,需要给表单绑定keyup事件和focus事件,keyup事件能够在用户每次松开按键时触发,实现实时提醒;focus事件能在元素获得焦点的时候触发,同样可以实时提醒。
//文本框失去焦点后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证信息...
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});//end blur
trigger("blur")会触发元素绑定的blur事件,也会触发浏览器默认的blur事件;
而triggerHandler("blur")只会触发元素绑定的blur事件,并不会触发浏览器默认的blur事件