鏈式呼叫
- jQuery物件呼叫任何方法(除了節點關系方法)執行完后,方法都會有一個回傳值,回傳值就是jQuery物件自己,這個現象給我們提供了便利,可以對執行結果繼續打點呼叫jQuery的方法和屬性，即——可以使用jQuery物件進行連續打點呼叫
console.log($(this).css("background-color", "pink").html("hello"));
jQuery物件呼叫除了節點關系的方法之外，其他的方法執行后，回傳值就是物件自己，可以繼續鏈式呼叫其他的jQuery物件的方法和屬性，這樣可以達到簡化代碼書寫
一個小案例
? 點擊一個元素，使它自己變粉色，兄弟變黃色，其父級變藍色，父級的兄弟變色，父級的兄弟的自己變橘色
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 60px;
border: 1px solid #000;
margin-top: 2px;
}
.box p,.box h2 {
float: left;
width: 60px;
height: 60px;
margin-right: 20px;
background-color: rgb(164, 247, 233);
}
</style>
<!------------------------------------------------------------------->
<body>
<div >
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div >
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div >
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div >
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<script src="https://www.cnblogs.com/dreamtown/jq/jquery-1.12.4.min.js"></script>
<script>
var $p = $("p");
var $box = $(".box")
$p.click(function () {
// 鏈式呼叫實作
$(this).css("background-color","pink") //自己變粉色
.siblings().css("background-color","yellow") //自己的兄弟變黃色
.parent().css("background-color","skyblue") //并且自己的父級變藍色 .siblings().css("background-color","lightgreen") //父級的兄弟跟著變成淺綠色
.children().css("background-color","orange") //父級的兄弟的自己變橘色
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270861.html
標籤：jQuery
上一篇：jQuery關系查找方法