快捷導(dǎo)航

實(shí)例詳解jQuery的鏈?zhǔn)骄幊田L(fēng)格

更新時(shí)間：2021年06月02日 08:53:33 作者：Erudite

jQuery中的鏈?zhǔn)讲僮?，它讓代碼變得更有層次更簡(jiǎn)潔，所以這篇文章主要給大家介紹了關(guān)于jQuery鏈?zhǔn)骄幊田L(fēng)格的相關(guān)資料,需要的朋友可以參考下

鏈?zhǔn)骄幊痰膶?shí)現(xiàn)原理

jQuery可以讓我們開發(fā)者一直使用點(diǎn)語(yǔ)法調(diào)用自身方法的原理，主要原因是jQuery內(nèi)部利用了js的對(duì)象來(lái)實(shí)現(xiàn)。

在jQuery中，如果一直對(duì)同一個(gè)元素或元素的其他關(guān)系元素（兄弟元素，父子元素）進(jìn)行操作，那么可以使用 .語(yǔ)法(點(diǎn)語(yǔ)法)，一直寫下去。

$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");

可以寫成：

$("#box").css("background", "pink").siblings().css("background", "red");

實(shí)現(xiàn)鏈?zhǔn)骄幊蘪Query選擇器本身是一個(gè)jquery對(duì)象。jQuery內(nèi)部利用this返回了自己本身。

    //js中，聲明一個(gè)對(duì)象
       var obj = {  
         name:"姓名", 
        desc: function(){   
        console.log(this); // 打印當(dāng)前自身對(duì)象  
        console.log(this.name); // 調(diào)用自身對(duì)象的屬性   
        return this;  // 實(shí)現(xiàn)鏈?zhǔn)骄幊痰脑?，就是在調(diào)用方法后，方法本身返回對(duì)象。
},  
      read: function(){  
        console.log("hello!");    
        return this; 
    }}

jQuery的鏈?zhǔn)骄幊田L(fēng)格實(shí)例

首先本人通過(guò)一個(gè)案例來(lái)展示jQuery的鏈?zhǔn)骄幊田L(fēng)格。先寫一個(gè)頁(yè)面，展示一個(gè)列表，代碼如下：

<body>
    <div>
        <ul class="menu">
            <li class="level1">
                <a href="#">水果</a>
                <ul class="level2">
                    <li><a href="#">蘋果</a></li>
                    <li><a href="#">菠蘿</a></li>
                    <li><a href="#">香瓜</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">主食</a>
                <ul class="level2">
                    <li><a href="#">面條</a></li>
                    <li><a href="#">饅頭</a></li>
                    <li><a href="#">米飯</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    $(function() {
        $(".level1 > a").click(function() {
            $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide();
            return false;
        });
    });
</script>

代碼執(zhí)行后的效果如下圖所示：

上述代碼的擴(kuò)展效果就是通過(guò)jQuery的鏈?zhǔn)讲僮鲗?shí)現(xiàn)的，所有增加current類的操作、查詢子元素的方法調(diào)用、動(dòng)畫方法的調(diào)用等都是對(duì)同一個(gè)元素進(jìn)行的，所以在開始獲取到一個(gè)jQuery對(duì)象后，后面的所有方法、屬性的調(diào)用都通過(guò) “.” 進(jìn)行連續(xù)調(diào)用即可，這種模式就是鏈?zhǔn)讲僮鳌?/p>

為了增加代碼的可讀性和可維護(hù)性，我們將上面的鏈?zhǔn)酱a格式的修改如下：

<script type="text/javascript">
    $(function() {
        $(".level1 > a").click(function() {
            // 給當(dāng)前的元素添加current樣式
            $(this).addClass("current")
                // 下一個(gè)元素顯示
                .next().show()
                // 父元素的同輩元素的子元素a移除current樣式
                .parent.siblings().children("a").removeClass("current")
                // 他們的下一個(gè)元素隱藏
                .next().hide();
            return false;
        });
    });
</script>

經(jīng)過(guò)規(guī)范格式的調(diào)整后，增加了代碼的易讀性，更加方便后期的維護(hù)。

與此同時(shí)，我們對(duì)于同一個(gè)jQuery對(duì)象進(jìn)行鏈?zhǔn)讲僮鲿r(shí)，主要遵循下面3條格式規(guī)范。

（1）對(duì)于同一個(gè)對(duì)象不超過(guò)3個(gè)操作，可以直接寫成一行，代碼如下：

<script type="text/javascript">
    $(function() {
        $("li").show().unbind("click");
    });
</script>

（2）對(duì)于同一個(gè)對(duì)象的較多操作，建議每行寫一個(gè)操作，代碼如下：

<script type="text/javascript">
    $(function() {
        $(this).removeClass("mouseout")
            .addClass("mouseover")
            .stop()
            .fadeTo("fast", 0.5)
            .fadeTo("fast", 1)
            .unbind("click")
            .click(function() {
                .......
            });
    });
</script>

（3）對(duì)于多個(gè)對(duì)象的少量操作，可以每個(gè)對(duì)象寫一行，如果涉及子元素，可以考慮適當(dāng)?shù)目s進(jìn)。代碼如下：

<script type="text/javascript">
    $(function() {
        $(this).addClass("highLight")
            .children("a").show().end()
            .siblings().removeClass("highLight")
            .children("a").hide();
    });
</script>

以上就是有關(guān)jQuery的鏈?zhǔn)骄幊田L(fēng)格。