技術標籤：jQueryjquery

目錄

• • 1. jQuery 鏈式程式設計
  • 2. end() 方法

1. jQuery 鏈式程式設計

由於 jQuery 物件的大多數方法返回值依然是該物件，所以可以鏈式的呼叫該物件的方法。

如果方法返回的不是該物件，則無法繼續進行鏈式的呼叫方法。

<div class="box"></div>

<script>
    $(".box").attr("id", "jethro").text("text文字"
 
).html("html文字");
</script>

2. end() 方法

在鏈式程式設計中，end() 方法可以回到最近的一個修改性質的操作之前，並恢復至之前的狀態。

<style>
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #4d90fe;
    }

    p {
        width: 100%;
        height: 100%;
    }
</style>
 


<div class="box"></div>
<div class="box"></div>
<div class="box">
    <p></p>
</div>

<script>
    console.log($(".box").attr("id", "jethro").find("p").end().css("background"
 
, "#e94242"));
</script>

原來選擇器選中的元素有 3 個，呼叫 find() 方法後選中的元素變為了一個。

end() 方法幹掉了 find()，並且讓選中的元素恢復至 find() 之前選中三個的狀態。

所以最終是三個 div 被設定成了紅色背景，結果如下：