6.1.1表单标记
1、action属性
action属性是指指定处理表单提交数据的脚本文件。
<form action="URL">....<form>
url:表单的提交地址。
2、表单名称name属性
用于给表单命名,不是必须属性。
<form name="form_name">...<form>
form_name:表单名称
3、提交方式method属性
用来定义处理程序从表单中获得信息的方式,可以取值为get或post ,决定表单中已收集的数据用什么方式提交到服务器。
<form method="method">....<form>
method:提交方式,可以为get或post。
4、编码方式enctype属性
表单中的enctype参数用于设置表单信息提交的编码方式。
<form enctype="value">....<form>
value:取值如下。
取值 | 描述 |
---|---|
test/plain | 以纯文本的形式传送 |
application/x-www-form-urlencoded | 默认编码方式 |
multipart/form-data | MIME编码,上传文件的表单必须选择项 |
6.2操作表单元素
6.2.1操作文本框
1、获取文本框的值:
var textCon = $("#id").val();
var textCon = $("#id").attr("value");
2、设置文本框的值,可以使用attr()方法:
$("#id").attr("value","要设定的值");
3、设置文本框不可编辑的方法
$("#id").attr("disabled","disabled");
4、设置文本框可编辑的方法:
$("#id").removeAttr("disabled");
【例 6-8】获取文本框的值以及切换编辑状态
<input type="text" id="testInput"/>
<input type="submit" value="提交" name="tj" id="tj"/>
<input type="button" value="修改" name="xg" id="xg"/>
<script type="text/javascript">
$(document).ready(function(){
$("#tj").click(function(){
if($("#testInput").val() != ""){
alert($("#testInput").val());
$("#testInput").attr("disabled","disabled");
}else{
alert("请输入文本内容!")
$("testInput").focus();
return false;
}
});
$("#xg").click(function(){
if($("#testInput").attr("disabled") == "disabled"){
$("#testInput").removeAttr("disabled");
}
});
})
</script>
6.2.3操作单选按钮和复选框
1、使用attr()方法可以设置选中的单选框和复选框:
$("#id").attr("checked",true);
2、取消选中单选按钮和复选框:
$("#id").removeAttr("checked");
3、判断选择状态
if($("#id").attr("checked")=='checked'){
}
【例 6-12】使用按钮控制单选框的选中状态
<form>
<h3 align="center">选择你喜欢的运动</h3>
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="滑冰" />滑冰
<input type="checkbox" name="hobby" value="滑雪" />滑雪
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
<input type="checkbox" name="hobby" value="乒乓球" />乒乓球<br /><br />
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="unCheckAll" value="全不选" />
<input type="button" id="revBtn" value="反选" />
<input type="button" id="subBtn" value="提交" />
</form>
<script type="text/javascript">
$(document).ready(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>
6.2.4操作下拉框
1、读取下拉框的值
var selVal = $("#id").val();
2、设置下拉框的选中项
$("#id").attr("value",选中项的值);
3、清空下拉菜单
if($("#id")).empty();
4、向下拉菜单中添加菜单项
if($("#id").append("<option value='值'>文本</option>"));
【例 6-13】jQuery操作下拉框
<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>
<option value="跳远">跳远</option>
<option value="跳高">跳高</option>
</select>
<div class="sd">
<button id="add">添加>></button><br /><br />
<button id="add_all">添加全部>></button>
</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>
<style type="text/css">
.first{
float:left;
font-size:12px;
}
.second{
padding-left:110px;
font-size:12px;
}
.sel{
width:80px;
height:150px;
}
.sd{
padding-top:10px;
}
</style>
<script type="text/javascript">
$(document).ready(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").click(function(){
var $options = $("option:selected",this);
$options.appendTo("#hobby");
})
})
</script>