詳解jQuery 鏈?zhǔn)秸{(diào)用
鏈?zhǔn)秸{(diào)用
jQuery對(duì)象調(diào)用任何方法(除了節(jié)點(diǎn)關(guān)系方法)執(zhí)行完后,方法都會(huì)有一個(gè)返回值,返回值就是jQuery對(duì)象自己,這個(gè)現(xiàn)象給我們提供了便利,可以對(duì)執(zhí)行結(jié)果繼續(xù)打點(diǎn)調(diào)用jQuery的方法和屬性。即——可以使用jQuery對(duì)象進(jìn)行連續(xù)打點(diǎn)調(diào)用
console.log($(this).css("background-color", "pink").html("hello"));
jQuery對(duì)象調(diào)用除了節(jié)點(diǎn)關(guān)系的方法之外，其他的方法執(zhí)行后，返回值就是對(duì)象自己，可以繼續(xù)鏈?zhǔn)秸{(diào)用其他的jQuery對(duì)象的方法和屬性。這樣可以達(dá)到簡(jiǎn)化代碼書(shū)寫(xiě)
一個(gè)小案例
點(diǎn)擊一個(gè)元素，使它自己變粉色，兄弟變黃色，其父級(jí)變藍(lán)色，父級(jí)的兄弟變色，父級(jí)的兄弟的自己變橘色
<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 class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $p = $("p");
var $box = $(".box")
$p.click(function () {
// 鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)
$(this).css("background-color","pink") //自己變粉色
.siblings().css("background-color","yellow") //自己的兄弟變黃色
.parent().css("background-color","skyblue") //并且自己的父級(jí)變藍(lán)色 .siblings().css("background-color","lightgreen") //父級(jí)的兄弟跟著變成淺綠色
.children().css("background-color","orange") //父級(jí)的兄弟的自己變橘色
})
以上就是詳解jQuery 鏈?zhǔn)秸{(diào)用的詳細(xì)內(nèi)容，更多關(guān)于jQuery 鏈?zhǔn)秸{(diào)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
由于很多知識(shí)都已經(jīng)做了詳細(xì)介紹，本節(jié)只介紹需要修改的代碼，使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù)，web.xml、后臺(tái)的servet都不用改2011-10-10
IDEA配置jQuery, $符號(hào)不再顯示黃色波浪線的問(wèn)題
這篇文章主要介紹了IDEA配置jQuery, $符號(hào)不再顯示黃色波浪線的問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10
jquery獲取子節(jié)點(diǎn)和父節(jié)點(diǎn)的示例代碼
獲取子節(jié)點(diǎn)和父節(jié)點(diǎn)的方法有很多，在本文為大家詳細(xì)介紹下jquery中時(shí)如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
基于jQuery的固定表格頭部的代碼(IE6,7,8測(cè)試通過(guò))
目前只能算個(gè)不完整的腳本，不過(guò)一般的僅僅需要表頭凍結(jié)就可以使用了2010-05-05
在項(xiàng)目中遇到一個(gè)問(wèn)題，本來(lái)以為是使用dropdownlist的效果的，仔細(xì)一看，其實(shí)是在點(diǎn)擊文本框以后，在其正下方彈出一個(gè)層，里邊有多個(gè)選項(xiàng)進(jìn)行選擇。很像jQuery.datepicker 的效果。2009-10-10
jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析(推薦)
這篇文章主要介紹了jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)平滑滾動(dòng)頁(yè)面到指定錨點(diǎn)鏈接的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動(dòng)頁(yè)面到指定錨點(diǎn)鏈接的方法,涉及jquery鼠標(biāo)事件及頁(yè)面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果,涉及jQuery基于事件響應(yīng)結(jié)合stop與animate方法控制頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04