jquery中对form元素的操作

于 2010-03-19 09:43:23 发布
阅读量133 收藏
点赞数
分类专栏： jQuery学习笔记 文章标签： jQuery UP ViewUI
本文提供了多个前端表单交互的示例，包括文本框获得焦点时的样式变化、文本框高度调整、滚动条控制、复选框操作及表单验证等，通过实际代码展示了如何使用jQuery增强表单的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.文本框得到焦点后变色 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
	font:normal 12px/17px Arial;
}
div{
    padding:2px;
} 
input, textarea { 
	 width: 12em; 
	 border: 1px solid #888;
}
.focus { 
	 border: 1px solid #f00;
	 background: #fcc;
} 
</style>
<!--   引入jQuery -->
 <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>
 <script type="text/javascript">
	$(function(){
		$(":input").focus(function(){

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

	})

 </script>
</head>
<body>
	<form action="" method="post" id="regForm">
		<fieldset>
			<legend>个人基本信息</legend>
				<div>
					<label  for="username">名称:</label>
					<input id="username" type="text" />
				</div>
                <div>
					<label for="pass">密码:</label>
					<input id="pass" type="password" />
				</div>
                <div>
					<label for="msg">详细信息:</label>
					<textarea id="msg" rows="2" cols="20"></textarea>
				</div>
		</fieldset>
	</form>
</body>
</html>


2.设置文本框的高度: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<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>
 <!--   引入jQuery -->
  <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>

 <script type="text/javascript">
	$(function(){
		var $comment = $("#comment");
		$(".bigger").click(function(){
			var height = $comment.height();
			if(height<300){
				$comment.height(height+50);
			}
		});
		$(".smaller").click(function(){
			var height = $comment.height();
			if(height>100){
				$comment.height(height-50);
			}
		});
	})
  </script>
</head>
<body>
<form action="" method="post">
<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>
</body>
</html>


3.具有动画效果的文本框高度变化 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<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>
 <!--   引入jQuery -->
  <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>

 <script type="text/javascript">
	$(function(){
		var $comment = $("#comment");
		$(".bigger").click(function(){
			var height = $comment.height();
			if(height<300){
				$comment.animate({height:"+=50"},400);
			}
		});
		$(".smaller").click(function(){
			var height = $comment.height();
			if(height>100){
				$comment.animate({height:"-=50"},400);
			}
		});
	})
  </script>
</head>
<body>
<form action="" method="post">
<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>
</body>
</html>


4.控制滚动条的变化 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<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>
 <!--   引入jQuery -->
  <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>
 <script type="text/javascript">
	$(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);
			}
		});
	})
  </script>
</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>
</body>
</html>


5.复选框的全选，反选 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <!--   引入jQuery -->
 <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>
 <script type="text/javascript">
  $(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(){
			$(this).attr("checked",!$(this).attr("checked")); //取当前checkebox的反值
		});
	});

	$("#send").click(function(){
		var s = "选择的是: \r\n";
		$("[name=items]:checkbox:checked").each(function(){
			s +=$(this).val()+"\r\n";
		});
		alert(s);
	});

  })
  </script>
</head>
<body>
<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>
</body>
</html>


6.复选框多选 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <!--   引入jQuery -->
 <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>
 <script type="text/javascript">
  $(function(){
	$("#checkall").click(function(){
		$("[name=items]:checkbox").attr("checked",this.checked);
	})
  })
  </script>
</head>
<body>
<form method="post" action="">
   你爱好的运动是？<input type="checkbox" id="checkall">全选
   <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="send" value="提　交"/> 
</form>
</body>
</html>


7.下拉框: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<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>
<!--   引入jQuery -->
 <script type="text/javascript" src="D:\jslib\jquery\jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	$("#add").click(function(){
		$options = $("#select1 option:selected");
		$options.appendTo("#select2");
	});
	$("#add_all").click(function(){
		$options = $("#select1 option");
		$options.appendTo("#select2");
	});
	$("#select1").dblclick(function(){
		var $options = $("option:selected",this);
		$options.appendTo("#select2");
	});
})
</script>

</head>
<body>
	<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" >选中添加到右边>></span>
			<span id="add_all" >全部添加到右边>></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"><<选中删除到左边</span>
			<span id="remove_all"><<全部删除到左边</span>
		</div>
	</div>


</body>
</html>


8.表单验证 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(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(); 
		 });
})
//]]>
</script>
</head>
<body>

<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>

</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值