使用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="提交" />
<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" />
<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"/>
<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="香蕉" />
<input type="button" id="bbtn2" value="橙子" />
<input type="button" id="bbtn3" value="荔枝" />
<input type="button" id="bbtn4" value="葡萄" />
<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="全选" />
<input type="button" id="unCheckAll" value="全不选" />
<input type="button" id="revBtn" value="反选" />
<input type="submit" id="subBtn" value="提交" />
</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>