關(guān)于jQuery中的end()使用方法
更新時(shí)間：2011年07月10日 00:05:47 作者：
最近在學(xué)習(xí)jQuery方面的知識，學(xué)習(xí)中遇到一定的困難，一些知識不得不查看官方的文檔，在用到end()方法時(shí)，被一個(gè)小例子搞得有點(diǎn)暈。
在官方的API上是這樣描述end()方法的：“回到最近的一個(gè)"破壞性"操作之前。即，將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)?！保?
看樣子好像是找到最后一次操作的元素的上一元素，在如下的例子中：
html代碼：
<div>測試內(nèi)容1</div>
<div>測試內(nèi)容2</div>
jQuery代碼：
$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2');
得到的結(jié)果是：
<div>測試內(nèi)容1 <p class="c1 c2">新增內(nèi)容</p></div>
<div>測試內(nèi)容2 <p class="c1">新增內(nèi)容</p></div>
這里我就有一點(diǎn)不太明白了，怎么只有第一個(gè)<p>標(biāo)簽有兩個(gè)樣式，end()方法后返回的是什么,在火狐里添加了監(jiān)控，得到如下結(jié)果：
1.$('<p>新增內(nèi)容</p>').appendTo('div')返回的是：[p,p]對象數(shù)組，即新增后的兩個(gè)p標(biāo)簽；
2.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]對象數(shù)組，即添加了c1類樣式后的p對象數(shù)組；
3.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1個(gè)<div>中的<p>,在2操作中，最后“破壞”的是第2個(gè)<div>中的 <p>,所以他的前一次操作的對象是第1個(gè)<div>中的<p>,返回的就是它;
4.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1個(gè)<div>中的<p>;
現(xiàn)在算是有點(diǎn)明白了，關(guān)鍵是要搞清楚最后一次操作的元素的上一元素是什么。
看樣子好像是找到最后一次操作的元素的上一元素，在如下的例子中：
html代碼：
復(fù)制代碼 代碼如下:
<div>測試內(nèi)容1</div>
<div>測試內(nèi)容2</div>
jQuery代碼：
復(fù)制代碼 代碼如下:
$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2');
得到的結(jié)果是：
復(fù)制代碼 代碼如下:
<div>測試內(nèi)容1 <p class="c1 c2">新增內(nèi)容</p></div>
<div>測試內(nèi)容2 <p class="c1">新增內(nèi)容</p></div>
這里我就有一點(diǎn)不太明白了，怎么只有第一個(gè)<p>標(biāo)簽有兩個(gè)樣式，end()方法后返回的是什么,在火狐里添加了監(jiān)控，得到如下結(jié)果：
1.$('<p>新增內(nèi)容</p>').appendTo('div')返回的是：[p,p]對象數(shù)組，即新增后的兩個(gè)p標(biāo)簽；
2.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1')返回的是：[p.c1,p.c1]對象數(shù)組，即添加了c1類樣式后的p對象數(shù)組；
3.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1個(gè)<div>中的<p>,在2操作中，最后“破壞”的是第2個(gè)<div>中的 <p>,所以他的前一次操作的對象是第1個(gè)<div>中的<p>,返回的就是它;
4.$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1個(gè)<div>中的<p>;
現(xiàn)在算是有點(diǎn)明白了，關(guān)鍵是要搞清楚最后一次操作的元素的上一元素是什么。
相關(guān)文章
jQuery Layer彈出層傳值到父頁面的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Layer彈出層傳值到父頁面的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08
看了《javascript高級程序設(shè)計(jì)》里面有個(gè)表格排序的例子；覺得很有意思，所以自己用jquery的基本庫做了一個(gè)，里面的概念基本和書里面的差不多2010-09-09
只需引入jqery.js,不需要引入插件，利用jquery定義的一些基本方法，就能實(shí)現(xiàn)諸如隱藏，顯示，淡入，淡出，半透明等2010-12-12
jquery中$.fn和圖片滾動效果實(shí)現(xiàn)的必備知識總結(jié)
圖片滾動效果相信大家都使用過，看上去很簡單的一個(gè)效果，如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法，下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動效果制作的必備知識，需要的朋友可以參考下。2017-04-04
jquery插件豐富，很多都是很好用的，最近學(xué)習(xí)了一下如何制作jquery插件，發(fā)現(xiàn)jquery插件制作其實(shí)很簡單，這里介紹一下。2010-06-06
EasyUI在Panel上動態(tài)添加LinkButton按鈕
Easyui的panel面板，在panel的面板中動態(tài)添加Linkbuton按鈕的編輯方法，下面把實(shí)現(xiàn)思路及代碼記錄到腳本之家平臺，供大家參考2017-08-08
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單自動輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法（排序，過濾，分頁等）
Datatables是一款jquery表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級的交互功能。這篇文章主要介紹了DataTables+BootStrap組合使用Ajax來獲取數(shù)據(jù)并且動態(tài)加載dom的方法（排序，過濾，分頁等）,需要的朋友可以參考下2016-11-11
本篇文章是對用jquery實(shí)現(xiàn)簡單的ajax的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要介紹了jquery利用拖拽方式在圖片上添加熱鏈接的方法，其實(shí)是用jquery寫了個(gè)可以在圖片添加錨點(diǎn)的功能，感興趣的小伙伴們可以參考一下2015-11-11