jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用

1 表单应用

一个表单有3个基本组成部分。

(1) 表单标签：包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法

(2) 表单域：包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和

文件上传框等

(3) 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消

传送，还可以用来控制其他定义处理脚本的处理工作。

1 单行文本框应用

jQuery代码如下：6.1.1.html

2 多行文本框应用

1. 高度变化

jQuery代码如下：6.1.2.1.html

2. 滚动条高度变化

在多行文本中，还有另外一个应用，就是通过控制多行文本框的滚动条的变化，使

文本框里的内容滚动。

jQuery代码如下：6.1.2.2.html

3 复选框应用

对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。

jQuery代码如下：6.1.3.html

4 下拉框的应用

jQuery代码如下：6.1.4.html

5 表单验证

jQuery代码如下：6.1.5.html

2 表格应用

1 表格变色

1. 普通的各行变色

jQuery代码如下：6.2.1.1.html

2. 单选框控制表格行高亮

jQuery代码如下：6.2.1.2.html

代码中的$('table :radio:checked').parent().parent().addClass('selected');

是通过parent()方法逐步向父节点获取相应的元素的，也可以使用parents()方法

直接获取。

$('table :radio:checked').parents('tr').addClass('selected');

此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的<tr>行将

被高亮显示：$('tbody>tr:has(:checked)').addClass('selected');

3. 复选框控制表格行高亮

jQuery代码如下：6.2.1.3.html

在代码$(this)[hasSelected ? "removeClass" : "addClass"]('selected')中：

[hasSelected ? "removeClass" : "addClass"]这是一个三元运算符，结果为：

"removeClass"或者是"addClass"。因此

$(this)[hasSelected ? "removeClass" : "addClass"]('selected')其实代表这

两种情况

$(this)["removeClass"]('selected');

或者是$(this)["addClass"]('selected');

它等价于：

$(this).removeClass('selected');

或者是$(this).addClass('selected');

2 表格展开关闭

jQuery代码如下：6.2.2.html

3 表格内容筛选

jQuery代码如下：6.2.3.html

3 其他应用

1 网页字体大小

jQuery代码如下：6.3.1.html

2 网页选项卡

jQuery代码如下：6.3.2.html

3 网页换肤

jQuery代码如下：6.3.2.html