tab 去掉 fonts 獲取字體 添加屬性 col div required color

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!="" && !/[email protected]+\.[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第五章 對表單、表格的操作知識點總結