5.0 第5章 jQuery对表单、表格的操作及更多应用 5.1 表单应用
第5章 jQuery对表单、表格的操作及更多应用
通过前面4章的介绍和学习，读者已经对jQuery比较熟悉了，本章将通过讲解jQuery在表单（Form）和表格（Table）中的应用来加深对jQuery的理解。表单和表格都是HTML的重要组成部分，分别用于采集、提交用户输入的信息和显示列表数据。通过本章的实战锻炼，相信读者的jQuery技能又有一个极大的提高。
5.1 表单应用
一个表单有3个基本组成部分。
（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。
（2）表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
本节主要讲解jQuery在表单域中的应用。
5.1.1 单行文本框应用
文本框是表单域中最基本的元素，基于文本框的应用有很多。此处只简单介绍其中的一个应用—获取和失去焦点改变样式。
首先，在网页中创建一个表单，HTML代码如下：
[插图]
应用样式后，初始化网页效果如图5-1所示。
[插图]
当文本框获取焦点后，它的颜色需要有变化；当它失去焦点后，则要恢复为原来的样式。此功能可以极大地提升用户体验，使用户的操作可以得到及时的反馈。可以使用CSS中的伪类选择符来实现以上的功能。
CSS代码如下：
[插图]
但是IE 6并不支持除超链接元素之外的:hover伪类选择符，此时可以用jQuery来弥补I E6对CSS支持的不足。
首先在CSS中添加一个类名为focus的样式。
CSS代码如下：
[插图]
然后为文本框添加获取和失去焦点事件。
jQuery代码如下：
[插图]
当文本框获得焦点时，会出现图5-2所示的效果。
[插图]
经过处理后，在IE6下也可以呈现令人满意的效果。
5.1.2 多行文本框应用
1．高度变化
例如某网站的评论框，如图5-3所示。
[插图]
在图5-3的右上角，有“+（放大）”和“-（缩小）”的按钮，它们的功能就是用来控制评论框的高度的。例如单击“-”按钮，评论框的高度将会缩小，如图5-4所示。
[插图]
评论框也需要设置最小高度和最大高度，当达到界限后再单击按钮，评论框的高度就不会再有任何变化。
首先创建一个表单，其中包含评论框，HTML代码如下：
[插图]
然后需要思考以下两种情况。
（1）当单击“放大”按钮后，如果评论框的高度小于500px，则在原有高度的基础上增加50px。
[插图]
（2）当单击“缩小”按钮后，如果评论框的高度大于50px，则在原有高度的基础上减去50px。
jQuery代码如下：
[插图]
当单击“放大”或“缩小”按钮后，评论框就有了相应的变化，但此时评论框的变化效果很呆板，缺乏缓冲效果。在动画章节里，讲解过自定义动画方法animate()，此处可以将其中的一段代码：
[插图]
改为：
[插图]
因此，当单击“放大”按钮后，评论框的高度会在0.4秒内将增大50 px。
注意在动画的过程中，需要判断评论框是否正处于动画，如果处于动画过程中，则不追加其他动画，以免造成动画队列不必要的累积，使效果出现问题。
最终的jQuery代码为如下：
[插图]
此时评论框的高度变化具有一定的缓冲效果，比直接用height()方法的效果好多了。
2．滚动条高度变化
在多行文本框中，还有另外一个应用，就是通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。
与控制高度的方法相同，只不过此处需要控制的是另一个属性，即scrollTop。将以上代码改成如下：
[插图]
当单击“向上”或者“向下”按钮时，评论框的滚动条就会滚动到指定的位置，效果如图5-6所示。
[插图]
5.1.3 复选框应用
对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。
首先在空白网页中创建一个表单，其中放入一组复选框，HTML代码如下：
[插图]
如果需要使复选框处于选中或者不选状态，必须通过控制元素的checked属性来达到目的。如果属性checked的值为true，说明被选中；如果值为false，说明没被选中。因此可以基于这个属性来完成需求。
[插图]
全选操作就是当用户单击“全选”按钮时，需要将复选框组全部选中。此时，需要为“全选”按钮绑定单击事件，然后使用选择符寻找符合要求的复选框，最后通过attr()方法来设置属性checked的值，使之选中。jQuery代码如下：
[插图]
全不选操作，只需要将复选框的checked属性的值设置为false，就可以实现，jQuery代码如下：
[插图]
反选操作稍微有些复杂，需要循环每一个复选框进行设置，取它们值的反值，即如果是true，就设置为false；如果是false，就设置为true，此种情况下可以使用非运算符“!”。
使用下面的代码来实现反选操作：
[插图]
此处用jQuery的attr()方法来设置属性checked的有些复杂，如果改用JavaScript原生的DOM方法，将比创建jQuery对象更有效、简洁。
简化后的代码为如下：
[插图]
复选框被选中后，用户单击“提交”按钮，需要将选中的项的值输出。可以通过val()方法获取选中的值。jQuery代码如下：
[插图]
单击“提交”按钮后，显示效果如图5-8所示。
[插图]
此处不用按钮来控制复选框的全选与全不选，而用另一个复选框来控制，将按钮代码用一个复选框来代替，HTML代码如下：
[插图]
首先需要对另一个复选框控制，如图5-9所示。根据前面的功能代码，可以写出下面的代码：
[插图]
[插图]
进一步观察思考后发现，所有复选框的checked属性的值和控制全选的复选框的checked属性的值是相同的，因此可以省略if判断，直接赋值，代码如下：
[插图]
当单击id为“CheckedAll”的复选框后，复选框组将被选中。当在复选框组里取消某一个选项的选中状态时，id 为“CheckedAll”的复选框并没有被取消选中状态，而此时需要它和复选框组能够联系起来，即复选框组里如果有一个或者更多没选中时，则取消id为“CheckedAll”的复选框的选中状态；如果复选框组都被选中时，则 id为“CheckedAll”的复选框也自动被选中。
因此需要对复选框组进行操作，以通过它们来控制id为“CheckedAll”的复选框。具体实现思路如下。
（1）对复选框组绑定单击事件。
（2）定义一个flag变量，默认为true。
（3）循环复选框组，当有没被选中的项时，则把变量flag的值设置为false。
（4）根据变量flag的值来设置id为“CheckedAll”的复选框是否选中。
① 如果flag为true，说明复选框组都被选中。
② 如果flag为false，说明复选框组至少有一个未被选中。
根据以上的思路，可以写出如下jQuery代码：
[插图]
此时id为“CheckedAll”的复选框和复选框组就可以联动起来了，如图5-10所示。
除了上述的思路之外，也可以用下面的思路来实现。
（1）对复选框组绑定单击事件。
（2）判断复选框的总数是否与选中的复选框数量相等。
[插图]
（3）如果相等，则说明全选中了，id为“CheckedAll”的复选框应当处于选中状态，否则不选中。
根据提供的思路，可以写出如下jQuery代码：
[插图]
5.1.4 下拉框应用
下拉框有非常多的应用，这里也只选择其中一个常用、典型的应用来进行介绍。
图5-11是某网站的一个后台新增界面，在“负责频道”这个区域，用户可以通过中间的按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。
[插图]
首先在网页中增加一左一右两个下拉框，然后在它们下方分别加上几个功能按钮。
HTML代码如下：
[插图]
初始化后，网页效果如图5-12所示。
[插图]
需要实现的功能如下。
（1）将选中的选项添加给对方。
（2）将全部选项添加给对方。
（3）双击某个选项将其添加给对方。
首先实现第1个功能，即将下拉列表中被选中的选项添加给对方。
首先要获取下拉列表中被选中的选项，然后将当前下拉列表中选中的选项删除，最后将删除的选项添加给对方。
假设先将左边的选项添加到右边。jQuery代码如下：
[插图]
在前面的章节提到过，删除和追加这两个步骤可以用appendTo()方法直接完成，因此可以将上面代码简化如下：
[插图]
然后实现第2个功能，即将全部的选项添加给对方。
将全部的选项添加给对方和将选中的选项添加给对方之间的惟一区别就是获取的对象不同，因此只要稍微修改代码就可以实现，jQuery代码如下：
[插图]
最后实现第3个功能，即双击某个选项将其添加给对方。
首先给下拉列表绑定双击事件。
jQuery代码如下：
[插图]
然后可以通过 $(“option:selected”,this)方法来获取被选中的选项，这样就可以完成第3个功能了，jQuery代码如下：
[插图]
前面3个功能都是将左边的选项添加给右边，如果要将右边的选项添加给左边，代码也完全相同，此处不再赘述。最终效果如图5-13所示。
[插图]
5.1.5 表单验证
表单作为HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作用也是非常重要的，它能使表单更加灵活、美观和丰富。
以一个简单的用户注册为例。首先新建一个表单，HTML代码如下：
[插图]
显示效果如图5-14所示。
[插图]
在表单内class属性为“required”的文本框是必须填写的，因此需要将它与其他的非必须填写表单元素加以区别，即在文本框后面追加一个红色的小星星标识。可以使用append()方法来完成，代码如下：
[插图]
显示效果如图5-15所示。
[插图]
当用户在“用户名”文本框中填写完信息后，将光标的焦点从“用户名”移出时，需要即时判断用户名是否符合验证规则。当光标的焦点从“邮箱”文本框移出时，需要即时判断“邮箱”填写是否正确，因此需要给表单元素添加失去焦点事件，即blur。jQuery代码如下：
[插图]
验证表单元素步骤如下。
（1）判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理。
（2）如果是“用户名”，判断元素的值的长度是否小于6，如果小于6，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
（3）如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
（4）将提醒信息追加到当前元素的父元素的最后。
根据以上分析，可以写出如下jQuery代码：
[插图]
当连续几次输入错误的格式后，会出现图5-16所示的效果。
[插图]
由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用remove()方法来完成，代码如下：
[插图]
显示效果如图5-17所示。
[插图]
当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进行一次整体的验证。可以直接用trigger()方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果用户名和邮箱都不符合规则，那么就有两处错误，即有两个 class 为“onError”的元素，因此可以根据 class 为“onError”元素的长度来判断是否可以提交。如果长度为0，即true，说明已经可以提交了；如果长度大于0，即false，说明有错误，需要阻止表单提交。阻止表单提交可以直接用“returnfalse”语句。
根据上面的分析，可以在提交事件中写出如下jQuery代码：
[插图]
显示效果如图5-18所示。
[插图]
用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒输入是否正确？如果输入时就可以提醒，这样就可以更加即时了。
为了达到用户提出的需求，需要给表单元素绑定keyup事件和focus事件，keyup事件能在用户每次松开按键时触发，实现即时提醒；focus事件能在元素得到焦点的时候触发，也可以实现即时提醒。
代码如下：
[插图]
这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。
在前面的章节已经提过，trigger(“blur”)不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。而triggerHandler(“blur”)只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。
至此，表单验证过程就全部完成。读者可以根据自己的实际需求修改验证规则。