jQuery积累 - 快车库

1、判断浏览器的类型

$(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

2、表单输入（点击文字小时，失去焦点文字又出现）

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");
    }

});

3、一个简单的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;}

4、动态添加边距

$(".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 -----------------*/

6、广告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;
}

7、检测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;
}