jQuery的end()方法使用詳解

更新時(shí)間：2015年07月15日 09:47:59 投稿：hebedich

本文給大家分享的是jQuery中的end()的定義和使用方法及示例，非常簡單實(shí)用，有需要的小伙伴可以參考下。

end()方法的定義和用法:

end()方法能夠回到最近的一個(gè)"破壞性"操作之前，即將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。
如果沒有破壞性操作將返回一個(gè)空集。
破壞性操作的概念:指任何改變所匹配元素的操作?？赡艽蠹覍?duì)這個(gè)概念比較模糊，舉個(gè)例子:

$("li").css("color","red");

以上代碼的CSS函數(shù)就不是一個(gè)破壞性操作，因?yàn)槠ヅ湓亓斜聿]有發(fā)生變化，改變的是元素中的文本內(nèi)容的CSS屬性。

$("li").find(".first")

以上代碼就是一個(gè)破壞性操作，因?yàn)槠ヅ湓氐牧斜戆l(fā)生了變化，比如有三個(gè)li元素，那么匹配元素的列表有三個(gè)元素，但是經(jīng)過使用find()方法篩選以后，匹配元素列表只有一個(gè)元素了，這就是發(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)容了，希望大家能夠喜歡。

您可能感興趣的文章:

jQuery
end()

相關(guān)文章

javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery插件Timelinr 實(shí)現(xiàn)時(shí)間軸特效
時(shí)間軸是依據(jù)時(shí)間順序，把一方面或多方面的事件串聯(lián)起來，形成相對(duì)完整的記錄體系，再運(yùn)用圖文的形式呈現(xiàn)給用戶，本文給大家收集了互聯(lián)網(wǎng)上的效果比較不錯(cuò)的一款，分享給大家
2015-10-10
遠(yuǎn)離JS災(zāi)難css災(zāi)難之 js私有函數(shù)和css選擇器作為容器
當(dāng)一個(gè)項(xiàng)目龐大到一定階段，例如UI展示層采用了模塊化模板化之后，就會(huì)出現(xiàn)js災(zāi)難，css災(zāi)難，經(jīng)常出現(xiàn)以前從來不放在一起的兩個(gè)js或css莫名奇妙的被放到了一個(gè)頁面，基本的原因是模塊重用造成的
2011-12-12
jquery批量控制form禁用的代碼
這篇文章介紹了jquery批量控制form禁用的代碼，有需要的朋友可以參考一下
2013-08-08
基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
基于jQuery的input輸入框下拉提示層，方便用戶輸入郵箱時(shí)的提示信息，需要的朋友可以參考下
2012-06-06
jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門知識(shí)，該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定義方法的 API，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery中prepend()方法用法實(shí)例
這篇文章主要介紹了jQuery中prepend()方法用法,以實(shí)例形式較為詳細(xì)的分析了prepend()方法的功能、定義及使用技巧,并對(duì)比分析了與text()方法的不同之處,需要的朋友可以參考下
2014-12-12
JQuery 設(shè)置checkbox值二次無效的解決方法
下面小編就為大家?guī)硪黄狫Query 設(shè)置checkbox值二次無效的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
jQuery實(shí)現(xiàn)簡易的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
討論這個(gè)問題基于如下場景：點(diǎn)擊頁面上某個(gè)按鈕之后，觸發(fā)click事件，事件處理函數(shù)內(nèi)部發(fā)送一個(gè)AJAX請(qǐng)求，AJAX回調(diào)函數(shù)更新頁面的某一個(gè)部分。
2010-12-12