Jquery对表单、表格的操作以及应用

表单的应用

（1）表单标签：包含处理表单数据所用的服务器端程序ＵＲＬ以及数据提交到服务器的方法

（２）表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框

（３）表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

５.１．１单行文本框

获取和失去焦点改变样式

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。
for id 规定 label 绑定到哪个表单元素。
form formid 规定 label 字段所属的一个或多个表单。

<script>
    $(function () {
        $("input").focus(function () {
            $(this).addClass("focus");
        }).blur(function () {
            $(this).removeClass("focus");
        })
    })
</script>
聚焦是改变，不聚焦时则恢复原样

５.１.２多行文本框的应用
高度变化：改变评论框的大小

<script>
    $(function () {
        var $comment=$("#comment");
        $(".bigger").click(function () {
            if ($comment.height()<500){
                $comment.height($comment.height()+50);
            }
        });
        $(".smaller").click(function () {
            if ($comment.height()>50){
                $comment.height($comment.height()-50);
            }
        })
    })
</script>
使用动画进行控制高度

<script>
    $(function () {
        var $comment=$("#comment");
        $(".bigger").click(function () {
            if ($comment.height()<500){
                $comment.animate({height:"+=50"},400);
            }
        });
        $(".smaller").click(function () {
            if ($comment.height()>50){
                $comment.animate({height:"-=50"},400);
            }
        })
    })
</script>

２滚动条的高度变化scrollTop 方法

对于多行文本框，还可以通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。

{ scrollTop：“50px”}

5.1.3复选框应用

基本：就是对复选框进行全选、反选、和反全选等操作

如果需要使复选框处于选中或者不选中的状态，必须通过控制元素的checked属性来达到目的；

如果属性checked的值为true，说明被选中，如果值为false，说明没被选中。

$（'[name=item]:checkbox'）.attr('checked',true);   //全选

$（'[name=item]:checkbox'）.attr('checked',false);   //全不选

5.1.4 下拉框应用

dbclick()方法   双击实现

5.1.5 表单验证

5.2表格应用

1.普通的隔行变色

$("tr:odd").addClass("odd");//给奇数行添加样式

$("tr:even").addClass("even");//给偶数行添加样式    索引是从0开始的  故第一行是偶数

为了排除表头<thead>中的<tr>,将选择符改为

$(function(){

　　$("tbody>tr:odd").addClass("odd");

　　$("tbody>tr:even").addClass("even");

})

若需要将某一行进行修饰，可以使用contains选择器实现：

$("tr:contains("王五")").addClass("selected");

单选框控制表格行高亮

当单击某一行后，此行被选中高亮显示，并且单选框被选中。实现步骤：

（1）为表格行添加单击事件

（2）给单击的当前行添加高亮样式，然后将它的兄弟行的高亮样式去掉，最后将当前行里的单选框设置为选中。

注意使用完sibling之后需要使用end（）方法，才可以重新返回$(this)对象

find() 方法返回被选元素的后代元素。

后代是子、孙、曾孙，依此类推

(this).find(":radio").attr("checked",true);

注意：

$(‘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复选框控制行亮高

复选框能控制多行变色，并没有数量限制。当单击某行时，如果已经高亮了，则移除高亮样式并去掉当前行复选框选中状态；如果还没有高亮，则添加该样式，将当前行的复选框选中；

判断是否高亮，可以使用hasClass（）方法来完成。

$(this).find(':checkbox').attr("checked",true);

5.2.2表格展开关闭

$(this).toggleClass("selected")//增加、删除高亮

.siblings('.child_'+this.id).toggle();  //隐藏、显示所谓的子行

5.2.3 表格内容的筛选

filter（）方法和contains选择器//能匹配包含指定的文本元素    相结合

filter（“：contains（李）”）.show();

为文本框绑定keyup事件：

$(function(){

$("filterName").keyup(function(){})

})

注意表单元素有个特点，就是刷新网页，其值会保持不变。但是表格的内容已经被刷新了

为了解决这个问题，只需要在DOM刚加载完时，为表单元素绑定事件并且立即触发该事件即可

$(function(){

$("#filterName").keyup(fucntion(){

　　$("table tbody tr").hide().filter(":contains('"+(this).val()+"')").show();

}).keyup;     //DOM加载完成时，绑定事件完成后立即触发

})；

当网页刷新后会立即执行id为“”filternName“”的keyup事件，因此表格内容会保持刚筛选出来的结果

5.3.1网页字体的大小

5.3.2网页选项卡

5.3.3网页换肤