jQuery的end()方法使用詳解
end()方法的定義和用法:
end()方法能夠回到最近的一個"破壞性"操作之前,即將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。
如果沒有破壞性操作將返回一個空集。
破壞性操作的概念:指任何改變所匹配元素的操作??赡艽蠹覍@個概念比較模糊,舉個例子:
$("li").css("color","red");
以上代碼的CSS函數(shù)就不是一個破壞性操作,因?yàn)槠ヅ湓亓斜聿]有發(fā)生變化,改變的是元素中的文本內(nèi)容的CSS屬性。
$("li").find(".first")
以上代碼就是一個破壞性操作,因?yàn)槠ヅ湓氐牧斜戆l(fā)生了變化,比如有三個li元素,那么匹配元素的列表有三個元素,但是經(jīng)過使用find()方法篩選以后,匹配元素列表只有一個元素了,這就是發(fā)生了"破壞性"操作。
語法結(jié)構(gòu):
$(selector).end()
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".first").find(".div").css("color","green");
$(".second").find(".div").end().css("color","blue");
$(".third").find(".js").css("color","blue").end().css("color","red")
})
</script>
</head>
<body>
<div>
<ul class="first">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li class="div">Div+Css專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
<ul class="second">
<li>HTML專區(qū)</li>
<li>Javascript專區(qū)</li>
<li class="div">Div+Css專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
<ul class="third">
<li>HTML專區(qū)</li>
<li class="js">Javascript專區(qū)</li>
<li>Div+Css專區(qū)</li>
<li>Jquery專區(qū)</li>
</ul>
</div>
</body>
</html>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
javascript中對Attr(dom中屬性)的操作示例講解
這篇文章主要是對javascript中對Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12
jQuery插件Timelinr 實(shí)現(xiàn)時間軸特效
時間軸是依據(jù)時間順序,把一方面或多方面的事件串聯(lián)起來,形成相對完整的記錄體系,再運(yùn)用圖文的形式呈現(xiàn)給用戶,本文給大家收集了互聯(lián)網(wǎng)上的效果比較不錯的一款,分享給大家2015-10-10
遠(yuǎn)離JS災(zāi)難css災(zāi)難之 js私有函數(shù)和css選擇器作為容器
當(dāng)一個項(xiàng)目龐大到一定階段,例如UI展示層采用了模塊化模板化之后,就會出現(xiàn)js災(zāi)難,css災(zāi)難,經(jīng)常出現(xiàn)以前從來不放在一起的兩個js或css莫名奇妙的被放到了一個頁面,基本的原因是模塊重用造成的2011-12-12
基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
基于jQuery的input輸入框下拉提示層,方便用戶輸入郵箱時的提示信息,需要的朋友可以參考下2012-06-06
jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門知識,該插件捆綁了一套有用的驗(yàn)證方法,包括 URL 和電子郵件驗(yàn)證,同時提供了一個用來編寫用戶自定義方法的 API,感興趣的小伙伴們可以參考一下2015-12-12
JQuery 設(shè)置checkbox值二次無效的解決方法
下面小編就為大家?guī)硪黄狫Query 設(shè)置checkbox值二次無效的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個問題基于如下場景:點(diǎn)擊頁面上某個按鈕之后,觸發(fā)click事件,事件處理函數(shù)內(nèi)部發(fā)送一個AJAX請求,AJAX回調(diào)函數(shù)更新頁面的某一個部分。2010-12-12

