jQuery（6）——jQuery对表单、表格的操作及更多应用

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

【表单应用】

一个表单有表单标签、表单域及表单按钮三个基本部分。

单行文本框应用：获取和失去焦点改变样式。

也可以用CSS中的伪类选择符来实现，但是IE6并不支持除超链接元素之外的:hover伪类选择符。css与jQuery的对比：

//css代码
input:focus ,textarea:focus{
    border:1px solid #f00;
    background:#fcc;
}

//jquery代码
$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
}).blur(function(){
        $(this).removeClass("focus");
    });
});

多行文本框应用

高度变化：height属性。实例

//HTML代码
<form>
    <div class="mag">
            <div class="msg_caption">
                <span class="bigger">放大</span>
                <span class="smaller">缩小</span>
            </div>
            <div>
                <textarea id="comment" rows="8" cols="20">
                    那段时间暗杀考虑出什么，数码快没声卡没看出来你才看空间CMCC吃快餐从搜客此时此刻村的村民时快捷哦玛卡我就出门了新款项目名称吗
                </textarea>
            </div>
        </div>
    </form>

//jquer代码
$(function () {
    var $comment=$('#comment');
    $('.bigger').click(function(){
        if (!$comment.is(":animated")) {
            if($comment.height()<300){
                $comment.animate({height:"+=50"},400);
            }
        }
    
    })

    $('.smaller').click(function(){
        if (!$comment.is(":animated")) {
            if($comment.height()>50){
                $comment.animate({height:"-=50"},400);
            }
        }
    
    });
});

滚动条高度变化如上，只不过控制的是scrollTop。

复选框应用：最基本的应用，就是对复选框进行全选、反选和全不选等操作。复选框处于选与不选的状态，必须通过checked属性来达到目的，checked的值为true，说明被选中，如果值为false，说明没被选中。

全选：用attr()方法来设置checked属性

$("#CheckedAll").click(function(){   //CheckAll为“全选”按钮的id
    $('[name=items]:checkbox').attr('checked',true);  //items为input的name，checkbox为input的type
});

全不选只需将复选框的checked属性设置为false。

反选：将checked属性的值取反，可以使用非运算符"!"。

$("CheckedRev").click(function(){   //CheckRev为“反选”按钮的id
    $('[name=items]:checkbox').each(function(){
        this.checked=!this.checked;
    });
});

下拉框应用：将选中选项添加给对方，将全部选项添加给对方，双击某个选项将其添加给对方。

表单验证：可以直接用trigger()方法来触发blur事件。keyup事件能在用户每次松开按键是触发，实现即时提醒。

【表格应用】

普通的隔行变色：

$(function(){
    $("tbody>tr:odd").addClass("odd");    //给tbody中的奇数行添加样式
    $("tbody>tr:even").addClass("even");  //给tbody中的偶数行添加样式
})
//其中addClass()中的odd和even是css样式，选择器中的索引是从0开始的，因此第一行是偶数

将某一行变为高亮状态：使用contains选择器来实现。

单选框控制表格行高亮

复选框控制表格行亮高：

表格展开关闭：

$(function(){
    $('tr.parent').click(function(){   //获取所谓的父行
        $(this)
        .toggleClass("selected")         //添加 /删除高亮 
        .silbings('.child_'+this.id).toggle();   //隐藏/显示所谓的子行
    });
});

表格内容筛选：利用contains选择器并结合filter()的筛选方法，可以实现表格内容的过滤。

//筛选文本中含有“李”的表格行
$(function(){
    $("table tbody tr").hide()
        filter(":contains('李')").show();
});

【其他应用】

（1）改变网页字体大小；

（2）网页选项卡；

（3）网页换肤。