锋利的jQuery第五章对表单、表格的操作知识点总结

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

5.1表单应用

5.1.1、单行文本框应用：为文本框添加获取和失去焦点事件

css代码：

.focus { 
     border: 1px solid #f00;
     background: #fcc;

jQuery代码：

$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
        if($(this).val()==this.defaultValue){//默认值
            $(this).val("");
        }
    }).blur(function(){
        $(this).removeClass("focus");
        if($(this).val()==""){
            $(this).val(this.defaultValue);
        }
    });
})

5.1.2：多行文本框的应用

1.高度变化

jQuery代码：

$(function(){
    var comment = $('#comment');//获取评论框
    $(".bigger").click(function(){//放大按钮单击事件
        if(!comment.is(":animated")){//判断是否处于动画
            if(comment.height()<500){
                //comment.height(comment.height()+50);//立即加高 50 
                //comment.animate({height:"+=50"}, 1000);//加入自定义动画，缓慢加高 50
                comment.animate({scrollTop:"-=50"},1000);//滚动条高度
            }
        }
    });
    $(".smaller").click(function(){
        if(!comment.is(":animated")){
            if(comment.height() >50){
                //comment.height(comment.height()-50);//直接减50
                //comment.animate({height:"-=50"}, 1000);//加入动画，缓慢减50
                comment.animate({scrollTop:"+=50"},1000);//滚动条向下高度
            }
        }
    });
}）

2.复选框应用：

按钮选择的JQuery代码：

//全选
    $("#CheckedAll").click(function(){
        //$('[name=items]:checkbox').attr('checked',true);
        $('[name=items]:checkbox').prop('checked',true);
    });
    //全不选
    $("#CheckedNo").click(function(){
        //$('[name=items]:checkbox').attr('checked',false);
        $('[name=items]:checkbox').prop('checked',false);
    });
    //反选
    $("#CheckedRev").click(function(){
        $('[name=items]:checkbox').each(function(){
            //$(this).attr("checked",!$(this).attr("checked"));
            this.checked=!this.checked;//直接使用JS原生代码，简单实用
        });
    });
    //输出值
    $("#send").click(function(){
        var str="你选中的是:\r\n";
        $('[type=checkbox]:checkbox:checked').each(function(){
            str += $(this).val()+"\r\n";
        });
        alert(str);
    });
}）

复选框控制的jQuery代码：

//全选复选框
    $("#CheckedAll1").click(function(){
        //if(this.checked){
        //    $('[name=items]:checkbox').attr('checked',true);
        //}else{
        //    $('[name=items]:checkbox').attr('checked',false);
        //}
        $('[name=items]:checkbox').attr('checked',this.checked);
        
    });

    //全选复选框的联动第一种方法
    $("[name=items]:checkbox").click(function(){
        var flag=true;
        $("[name=items]:checkbox").each(function(){
            if(!this.checked){
                flag=false;
            }
        });
        if(flag){
            $("#CheckedAll1").attr("checked",true);
        }else{
            $("#CheckedAll1").attr("checked",false);
        }
    });

//全选复选框的联动第二种方法
    $("[name=items]:checkbox").click(function(){
        var tmp=$('[name=items]:checkbox');
        $("#CheckedAll1").attr('checked',tmp.length == tmp.filter(':checked').length);
        $("#CheckedAll1").prop('checked',tmp.length == tmp.filter(':checked').length);
    });

    //输出值
    $("#send1").click(function(){
        var str="你选中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str += $(this).val() +"\r\n";
        });
        alert(str);
//attr() 变成  prop()
//第一个原则：只添加属性名称该属性就会生效
//第二个原则：只存在true/false的属性
    });
})

5.1.4、下拉框应用

选中的添加到右边或者左边：

$(function(){
//将左边的添加到右边
    $('#add').click(function(){
        var options= $('#select1 option:selected');
        options.appendTo('#select2');
        //var remove = options.remove();
        //remove.appendTo('#select2');
    });
//将全部的添加到右边
    $('#add_all').click(function(){
        $('#select1 option').appendTo('#select2');        
    });
//双击添加到右边
    $('#select1').dblclick(function(){
        $("option:selected",this).appendTo('#select2');
    });
//将右边的删除到左边
    $('#remove').click(function(){
        $('#select2 option:selected').appendTo('#select1');
    });
//将全部删除到左边
    $('#remove_all').click(function(){
        $('#select2 option').appendTo('#select1');
    });
//双击添加到左边
    $('#select2').dblclick(function(){
        $('option:selected',this).appendTo('#select1');
    });
})

5.1.5、表单验证：

$(function(){
    $("form :input.required").each(function(){
        $(this).parent().append($("<strong class='high'>*</strong>"));
    });
    $("form :input").blur(function(){
        var parent = $(this).parent();
        parent.find(".formtips").remove();
        //验证用户名
        if($(this).is('#username')){
            if(this.value=="" || this.value.length < 6){
                var errorMsg = '请输入至少六位的用户名.';
                parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else{
                var okMsg = '输入正确.';
                parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
            }
        }
        //验证邮箱
        if($(this).is('#Email')){
            if(this.value==""||(this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                var errorMsg = '请输入正确的E-Mail地址.';
                parent.append('<span class="formtips onError">'+errorMsg+'</span>');
            }else{
                var okMsg = '输入正确.';
                parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
            }
        }
    }).keyup(function(){
        $(this).triggerHandler("blur");
    }).focus(function(){
        $(this).triggerHandler("blur");
    });
    //最终验证
    $('#send').click(function(){
        $("form .required:input").trigger('blur');
        var numError = $('form .onError').length;
        if(numError){
            return false;
        }
        alert("注册成功,密码已发到你的邮箱,请查收.");
    });
    //重置
    $("#res").click(function(){
        $(".formtips").remove();
    });
});

5.2 表格应用

1.表格变色-radio单选的

$(function(){
    $("tbody>tr:odd").addClass("odd");//给奇数行添加样式
    $("tbody>tr:even").addClass("even");//给偶数行添加样式    
    //$("tr:contains('王五')").addClass("selected");//添加高亮模式
    $("tbody>tr").click(function(){
        $(this).addClass('selected')
               .siblings().removeClass('selected')
               .end()
               .find(':radio').attr('checked',true);
    });
    //$('table :radio:checked').parents().parents().addClass('selected');
    //$('table :radio:checked').parents("tr").addClass('selected');//parents().parents()简化成parents("tr")
    $("tbody>tr:has(:checked)").addClass('selected');  // parents通过has选择器简化
})

表格变色-复选框高亮模式

$(function(){
    $("tbody>tr:odd").addClass("odd");//给奇数行添加样式
    $("tbody>tr:even").addClass("even");//给偶数行添加样式    
//为选中行添加高亮模式1    
//    $('tbody>tr').click(function(){
//        if($(this).hasClass('selected')){
//            $(this).removeClass('selected')
//                   .find(':checkbox').attr('checked',false);
//        }else{
//            $(this).addClass('selected')
//                   .find(':checkbox').attr('checked',true);
//        }
//    });
//为选中行添加高亮模式简写
    $("tbody>tr").click(function(){
        var hasSelected=$(this).hasClass('selected');
        $(this)[hasSelected?"removeClass":"addClass"]('selected')
            .find(":checkbox").attr("checked",!hasSelected);
    });
    $('tbody>tr:has(:checked)').addClass('selected');        
})

2.表格的展开关闭

$(function(){
    $('tr.parent').click(function(){
        $(this).toggleClass("selected")//添加高亮模式
            .siblings('.child_'+this.id).toggle();//隐藏/显示子行
    }).click();    
$("tr:contains('王五')").addClass("selected");//contains选择器，能匹配包含指定文本的元素
})

3.表格的内容筛选

$(function(){
    $("#filterName").keyup(function(){
        $("table tbody tr").hide()
            .filter(":contains('"+($(this).val())+"')").show();
    }).keyup();
//    $("table tbody tr")
//        .hide()
//        .filter(":contains('湖南长沙')")
//        .show();        
})

5.3 其他应用

1.网页字体大小

$(function(){
    $("span").click(function(){
        var thisEle = $("#para").css("font-size");//获取字体大小
        var textFontSize = parseInt(thisEle,10);//去掉单位px
        var unit = thisEle.slice(-2);//获取单位px
        var cName = $(this).attr("class");//获取当前属性
        if(cName == "bigger"){   //赋值
            if(textFontSize <=22){
                textFontSize += 2;
            }
        }else if(cName == "smaller"){
            if(textFontSize >=12){
                textFontSize -= 2;
            }
        }
        $("#para").css("font-size", textFontSize + unit);        //添加新字体+单位
    });    
});

2.网页选项卡

$(function(){
    var div_li = $("div.tab_menu ul li");
    div_li.click(function(){
        $(this).addClass("selected")
            .siblings().removeClass("selected");
        var index = div_li.index(this);
        $("div.tab_box > div")
            .eq(index).show()
            .siblings().hide();
    }).hover(function(){//鼠标滑入滑出事件
        $(this).addClass("hover");
    },function(){
        $(this).removeClass("hover");
    });
});

3.网页换肤

方法一：

$(function(){
    $("#skin li").click(function(){
        $("#"+this.id).addClass("selected")
            .siblings().removeClass("selected");
        $("#cssfile").attr("href","css/"+this.id+".css");//改变href属性设置不同的值
        $.cookie("MyCssSkin",this.id,{path:'/',expires:10});//计入cookie
    });
    var cookie_skin = $.cookie("MyCssSkin");
    if(cookie_skin){
        $("#"+cookie_skin).addClass("selected").siblings.removeClass("selected");
        $("#cssfile").attr("href","css/"+ cookie_skin +".css");
        $.cookie("MyCssSkin" , cookie_skin , {path: '/',expires:10});
    }
});

方法二：

$(function(){
    var li = $("#skin li");
    li.click(function(){
        switchSkin(this.id);
    });
    var cookie_skin = $.cookie("MyCssSkin");
    if(cookie_skin){
        switchSkin(cookie_skin);
    }
});
function switchSkin(skinName){
    $("#"+skinName).addClass("selected").siblings.removeClass("selected");
    $("#cssfile").attr("href","css/"+ skinName +".css");
    $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
}

$(function(){var li = $("#skin li");li.click(function(){switchSkin(this.id);});var cookie_skin = $.cookie("MyCssSkin");if(cookie_skin){switchSkin(cookie_skin);}});function switchSkin(skinName){$("#"+skinName).addClass("selected").siblings.removeClass("selected");$("#cssfile").attr("href","css/"+ skinName +".css");$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });}

锋利的jQuery第五章 对表单、表格的操作知识点总结

猜你喜欢

锋利的jQuery第五章对表单、表格的操作知识点总结