`
lemo
  • 浏览: 91603 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery中对form元素的操作

jQueryUP 
阅读更多
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" >选中添加到右边&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>


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

分享到：
| jquery中的ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery 操作 Form 元素 v1.0

    jQuery 操作 Form 元素 v1.0 for jQuery1.4.2，IE7/FF3.6.2下测试通过 作者：西安 网眼 博客：http://blog.why100000.com 微博：http://t.qq.com/zhangking 西安PHP教育培训中心 2010-6-20

    jquery获取form表单input元素值的简单实例

    在本篇内容中，我们将详细探讨如何使用jQuery来获取form表单中input元素的值，包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input...

    使用jQuery.form插件，实现完美的表单异步提交

    在开始之前，请确保已经在项目中引入了jQuery库以及jQuery.form插件。通常，这两个文件可以通过CDN或者本地文件系统导入。例如： ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ...

    Jquery validate和form插件

    `jQuery validate` 和 `jQuery form` 插件是 jQuery 生态系统中的两个重要工具，它们分别用于增强表单验证和实现 AJAX 无刷新提交，从而提供更流畅的用户体验。 **jQuery validate 插件** `jQuery validate` 是一...

    jquery.form.js和使用说明

    3. **多文件上传支持**：jQuery Form Plugin特别适合处理多文件上传，通过`iframe`隐藏元素，可以绕过浏览器对单个文件大小的限制，实现大文件或多个文件的上传。 4. **自定义事件**：插件提供了一系列的自定义事件...

    jquery.form中文API

    这些方法和选项使得使用jQuery处理表单数据和提交变得简单和灵活，同时提供了对AJAX提交的精细控制，从而创建更流畅、无刷新的用户体验。通过这些API，开发者能够方便地处理表单的序列化、提交、重置和数据获取等...

    jquery开发的form第二版

    1. **引入资源**：在项目中引入jQuery库和jQuery Form Builder的JavaScript和CSS文件。 2. **初始化Form Builder**：在HTML结构中创建一个容器元素，并通过JavaScript调用初始化方法。 3. **添加表单元素**：利用...

    jquery form

    这里的`selector`可以是CSS选择器，如`'#id'`、`.class`或`tag`等，`action()`则是对选中元素执行的操作。 **2. jQuery Form插件的引入** 在项目中，我们需要先引入jQuery库，然后引入jQuery Form插件。在本例中，...

    浅析jquery数组删除指定元素的方法:grep()

    在开发中，我们常常需要对数组进行操作，其中就包括删除数组中的指定元素。在JavaScript中，原生提供的`splice()`方法是一种常用的方式，它通过指定的索引位置来删除元素。然而，在某些情况下，使用`splice()`方法...

    jquery-form.js

    《jQuery Form Plugin详解及其在异步表单提交与文件上传中的应用》 jQuery Form Plugin是一款强大的JavaScript库，专为了解决使用jQuery进行异步表单提交（Ajax Form Submission）和文件上传的问题。它通过扩展...

    jquery.form.js

    在Web开发中，jQuery库以其简洁的API和强大的功能深受开发者喜爱，而`jquery.form.js`则是jQuery的一个重要插件，它扩展了jQuery对表单处理的功能，使得表单的提交、异步上传、验证等操作变得更加简单易行。...

    jquery&jqueryform;

    在这个压缩包中，我们有两个核心文件：`jquery-1.7.2.min.js` 和 `jquery.form.min.js`，它们分别代表了jQuery库本身和一个用于扩展jQuery功能的jQuery Form插件。 ### jQuery 1.7.2 `jquery-1.7.2.min.js` 是...

    jquery.form.js下载_jquery.form.js上传文件插件下载

    总之，jQuery.form.js插件是开发中不可或缺的工具，它简化了表单处理，特别是异步文件上传的复杂性，让开发者能更专注于业务逻辑和用户体验设计。通过熟练掌握并运用这个插件，可以大大提高前端开发的效率和质量。

    JQuery.form表单提交参数详解.txt

    ### JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法详解 #### 一、引言 在 Web 开发中，使用 AJAX 进行异步表单提交是一种常见的技术手段，它允许开发者无需重新加载整个页面即可提交数据并接收响应...

    jqueryform.js

    "jqueryform.js"是一个非常实用的jQuery插件，它简化了这一过程，提供了对表单的AJAX化支持，包括文件上传和进度显示功能。本文将深入探讨jQuery Form插件的原理、使用方法以及实际应用。 首先，jQuery Form插件的...

    基于jQuery和layui的form表单自定义js动态生成

    在动态生成表单中，我们主要利用jQuery的选择器快速定位表单元素，并通过其提供的API进行操作。 二、layui介绍 layui是一个轻量级且模块化的前端框架，它包括了丰富的组件，如表格、按钮、表单、弹窗等。layui的...

    jQuery复制移除表单元素代码.zip

    2. **复制表单元素**：在jQuery中，复制DOM元素可以使用`.clone()`方法。例如，如果有一个ID为`formElement`的表单元素，可以这样复制它： ```javascript var clonedElement = $('#formElement').clone(); ``` ...

    jQuery中Form相关知识汇总

    在jQuery中，Form元素是网页交互的核心部分，用于收集用户输入的数据。本篇文章将汇总jQuery中与Form相关的知识，特别是关于单行文本获取和失去焦点，以及如何改变多行文本框高度的操作。 首先，让我们来看一下如何...

    jquery-confirm.js和jquery-form.js

    3. 对目标表单元素添加`submit`事件监听器，使用`$.ajaxForm`或`$.ajaxSubmit`方法来处理表单提交。 4. 在提交事件的处理函数中，调用`$.confirm`以弹出确认对话框，根据用户的选择决定是否执行表单提交。 通过这样...

Magicbox
Global site tag (gtag.js) - Google Analytics