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">选中添加到右边&gt;&gt;</span>

<span id="add_all">全部添加到右边&gt;&gt;</span>

</div>

</div>

<div class="centent">

<select multiple id="select1" style="width:100px;height:160px;">

</select>

<div>

<span id="remove">&lt;&lt;选中删除到左边</span>

<span id="remove_all">&lt;&lt;全部删除到左边</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()方法来完成。