學習zepto.js(對象方法)[6]


first:

獲取當前對象集合中的第一個dom元素。

$("div").first(); // 返回第一個div對象(zepto對象)
//相當於$("div").eq(0);

與之對應的是last

last:

獲取當前對象集合中的最后一個dom元素。

$("div").last(); // 返回最后一個div對象(zepto對象)
//相當於$("div").eq(-1);

 兩方法不接收任何參數。

個人認為調用isObject方法沒什么用,因為zepto對象集合里存放的都是dom元素。//也許是我無知吧- -

被大神點醒了。這樣做也許是為了這種場景

get:

獲取當前對象集合對應下標的某元素,傳入參數為一個int下標,如果不傳入參數,則將對象轉換為一個普通數組並返回;

$("div").get(0);     // 第0個。(dom對象,不是zepto對象)
$("div").get();      //所有div對象組成的一個數組 

 

該方法與eq方法的區別在於,eq返回的是zepto對象,而get返回的是dom對象,$().get(0)相當於$()[0];

slice就是[].slice();

使用get並且不傳入參數的對象前后變化圖:

has:

傳入參數為一個選擇器字符串或者一個節點,返回的是對象集合中子節點包含參數的對象。

$("div").has("a"); // 會返回集合中所有包含a標簽的對象

 

上述是傳入一個選擇器,也可以傳入一個node節點作為參數

$("div").has(document.getElementById("link")); //返回集合中有子項為#link的對象

 

首先,filter方法會將返回值為true的子項裝入一個集合。

在filter方法內,我們通過判斷選擇器是否為object來進行區分,如果是object,則調用contains方法,判斷selector是否屬於this。

否則通過當前對象來調用find方法並將selector傳入,並調用size方法獲取count(filter會自動將返回值轉換為bool類型)。

parent:

獲取對象集合所有的直接父節點。可以傳入一個選擇器,只留下符合選擇器的父節點。

$("p").parent();       // 獲取所有p標簽的父節點
$("p").parent(".ads");    // 獲取所有p標簽的父節點className包含.ads的節點

 

pluck方法返回一個數組,參數是一個字符串,為屬性名,返回的值是調用對象所對應的屬性的值;

然后傳入uniq方法,方法做了一個去重處理;

最外層的方法filtered,如果第二個參數selector不為空,則通過第一個參數調用filter方法並將第二個參數傳入filter方法,否則直接返回第一個參數。

parents:

獲取所有對象的所有父節點。直至html標簽結束。可以傳入一個參數,作為選擇器篩選;

參數只能是一個選擇器字符串;

返回的集合不會出現重復的元素;

如果想取出元素的直接父節點,使用parent;

如果想取出第一個符合篩選條件的父節點,使用closest。

$("p").parents();        // 獲取所有p標簽的所有父節點
$("p").parents(".ads");   // 獲取所有p標簽的所有父節點className包含ads的節點

 

//使用parents如果不傳入參數,則始終會包含一個body以及html元素;

方法首先聲明一個數組用於存放dom元素,將this賦值給nodes變量;

使用一個while循環,條件為nodes.length > 0;

在循環內部,通過$.map給nodes進行賦值,map方法內部將node賦值為node的父節點,

然后判斷,如果節點不是document並且該節點不存在於ancestors數組中,則將節點push至數組,並返回node。

所以說循環停止的條件就是node節點為document時。

最后調用filtered方法並返回。

siblings:

獲取對象所有的兄弟節點。參數可以是一個選擇器字符串,如傳入參數則根據選擇器過濾。

$("p").siblings();      // 獲取所有p標簽的同級標簽
$("p").siblings(".ad");   // 所有的p標簽的同級的className包含ad的元素

 

通過siblings獲取到的dom元素會重復。

方法內部用到了一個children方法。

方法內部取出元素的父節點並傳入children方法,返回元素的父節點的子節點,相當於自己的所有兄弟節點以及自身。

通過該返回集合call一下filter方法。

並將除了自身以外的所有節點返回。

最后通過filtered方法進行篩選,返回;

注意,siblings獲取的元素會重復,會重復,會重復(重說三);

就像這樣,script標簽出現了兩次;

 ok,先說到這里了。寫寫博客練習一下語言表達能力,感覺自己能理解了,還是說不好,糾結ing...

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM