jQuery積累

一、判斷瀏覽器的類型

$(document).ready(function(){
    //Firefox 2 and above 
    if($.support.mozilla && $.support.vesion >= "1.8"){
         // you code
    }
    //Safari 
    if($.support.safari){
         // you code
    }
    //Chrome
    if($.support.chrome){
         // you code
    }
    //Opera
    if($.support.opera){
         // you code
    }
    //IE6 and below 
    if($.support.msie && $.support.vesion <= 6){
         // you code
    }
    //anything above IE6 
    if($.support.msie && $.support.vesion > 6){
         // you code
    }

});

jQuery 1.9 以前，官方使用$.browser檢測， 以後使用$.support

二、表單輸入（點擊文字小時，失去焦點文字又出現）

HTML: <input class="focus_on" type="text" value="用戶名" />
Js:

$(".focus_on").focus(function () {
    var check1 = $(this).val();
    if (check1 == this.defaultValue)
    {
        $(this).val("");
        $(this).css("color","#333");
    }
}).blur(function () {
    if($(this).val()==""){
        $(this).val(this.defaultValue);
        $(this).css("color","#b4b4b4");
    }

});

三、一個簡單的Tab切換

Js：

$(".qr-code-title ul li").hover(function(index) {
    var index = $(this).index();
    $(this).addClass("QR-title-on").siblings().removeClass("QR-title-on");
    $(".qr-code-img ul li").eq(index)
                           .addClass("qr-code-img-on")
                           .siblings().removeClass("qr-code-img-on");       
});

HTML：

<div class="qr-code">
    <div class="qr-code-title">
        <ul>
            <li class="QR-title-R QR-title-on">服務號</li>
            <li>訂閱號</li>
        </ul>
    </div>

    <div class="qr-code-img">
        <ul>
            <li class="qr-code-img-on">
                <img src="images/contact/official_QR_code.png" alt="服務號" />
                <p><strong>支持手機支付</strong></p>
            </li>
            <li>
                <img src="images/contact/Order_QR_code.png" alt="訂閱號" />
            </li>
        </ul>
    </div>
</div>

CSS：

.qr-code{
    width:100%;
    height:auto;
}
.qr-code-title{
    float:left;
    width:100%;
    height:24px;
}
.QR-title-R{border-right:solid 1px #e6e6e6;}

.qr-code-title ul li{
    float:left;
    width:59px;
    height:24px;
    line-height:24px;
    text-align:center;
    color:#666;
    background-color:#ebebeb;
    cursor:pointer;
}
.qr-code-title ul li.QR-title-on{
    color:#333;
    background-color:#fff;
}
.qr-code-img{
    float:left;
    width:102px;
    padding:8px;

}
.qr-code-img ul li{
    display:none;
    float:left;
    width:100%;
    height:auto;
}
.qr-code-img ul li.qr-code-img-on{display:block;}
.qr-code-img p{text-align:center;}
.qr-code-img img{width:100%;margin-bottom:10px;background-color:#fff;}

四、動態添加邊距

$(".contain-contain ul li").each(function(index) {
    if( index % 3 < 2 ){
        $(this).addClass("progressRmargin");
    }
});

 .progressRmargin{margin-right:40px;}

保證了除了第3列或3列的倍數不添加progressRmargin，適合3列的列表佈局

5.讓廣告條/菜單/DIV隨鼠標一塊兒滾動（無振動）

頁面上須要滾動的位置添加空的DIV標籤

<div class="header-float"></div> <!-- The header wrapper of float layout -->


//全局變量
var winTop = $(window).scrollTop();      //鼠標滾動的高度
var Is_show = false;

$(window).scroll(function(){
    winTop = $(window).scrollTop();     //鼠標滾動的高度
    nav_fixed();                        //主導航 跟隨鼠標 滾動
});

/*----------------- 主導航 跟隨鼠標 滾動 -----------------*/
function nav_fixed(){       

    //頂部菜單隨滾動一塊兒浮動
    var $offset2 = $(".header-float").offset();
    if( winTop > $offset2.top ){

        if( Is_show === false ){
            Is_show = true;
            $(".header").css({
                "position":"fixed",
                "_position":"absolute",
                "top":"-120px",
                "left":$offset2.left + "px",
                "z-index":"4000",
                "box-shadow":"0 1px 3px rgba(0,0,0,0.4)",
                "opacity":0,

            }).animate({
                "top":"0px",
                "opacity":1,
            },400);
        }
        else{

            $(".header").css({
                "top":"0px",
            });
        }

    }else{
        $('.header').removeAttr("style");
        Is_show = false;
    }            
};
/*----------------- 主導航 跟隨鼠標 滾動 end -----------------*/

六、廣告banner自動顯示並隱藏（增長從新打開按鈕切換）

JS：

/*---------------- 首頁事件廣告條 -----------------------*/
//頂部 廣告條事件 函數
function top_adv(){

    var adv_over = false; //判斷廣告條是否被關閉 , 默 認不關閉
    var adv_delay = 4000; //廣告顯示延遲4000ms
    var $event_open = $("#event-banner-open"); //打開廣告條按鈕
    var $event_close = $("#event-banner-colse"); //關閉廣告條按鈕
    var $event_wrap = $(".event-banner-wrap"); //廣告條容器
    var $nav = $(".nav"); //主屏幕nav內容部分容器
    var Width = $nav.width();
    var left = $nav.offset().left;

    //按鈕顯示位置
    $event_close.css({
        "left": Width + left  + 10
    });
    $event_open.css({
        "left": Width + left  + 10
    });

    //延時5s自動關閉
    $event_wrap.delay(adv_delay).slideUp(500,function(){
        adv_over = true;
        show_open_btn(adv_over);
    }); 
    //點擊關閉廣告條
    $event_close.click(function() {

        $event_wrap.stop(true,true).slideUp(400,function(){
            adv_over = true;
            show_open_btn(adv_over);
        });
    });
    //點擊從新打開廣告條
    $event_open.click(function() {
        adv_over = false;
        //console.log(adv_over);
        show_open_btn(adv_over);

    });

    //顯示打開廣告的按鈕 函數
    function show_open_btn(adv_over){

        if(adv_over){

            if( winW > 1050 ){
                $event_open.fadeIn(500);
            }
            else{
                $event_open.fadeOut(0);
            }
        }
        else{
            $event_open.fadeOut(100);
            $event_wrap.stop(true,true).slideDown(500);
        }   
    }

}
/*---------------- 事件廣告條 end -----------------------*/

HTML：

<!-- event-banner -->
<div class="event-banner-wrap">
    <div class="event-banner">
        <span id="event-banner-colse" class="hover-delay"></span>
            <img src="images/event/event_banner.jpg" alt="活動主題廣告條" />
    </div>
</div>
<div id="event-banner-open" class="hover-delay"></div>
<!-- event-banner end -->

CSS：

.event-banner-wrap{
    width:100%;
    height:auto;
    background-color:#f5b160;
}
.event-banner{
    width:1000px;
    height:auto;
    margin:0 auto;
}
.event-banner img{width:100%;z-index:1;}
#event-banner-colse,#event-banner-open{
    position:absolute;
    display:block;
    width:21px;
    height:21px;
    top:2px;
    /*right:-31px;*/
    z-index:100;
    background:#000 url(../images/close_adv.png) no-repeat center center;
    cursor:pointer;
    filter:alpha(opacity=20);
    opacity:0.2;
    -moz-opacity:0.2;
}

#event-banner-open{
    display:none;
    background:#000 url(../images/open_adv.png) no-repeat center center;
}

#event-banner-colse:hover, #event-banner-open:hover{
    filter:alpha(opacity=50);
    opacity:0.5;
    -moz-opacity:0.5;
}

七、檢測IE8或如下的瀏覽器，並提示更新（不少網站都用到）

JS：

$(document).ready(function() {

    /*---------------- 瀏覽器兼容性檢測 -----------------------*/
    //關閉兼容性提示
    var $cp_tips = $(".cp-tips"); //提示信息對象
    $(".cp-tips-close").click(function() {
        $cp_tips.stop(true,true).slideUp(400);
    });
    $cp_tips.delay(3000).slideUp(500); //延時3s自動關閉
});

HTML:

<!--[if lt IE 8]>
    <div class="cp-tips">
        <span class="cp-tips-close" title="關閉"></span>
        <p>已經有超過90%的用戶使用更高版本 <a target="_blank" title="下載Chrome" href="http://www.google.cn/intl/zh-CN/chrome/">Google Chrome</a> 或 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" title="下載最新版IE瀏覽器">Internet Explorer</a> 體驗到了更精彩的VIPABC，您還不試試？</p>
    </div>
<![endif]-->

CSS:

.cp-tips{
    width:1005;
    height:33px;
    line-height:33px;
    text-align:center;
    color:#960;
    background-color:#ffefc6;
}
.cp-tips-close{
    display:block;
    float:right;
    width:22px;
    height:22px;
    margin:5px;
    background:url(../images/close.png) no-repeat;
    cursor:pointer;
}
.cp-tips a{
    color:#f75c61;
    text-decoration:underline;
}