jQuery教程:表单form的应用
2012-06-08 00:56 497 0
摘要 一个表单有3个基本组成部分。 (1) 表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。 (2) 表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 (3) 表单按钮：包括提交按钮、复位按钮
一个表单有3个基本组成部分。
(1) 表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。
(2) 表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
(3) 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
本文主要讲解jQuery在表单域中的应用。
一、单行文本输入框input的应用
文本框是表单域中最摹本的元素，基于文本框的应用有很多。此处只简单介绍其中的个应用——获取和失去焦点改变样式。
首先，在网页中创建一个表单，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" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>
当文本框获取焦点后，它的颜色需要有变化：当它失去焦点后，则要恢复为原来的样式。此功能可以极大地提升用户体验，使用户的操作可以得到及时的反馈。可以使用CSS中的伪类选择符来实现以上的功能。
input:focus , textarea:focus{
border: 1px solid #f00;
background: #fcc;
}
但是IE 6并不支持除超链接元素之外的:hover伪类选择符，此时可以用jiQuery来弥补IE 6对CSS支持的不足。
首先在CSS中添加一个类名为focus的样式。
.focus {
border: 1px solid #f00;
background: #fcc;
}
然后为文本框添加获取和失去焦点事件。
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");}).blur(function(){
$(this).removeClass("focus");
});
})
经过处理后，即使在IE 6也可以呈现令人满意的效果。
二**、多行文本框应用**
1．高度变化
例如某网站的评沦框，在右上角，有“+（放大）”和“-（缩小）”的按钮，它们的功能就是用来控制评论框的高度的。例如单击“-”按钮，评论框的高度将会缩小。
评论框也需要设置最小高度和最大高度，当达到界限后再单击按钮，评论框的高度就不会再有任何变化。
首先创建一个表单，其中包含评论框，HTML代码如下：
<form action="" method="post">
<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
</div>
</div>
</form>
然后需要思考以下两种情况。
(1) 当单击“放大”按钮后，如果评论框的高度小于500px，则在原有高度的基础上增加50px。
(2) 当单击“缩小”按钮后，如果评论框的高度大于50px，则在原有高度的基础上减去50px。
jQuery代码如下：
$(function(){
var $comment = $('#comment'); //获取评论框
$('.bigger').click(function(){ //放大按钮绑定单击事件
if( $comment.height() < 500 ){
$comment.height( $comment.height() + 50 ); //重新设置高度，在原有的基础上加50
}
});
$('.smaller').click(function(){//缩小按钮绑定单击事件
if( $comment.height() > 50 ){
$comment.height( $comment.height() - 50 ); //重新设置高度，在原有的基础上减50
}
});
});
当单击“放大”或“缩小”按钮后，评论框就有了相应的变化，但此时评论框的变化效果很呆板，缺乏缓冲效果。在动画章节里，讲解过自定义动画方法animate()，此处可以将其中的一段代码：
$comment.height( $comment.height() + 50 );
改为：
$comment.animate({ height : "+=50" },400);
因此，当单击“放大”按钮后，评论框的高度会在0.4杪内将增大50px。
注意在动画的过程中，需要判断评论框是否正处于动画，如果处于动画过程中，则不追加其他动画，以免造成动画队列不必要的累积，使效果出现问题。
最终的jQuery代码为如下：
$(function(){
var $comment = $('#comment'); //获取评论框
$('.bigger').click(function(){ //放大按钮绑定单击事件
if(!$comment.is(":animated")){ //判断是否处于动画
if( $comment.height() < 500 ){
$comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
}
}
})
$('.smaller').click(function(){//缩小按钮绑定单击事件
if(!$comment.is(":animated")){//判断是否处于动画
if( $comment.height() > 50 ){
$comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
}
}
});
});
此时评论框的高度变化具有一定的缓冲效果，比直接用height()方法的效果好多了。
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);
}
});
});
当单击“向上”或者“向下”按钮时，评论框的滚动条就会滚动到指定的位置。
