JQuery第五章
jQuery对表单、表格的操作以及更多应用
一、表单应用
1.单行文本框应用
（1）获取和失去焦点改变样式
HTML代码如下：
<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"></textarea>
</div>
</fieldset>
</form>
CSS样式如下：
.focus{
border: 1px solid #f00;
background: #fcc;
}
jQuery代码如下：
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});
2.多行文本框应用
（1）高度变化
例如，某网站的评论框，有放大缩小功能。实现效果如下：
HTML代码如下：
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="small">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">
多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.
</textarea>
</div>
</div>
</form>
jQuery代码如下：
$(function(){
var $comment = $('#comment');
$('.bigger').click(function(){
if (!$comment.is(":animated")) {
if($comment.height() < 500){
$comment.animate({height : "+=50"},400);
}
}
})
$('.small').click(function(){
if (!$comment.is(":animated")) {
if($comment.height() > 50){
$comment.animate({height: "-=50"},400);
}
}
});
});
（2）滚动条高度变化
与控制高度的方法相同，只不过此处需要控制的是另一个属性，即scrollTop。将以上代码改成如下：
$(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);
}
});
});
3.复选框应用
对复选框的最基本应用，就是对复选框进行全选、反选和全不选等操作。
首先在空白网页中创建一个表单，其中放入一组复选框，HTML代码如下：
<form>
你爱好的运动是？<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="乒乓球">乒乓球
<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>
通过判断checked属性来判断是否选中，如果checked的值为true说明被选中，如果checked的值为false说明未被选中。jQuery代码如下：
$(function(){
$("#CheckedAll").click(function(){
$('[name = items] : checkbox').attr('checked',true);
});
$("#CheckedNo").click(function(){
$('[name = items]:checkbox').attr('checked',false);
});
$("#CheckRev").click(function(){
$('[name = items]:checkbox').each(function(){
this.checked = !this.checked;
});
});
});
4.下拉框应用
（1）将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。
HTML代码如下：
<div class="centent">
<select 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>
<option value="8">选项8</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple id="select1" style="width:100px;height:160px;">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
jQuery代码如下：
$(function(){
$("#add").click(function(){
var $options = $('#select1 option:selected');
$options.appendTo("#select2")
});
$("#add_all").click(function(){
var $options = $('#select1 option');
$options.appendTo('#select2');
});
$("#select1").dblclick(function(){
var $options = $("option:selected",this);
$options.appendTo("#select2");
});
});
5.表单验证
以一个简单的用户注册为例。首先新建一个表单，HTML代码如下：
<form method="post" action="#">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="email" 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>
在表单内，class属性为“required”的文本框时必须填写的，因此需要将它与其他的非必须填写表单元素加以区别，即在文本框后面追加一个红色的小星号。可以使用append()方法来完成。
