5.1表单应用
表单的三个基本组成部分：
（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。
（2）表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选框和文件上传框。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据上传到服务器上或者取消传送。
5.1.1单行文本框的应用
文本框获取和失去焦点改变样式：
5.1.2多行文本框的应用
1、文本框高度的变化
程序实例：
$(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);
}
});
);
2、滚动条高度的变化
$(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);
}
});
});
5.1.3复选框的应用
程序实例：
$(function () {
//全选功能
$("#CheckAll").click(function () {
$('[name=items]:checkbox').attr("checked",true);
});
//全不选功能
$("#CheckNo").click(function () {
$('[name=items]:checkbox').attr("checked",false);
});
//反选功能
$("#CheckRev").click(function () {
$('[name=items]:checkbox').each(function () {
this.checked=!this.checked;
});
});
//复选框被选中之后，点击提交按钮，输出选中的值
$("#send").click(function () {
var str="你选择的是：\r\n";
$('[name=items]:checkbox:checked').each(function () {
str+=$(this).val()+"\r\n";
});
alert(str);
});
控制复选框的全选与全不选可以通过一个复选框来控制，程序实例：
<form>
你喜欢的运动是？
<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="CheckRev" value="反选">
<input type="button" id="send" value="提交">
</form>
$("#CheckAll").click(function () {
if(this.checked){
$('[name=items]:checkbox').attr('checked',true);
}else{
$('[name=items]:checkbox').attr('checked',false);
}
});
5.1.4下
拉框的
应用
5.2表格的应用
5.2.1变色表格
1、普通的单行变色
5.2.2表格展开关闭
程序实例：
CSS样式：
.even{
background-color: #FFF38F;
}
.odd{
background-color: #FFFFEE;
}
JavaScript：
$(function () {
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
});