jQuery：一些js常用動效

weixin_34378969發表於2018-03-16
jQueryJS

目錄：
1：全選/反選
2：tab 切換
3：下拉選單
4：圖片輪播
5：吸頂效果
6：回到頂部
7：彈出框

1：全選/反選
如果你有JS效能潔癖的話，顯然prop的效能更高，因為attr需要訪問DOM屬性節點，訪問DOM是最耗時的。這種情況適用於多選項全選和反選的情況。

大家都知道有的瀏覽器只要寫disabled，checked就可以了，而有的要寫成disabled ="disabled"，checked="checked"，比如用attr("checked")獲取checkbox的checked屬性時選中的時候可以取到值,值為"checked"但沒選中獲取值就是undefined

jq提供新的方法“prop”來獲取這些屬性，就是來解決這個問題的，以前我們使用attr獲取checked屬性時返回"checked"和"",現在使用prop方法獲取屬性則統一返回true和false。

那麼，什麼時候使用attr，什麼時候使用prop？？
1.新增屬性名稱該屬性就會生效應該使用prop.
2.是有true,false兩個屬性使用prop.
3.其他則使用attr

$(function() {
                $("#all").click(function() {
                    if ($("#all").prop("checked")) {
                        $(".list li input").prop("checked",true);
                        $("#content").html("反選")
                    } else {
                        $(".list li input").prop("checked",false);
                        $("#content").html("全選")
                    }
                });
                
//              $("input").each(function(index,item) {
//                  console.info(index)
//                  console.info(item)
//              })

                
            });
            
        </script>
    </head>
    <body>
        <input type="checkbox" name="" id="all" value="" checked="true" /><span id="content">全選</span>
        <ul class="list">
            <li><input type="checkbox"  />讀書</li>
            <li><input type="checkbox"  />讀書</li>
            <li><input type="checkbox"  />讀書</li>
            <li><input type="checkbox"  />讀書</li>
        </ul>
    </body>

2：tab 切換
要設定display 另外要找關係，精確的找到要切換的子元素
否則可能會串位

   .main-list-content>ul{
                display: none;
           }
           .main-list-content>ul:nth-child(1){
             display: block;
           } 
                $(".main-list>ul>li").mouseenter(function(){
                        $(this).css("background","#558183").siblings().css("background","#91BEDC")
                        $(this).parent().children().eq(4).css("background","white")
                        $(this).parent().parent().siblings().children().eq($(this).index()).show().siblings().hide();
                        
                })

3：下拉選單
要用到絕對定位和相對定位
父級元素相對定位，現有元素絕對定位才會脫離DOM層，產生效果

註釋掉的那種方法容易產生動畫時延，所以用了hover效果

    $(function() {
//          $("#menu_bar>dl.menu").mouseenter(function() {
//              $(this).children("dd").show();
//          });
//          
//          $("#menu_bar>dl.menu").mouseleave(function() {
//              $(this).children("dd").hide();
//          })

//          $("#menu_bar>dl.menu").mouseenter(function() {
//              $(this).children("dd").show();
//          }).mouseleave(function() {
//              $(this).children("dd").hide();
//          })
            
            $("#menu_bar>dl.menu").hover(function() {
                $(this).children("dd").show();
            },function() {
                $(this).children("dd").hide();
            })

            // $("#menu_bar>dl.menu").hover(function() {
            //  $(this).children("dd").stop().slideToggle(200);
            // });
    
            
        });

4：圖片輪播

3317466-a4cc071990187d7e.png
圖片.png

寫這個的時候，出了一點小問題，就是下拉選單被圖片輪播遮擋，用
z-index來控制絕對定位的優先順序。

 //圖片輪播
                 var index = 0;
                 var time;
                 //邊界控制，顯示隱藏
                 function change(){
                    if(index >= $(".top-img>ul>li").length){
                        index = 0;
                    }
                    if(index < 0){
                        index = $(".top-img>ul>li").length-1;
                    }
                    // 進行圖片切換
                    $(".top-img>ul>li").eq(index).show().siblings().hide()
                    //對小點進行顏色變換 
                    //方式1
//                  $(".top-img>ol>li").eq(index).css("background","#008B8B").siblings().css("background","white")
                    //方式2
                    $(".top-img>ol>li").eq(index).addClass("active").siblings().removeClass("active")
                 }
                 //切換
                 function make(){
                    time = setInterval(function(){
                        index++
                        change()
                    },2000)
                 }
                 
                 make()
                 //按左右點選時需要先清除掉輪播效果，變換圖片，然後重新輪播效果
                 function remake(){
                    clearInterval(time)
                    change()
                    make()
                 }
                 
                 //左右點選切換
                 $(".top-img .left").click(function(){
                    index++;
                    change()
                    remake()
                 })
                 
                  $(".top-img .right").click(function(){
                    index--;
                    change()
                    remake()
                 })
                  
                  //點選小點進行切換
                  $(".top-img ol li").click(function(){
                    index = $(this).index()
                    remake()
                  })
                 
            });

5：吸頂效果

$(function() {
                // offset().top獲取當前標籤距離父級的頂部的距離
                var height = $(".target").offset().top;
                console.info(height)
                $(window).scroll(function() {
                    // 獲取滾動條的高度
//                  console.log($(window).scrollTop()
                    if ($(window).scrollTop()>= height) {
                        $(".target").css({
                            "position":"fixed",
                            "top": 0
                        }) 
                    } else {
                        $(".target").css("position","static")   
                    }
                    
                })
            });

7：彈出框

    <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
        <script>
            $(function() {
                $("#closed").on("click",function() {
                    $("#model").hide();
                    $("#box").hide();
                });
                
                $("#model").click(function() {
                    $("#model").hide();
                    $("#box").hide();
                })
            })
            
            function openWindow() {
                $("#model").show();
                $("#box").show();
            }
            
            
            
        </script>
    </head>
    <body>
        <button onclick="openWindow()">彈出框</button>
        阿士大夫撒旦
        
        
        <div id="box">
            <span id="closed">
                X
            </span>
            這個是一個彈出框
        </div>
        <div id="model">
            
        </div>
        
    </body>

相關文章