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

今天說說那一套獲取元素集合的一些方法:

["children", "clone", "closest", "contents", "empty", "eq", "filter", "find", "first", "get", "has", "last", "not", "parent", "parents", "siblings"]

children:

獲取對象的全部匹配的直接子元素.

參數爲可選的一個選擇器.若是不填則是全部子節點,不然爲匹配的全部子節點;

$("#demo").children();//-->全部的子節點
$("#demo").children("li");//-->全部的li子節點

 返回的是一個zepto對象,裏邊存儲的是匹配的子節點的集合.

上邊那個過濾方法用的地方比較多,因此給它放在上邊;

children方法調用的filtered傳入的是兩個參數,第一個是一個集合,將全部對象的全部的子節點取出,並放入一個集合;children方法內部調用的children方法不是自身,而是另有一個children方法;↓

咱們調用的是對象方法,而對象方法調用的那個就是一個普通的內部私有函數- -(望理解它們之間的區別);

返回的是作一個兼容處理的獲取子元素的實現,若是節點存在children屬性就直接取出,不存在的話,就循環childNodes並將nodeType爲1的元素篩選出來;

在filtered方法中,第二個參數就是children方法可選的那個選擇器,而filtered方法又會牽扯到下邊要說的兩個方法,這裏先把代碼貼上

filter與not的做用相反.

從源碼來看,能發現一個children的隱藏功能,這是api裏邊沒說的.而咱們的確能用的;

也就是說,咱們能夠在children參數中傳入一個function,function有一個實參,就是下標.

var temp = $("li").children(function (index) {
    return (index % 2 === 0);
})

 

返回的是一個boolean值.爲true則放入集合;

filter:

filter方法接收一個參數,能夠爲選擇器,也能夠爲一個function,function返回true則視爲匹配.

$(".item").filter(".nav"); // 至關於$(".item.nav");
$(".item").filter(function (index) {
    return index % 2 === 0;  //函數內部 this指向集合中的當前元素
}); //將集合中偶數位的元素取出並放入一個集合

 

直接說實現,免得上邊那一大串children白說了.

首先進入方法判斷傳入選擇器是否爲一個function類型,若是是,則執行this.not(this.not(function));看起來可能有點亂.但結果是對的.

not方法與filter相反,先簡單的說它的做用.下邊再介紹它

內層not參數爲一個function,not方法內部會執行該function,並將全部不知足的元素返回,

外層not方法的參數就是內層not的返回值,也就是全部不知足的元素的集合,而後再通過篩選,取出全部不存在於參數集合中的元素.

也就變相的取出了全部知足條件的元素;

not:

not方法用法與filter相同,返回值相反.

用法直接pass.

首先函數內部判斷傳入選擇器類型,若是是個functin,妥妥的循環對象並執行它.

不然就判斷選擇器類型是否爲字符串,若是是,則調用filter方法.加個表情;

若是不是一個字符串,就判斷是不是一個類數組,而且對象的item是一個方法,(是的,變相的判斷爲一個zepto對象.)

其他的狀況,直接經過參數構建一個zepto對象.

以上操做均爲給excludes變量賦值;

在最後,經過循環對象.將對象中不存在於excludes變量中的全部元素取出.並構件爲一個zepto對象.

也就是說,not方法傳入的參數類型是能夠比filter更豐富一些的.

能夠傳入一個zepto對象,或者一個dom標籤數組.一個html片斷.等等......

固然最後返回的對象決不會存在於not的參數中.

//indexOf就是數組的原生方法,

 

先發這三個方法的.其他的之後補上.