【第六章】使用jQuery操作表单和表格2

最新推荐文章于 2020-10-12 17:29:33 发布

来颗溜溜莓

最新推荐文章于 2020-10-12 17:29:33 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/qq_45095748/article/details/103169257

版权

使用jQuery操作表单元素

操作文本框

1.获取文本框的值

var textCon =$("#id").val();
或者：
var  textCon=$("#id").attr("value");

2.设置文本框的值，可以使用attr()方法

$("#id").attr("value","要设定的值");

3.设置文本框不可编辑的方法：

$("#id").attr("disabled","disabled");

3.设置文本框可编辑的方法：

$("#id").removeAttr("disabled");

例子：

<html>
	<head>
		<meta charset="utf-8">
		<title>使用jQuery操作表单和表格</title>
		<script src="js/jquery-3.4.1.js" language="JavaScript"></script>
	</head>
	<body>
		用户名：<input type="text" name="testinput" id="testinput" value="hello" /><br /><br />
		<input type="submit" name="sbtn" id="sbtn" value="提交" />&nbsp;&nbsp;
		<input type="button" name="btn" id="btn" value="修改" />
		<script>
			$(document).ready(function(){
						$("#sbtn").click(function(){
							if($("#testinput").val()!=""){
								 alert($("#testinput").val());
								 $("#testinput").attr("disabled","disabled");
								 
							}else{
								alert("请输入文本内容");
								$("#testinput").focus();
								return false;
							}
						});
						$("#btn").click(function(){
							if($("#testinput").attr("disabled")=="disabled"){
								$("#testinput").removeAttr("disabled");
							}
						});
						})
					
		</script>
	</body>
</html>

操作文本域

文本域的属性、值的获取以及编辑状态的修改与文本框都相同。

文本域的高度变化

例子：

<body>
		<div class="message">
			<div class="msg_top">
				<input type="button" value="放大" id="bigBtn" />
				&nbsp;&nbsp;
				<input type="button" value="缩小" id="smallBtn" />
			</div>
			<div class="tt">
				<textarea id="content" rows="4" clos="35">
					寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。
					三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。
					满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！
					梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得
				</textarea>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				 var $content =$("#content");        //获取文本对象
				 $("#bigBtn").click(function(){        //放大按钮单击事件
					 if(!$content .is(":animated")){  //是否处于动画中
						 if($content.height()<350){
							 //将文本域高度在原来的基础上增加70
							 $content.animate({height:"+=70"},500);
						 }
					 }
				 })
				 $("#smallBtn").click(function(){  //缩小按钮单击事件
					 if(!$content.is(":animated")){//是否处于动画中
						 if($content.height()>70){
							  //将文本域高度在原来的基础上减少70
							  $content.animate({height:"-=70"},500);
						 }
					 }
				 })
			})
		</script>
	</body>

文本域的滚动条高度变化

例子：

<body>
		<div class="messsge">
			<div class="msg_top">
				<input type="button"value="向上"id="upBtn"/>
				&nbsp;&nbsp;
				<input type="button"value="向下"id="downBtn"/>
			</div>
			<div class="tt">
				<textarea id="content"rows="4"cols="35">
					寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。
					三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。
					满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！
					梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得
				</textarea>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				var $content=$("#content");                       //获取文本域对象
				$("#upBtn").click(function(){                     //向上按钮的单击事件
					if(!$content.is(":animated")){                //是否处于动画中
						if($content.height()<350){
							$content.animate({scrollTop:"-=40"},500);
						}
					}
				})
			$("#downBtn").click(function(){                       //向下按钮的单击事件
				if(!$content.is(":animated")){                    //是否处于动画中
					if($content.height()>40){
						$content.animate({scrollTop:"+=40"},500);
					}
				}
			})
			})
		</script>
	</body>

操作单选按钮和复选框

1.选中单选按钮和复选按钮

$("#id").attr("checked",true);

2.取消选中单选按钮和复选按钮

$("#id").removeAttr("checked",true);

3.判断选择状态：

if($("#id")..attr("checked")=='checked'){
//省略部分代码
}

1.例子：

<body>
		<form>
			<h2>选择你喜欢吃的水果</h2>
			<input type="radio" name="fruit" value="香蕉" />香蕉
			<input type="radio" name="fruit" value="橙子" />橙子
			<input type="radio" name="fruit" value="荔枝" />荔枝
			<input type="radio" name="fruit" value="葡萄" />葡萄
			<input type="radio" name="fruit" value="苹果" />苹果
			<br /><br />
			<input type="button" id="bbtn1" value="香蕉" />
			&nbsp;&nbsp;&nbsp;
			<input type="button" id="bbtn2" value="橙子" />
			&nbsp;&nbsp;&nbsp;
			<input type="button" id="bbtn3" value="荔枝" />
			&nbsp;&nbsp;&nbsp;
			<input type="button" id="bbtn4" value="葡萄" />
			&nbsp;&nbsp;&nbsp;
			<input type="button" id="bbtn5" value="苹果" />
		</form>
		<script>
			$(function(){
				$("#bbtn1").click(function(){
					$("input[type=radio]").eq(0).attr("checked",true);
				})
				$("#bbtn2").click(function(){
					$("input[type=radio]").eq(1).attr("checked",true);
				})
				$("#bbtn3").click(function(){
					$("input[type=radio]").eq(2).attr("checked",true);
				})
				$("#bbtn4").click(function(){
					$("input[type=radio]").eq(3).attr("checked",true);
				})
				$("#bbtn5").click(function(){
					$("input[type=radio]").eq(4).attr("checked",true);
				})
			})
		</script>
	</body>

实现全选，全不选，反选，提交

2.例子：

<body>
		<form>
			<h2>选择你喜欢吃的水果</h2>
			<input type="checkbox" name="fruit" value="香蕉" />香蕉
			<input type="checkbox" name="fruit" value="橙子" />橙子
			<input type="checkbox" name="fruit" value="荔枝" />荔枝
			<input type="checkbox" name="fruit" value="葡萄" />葡萄
			<input type="checkbox" name="fruit" value="苹果" />苹果
			<br /><br />
	         <input type="button" id="checkAll" value="全选" />
			 &nbsp;&nbsp;
			 <input type="button" id="unCheckAll" value="全不选" />
			 &nbsp; &nbsp;
			 <input type="button" id="revBtn" value="反选" />
			 &nbsp; &nbsp;
			 <input type="submit" id="subBtn" value="提交" />
			 &nbsp;&nbsp;
		</form>
		<script>
			$(function(){
				$("#checkAll").click(function(){
				   $("input[type=checkbox]").attr("checked",true);
				})
				$("#unCheckAll").click(function(){
				    $("input[type=checkbox]").removeAttr("checked");
				})
				$("#revBtn").click(function(){
				    $("input[type=checkbox]").each(function(){
						this.checked=!this.checked;
					});
				})
				$("#subBtn").click(function(){
				     var msg="你喜欢的水果是：\r\n";
					 $("input[type=checkbox]:checked").each(function(){
					 	msg+=$(this).val()+"\r\n";
					 });
					 alert(msg);
				})
			})
		</script>

操作下拉框

1.读取下拉框的值

var selVal =$("#id").val();

2.设置下拉框的选中框
使用attr()方法

$("#id").attr("value",选中项的值);

3.清空下拉菜单：
使用empty()方法

if($("#id").empty())；

4.向下拉菜单中添加菜单项：
使用append()方法

if($("#id").append("<option value='值'>文本</option>"))；

1.例子：

<html>
	<head>
		<meta charset="utf-8">
		<title>操作下拉框</title>
		<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
		<style>
			.first{
				float: left;
			}
			.second{
				float: left;
			}
			
			.sd{		
				float: left;	
			}
			.sel{
				width: 150px;
				height: 150px;
				float: left;
			}
		</style>
	</head>
	<body>
	<div class "first">
		<select multiple name="hobby" id="hobby" class="sel">
		   <option value="游泳">游泳</option>
		   <option value="足球">足球</option>
		   <option value="篮球">篮球</option>
		   <option value="跑步">跑步</option>
		   <option value="溜冰">溜冰</option>
		   <option value="滑雪">滑雪</option>
		   <option value="摄影">摄影</option>
		</select>
		<div class="sd">
		   <button id="add" >添加>> <tton> <br/><br/>
		   <button id="add_all"> 全部添加>> <tton>
		</div>
	</div>
	<div class="second">
		   <select multiple name="other" id="other" class="sel"></select>
		<div class="sd">
		   <button id="to_left"> <<删除  </button> <br/><br/>
		   <button id="all_to_left"> <<全部删除  </button>
		</div>
	</div>
		<script>
			$(function(){
			   $("#add").click(function(){
			      var $options = $("#hobby option:selected");           //获取左边选中项
			          $options.appendTo("#other");                          //追加到右边
			})
			
			
			$("#add_all").click(function(){
			     var $options = $("#hobby option");                    //获取全部选项
			         $options.appendTo("#other");                          //追加到右边
			})
			
			$("#hobby").dblclick(function(){                      //鼠标双击事件
			     var $options = $("option:selected" ,this);            //获取选中项
			         $options. appendTo("#other");                         //追加到右边
			})
			
			$("#to_left").click(function(){
			      var $options=$("#other option:selected");              //获取右边选中项
			          $options. appendTo("#hobby");                         //追加到左边
			})
			
			$("#all_to_left").click(function(){
			      var $options = $("#other option");                    //获取全部选项
			          $options. appendTo("#hobby");                         //追加到左边
			})
			
			$("#other").dblclick(function(){                      //鼠标双击事件
			       var $options=$("option:selected",this);               //获取选中项
			           $options.appendTo("#hobby");                          //追加到左边
			})
			})

		</script>
	</body>
<html>

来颗溜溜莓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【第六章】使用jQuery操作表单和表格2

使用jQuery操作表单元素操作文本框1.获取文本框的值var textCon =$("#id").val();或者：var textCon=$("#id").attr("value");2.设置文本框的值，可以使用attr()方法$("#id").attr("value","要设定的值");3.设置文本框不可编辑的方法：$("#id").attr("disabled","...
复制链接

扫一扫