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


zepto也是使用的鏈式操作,鏈式操作:函數返回調用函數的對象.

但並不是所有的對象方法都可以進行鏈式操作,舉幾個例子:.size(),.html()|.text()//不傳參數的情況下;

若非特殊說明,下邊介紹的方法都會返回zepto對象;

add():

支持一到二個參數,第一個為選擇器,與$()的規則相同,甚至是,第一個參數傳進去一個function,它也會正確執行(后果自負- -),所以說,正確的使用方式是傳入選擇器,dom對象,或者一段html,這都是可以的,如果有多個,請用數組括起來,

var temp = $(["li","span","div"]).add(["p", "p"]).size(); // --> size為4,因為會對返回的集合進行去重處理

 第二個參數是匹配的上下文,默認不傳就按着document來.

add函數本身無任何亮點- -,將兩個參數原封不動的傳入$()然后返回一個Zepto對象,執行concat函數,該函數會將所有參數添加至調用函數對象的末尾,

toArray方法會調用get方法,當get方法執行時而沒有傳入參數,會將該對象所有的匹配元素以數組的形式返回;

uniq方法是一個數組去重的方法,返回的還是一個數組,然后回到add方法再次通過$()構造一個zepto對象並返回;

addClass():

該方法接收一個參數,可以直接傳入一個字符串作為類名,如有多個,使用空格分開.

$("p").addClass("content title"); // --> content title

 

還有一種調用方式是傳入一個函數,函數可以接收到兩個參數,第一個是當前循環到的下標,第二個是當前對象之前的className.

$('p1', 'p2', 'p3').addClass(function (index, oldClass) {
    return 'dynamic' + index;
});
// p1 --> dynamic0
// p2 --> dynamic1
// p3 --> dynamic2

 

函數必須返回一個字符串,否則會運行異常.

通過each方法循環遍歷對象,each方法會返回一個zepto對象.首先會判斷元素是否存在className屬性,

通過className方法獲取到當前元素的所有className信息的字符串;

className方法用來取信息或者存入信息都是可以的,就像.css()方法一樣,有一個參數就是get,有兩個參數就是set;

(關於這個svg的屬性...本人才疏學淺,沒有接觸過...)

無視掉那個svg相關的東西來說,該方法就是獲取到傳入的第一個參數的className屬性,如果第二個參數不存在,則返回node的className信息,如果存在值,就將值賦給node的className屬性;

再回到addClass方法的each循環中,變量cls拿到了該元素的className,

該方法判斷第二個參數是否為function,如果是,就通過上下文(context)來執行,並傳入兩個參數,idx(下標),payload(在addClass里邊,這個值為元素之前的className)

通過funcArg取到要增加的className,我們的newName變量拿到了要add的className.然后將newName以空格分割(\s表示空格,\s+表示連續的一個及一個以上的空格),split分割返回一個數組,

然后調用forEach方法,這里注意forEach方法傳入了第二個參數,第二個參數的用途是設置forEach中this的指向.詳情可以看MDN Array.prototype.forEach()

在循環內部,我們使用hasClass函數來判斷該元素是否存在這個類,如果不存在,則將該className裝入數組;

Array對象的一系列循環方法第二個參數貌似都是設置函數內部this指向的(沒有資料可以證明我說的話,用之前查文檔,錯了別找我- -)

classRE函數是一個使用緩存的動態生成正則對象的函數

className方法上邊已經提過了,只傳入一個參數表示get,所以hasClass的作用就是判斷該元素className中是否存在我們要插入的這個值.

正則對象調用的test()方法會返回一個bool值,匹配成功為true,匹配失敗為false;

最后在addClass方法中,調用className傳入兩個參數,第一個是元素對象,第二個是原有class加上className集合轉換的字符串.

removeClass():

//沒有按照API的順序來,直接把class操作的這一套裝說完它- -

removeClass函數只有一個可選的參數,可以為一個字符串(要移除的className),或者是一個function,用法同addClass,函數也必須要返回一個字符串

$('<p class="test test2 test3"></p>').removeClass("test test3");
// --> <p class="test2"></p>
/*
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
*/
$('li').addClass("test");
$('li').removeClass(function (index, oldClass) {
    return index % 2 === 0 ? "test" : "";
})
// --> [li, li.test, li]
//或者可以不填參數,直接調用,直接調用會清除對象的所有className
$('<p class="test test2 test3">').removeClass();
// --> <p></p>

 

removeClass相對於addClass簡單點;

大體相同,唯有在forEach循環中,addClass是給集合push值,而removeClass是從一個字符串中replace掉值;

toggleClass():

方法使用與前兩個類似,只不過多了第二個參數,第二個參數為true時,執行addClass,第二個參數為false時,執行removeClass(感覺用處不算太大額...)

直接貼代碼.如果第二個參數沒有傳,就按照有了刪,沒了填的方案來走,如果第二個參數有值,(有種走后門既視感),則不執行hasClass方法,直接通過when變量的值來決定使用什么方法.

關於class的幾個方法算是說完了.個人認為,這是用的比較多的一套方法了.比如結合交互時做一個動畫效果,在CSS無法實現的情況下,就可以將animation寫到一個class中,觸發某個事件時給元素add該class,就可以完成動畫了.

今天就先說到這,本來想把后邊的append也看了呢- -仔細一研究,碼量有點足...另開一篇吧.

 


免責聲明!

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



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