Web前端基础(19)jQuery对文本框和表单的操作

单行文本框

首先在网页中创建一个表单,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input:focus, textarea:focus{
            border:1px solid #f00;
            background: #fcc;
        }
    </style>
</head>
<body>
    <form action="#" method="POST" id="regForm">
        <legend>个人基本信息</legend>
        <div>
            <label for="username">名称:</label>
            <input id="username" type="text"></label>
        </div>
        <div>
            <label for="pass">密码:</label>
            <input id="pass" type="password"></label>
        </div>
        <div>
            <label for="msg">详细信息:</label>
            <textarea id="msg"></textarea>
        </div>
    </form>
</body>
</html>
个人基本信息

但是IE6并不支持除超链接元素之外的:hover伪类选择器,此时可以用jQuery来弥补。

添加一个类名为focus的样式

.focus{
    border: 1px solid #f00;
    background: #fcc;
}

然后为文本框添加获取和失去焦点事件。

$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    })
})

多行文本框应用

高度变化

$(function(){
	var $comment = $('#comment');  //获取评论框
	$('.bigger').click(function(){ //放大按钮绑定单击事件
		if(!$comment.is(":animated")){ //判断是否处于动画
			if( $comment.height() < 500 ){ 
				$comment.animate({ height : "+=50" },400); //重新设置高度,在原有的基础上加50
			}
		}
	})
	$('.smaller').click(function(){//缩小按钮绑定单击事件
		if(!$comment.is(":animated")){//判断是否处于动画
			if( $comment.height() > 50 ){
				$comment.animate({ height : "-=50" },400); //重新设置高度,在原有的基础上减50
			}
		}
	});
});

滚动条高度变化

$(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);
		}
	});
});

复选框应用

对复选框最基本的应用,就是对复选框进行全选、反选和全选、全不选等操作。

<form method="post" action="">
   你爱好的运动是?
   <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="CheckedAll" value="全 选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反 选"/> 

	<input type="button" id="send" value="提 交"/> 
</form>
你爱好的运动是?
足球篮球羽毛球乒乓球

全选和全部选

$("#CheckedAll").click(function(){
    $('[name=items]:checkbox').attr('checked', true); //全不选设置为false
})

反选

$("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        //$(this).attr("checked", !$(this).attr("checked"));
        this.checked = !this.checked;
    })
})

下拉框应用

<style>
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>
<div class="centent">
	<select multiple="multiple" id="select1" 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>
		<option value="7">选项7</option>
	</select>
	<div>
		<span id="add" >选中添加到右边&gt;&gt;</span>
		<span id="add_all" >全部添加到右边&gt;&gt;</span>
	</div>
</div>

<div class="centent">
	<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
		<option value="8">选项8</option>
	</select>
	<div>
		<span id="remove">&lt;&lt;选中删除到左边</span>
		<span id="remove_all">&lt;&lt;全部删除到左边</span>
	</div>
</div>

左边的添加到右边

$('#add').click(function() {
	$('#select1 option:selected').appendTo('#select2');
});

右边的移动到左边

$('#remove').click(function() {
	$('#select2 option:selected').appendTo('#select1');
});

全部移动到右边

$('#add_all').click(function() {
	//获取全部的选项,删除并追加给对方
	$('#select1 option').appendTo('#select2');
});

全部移动到左边

$('#remove_all').click(function() {
	$('#select2 option').appendTo('#select1');
});

双击移动到对面

$('#select1').dblclick(function(){ //绑定双击事件
	//获取全部的选项,删除并追加给对方
	$("option:selected",this).appendTo('#select2'); //追加给对方
});

表单验证

<form method="post" action="">
	<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(){
			 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(); 
		 });
})