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

繼續說zepto裏attributes的相關操做.

attr,removeAttr,prop這三個方法.

attr():

三種用途

get:

返回值爲一個string字符串

$("<span id="special"></span>").attr("id");//--> "special"

 注意:只能返回對象中第一個節點的屬性值

set:

返回值爲一個zepto對象

$("<span>").attr("id", "special");//--> [<span id="special"></span>]

第二個參數也能夠傳入一個function,有兩個參數可使用

1:index,zepto對象dom元素數組的下標

2:value,該對象對應屬性的值

$("<div id='demo1'></div>").attr("id",function (index, value) {
    console.log(index, value);    // --> 0 demo1
});

上邊那段代碼若是執行了.那麼該zepto對象的id屬性值就會被清除,由於該函數沒有返回字符串用來設置值.

或者也能夠直接傳入一個json串來修改多個屬性.

$("<span>").attr({
    id: 'special',
    name: 'special'
});

remove:

返回值也是一個zepto對象,做用至關於調用removeAttr()

$("<span id="special"></span>").attr("id", null);//--> [<span></span>]

需注意的只能傳入null才能觸發remove效果.

傳入function與json均可以,只要是返回值或者值爲null,都會觸發remove;

removeAttr:

removeAttr至關於(功能)是attr的一部分.可是代碼實現是分開的.這個函數應用場景比較單一,因此省去了不少判斷.但最終都是調用的function getAttribute(){};

只接收一個參數,就是name

返回值是一個zepto對象.

$("<span id="special"></span>").removeAttr("id");//--> [<span></span>]

 

移除多個屬性請用空格分開

prop:

prop用來設置或取出dom元素的屬性值.功能至關於 (prop = attr - removeAttr);

prop用法與attr相同.只不過沒有remove功能.二者的區別在這裏

讀取或設置dom元素的屬性值。它在讀取屬性值的狀況下優先於 attr，由於這些屬性值會由於用戶的交互發生改變，如checked 和 selected。

那是zepto.js中文api中所說的.本人認爲,在判斷有關交互的屬性時,應優先使用prop,好比checked和selected;

之因此爲出現差別,是由於二者底層實現的區別.

prop採用的是上邊那種,而attr是兩種都用到了;

getAttribute()方法只能取出存在於標籤中的屬性"<div id name></div>" // 只能取出id與name.隱式的屬性是取不出來的,好比style

來講說實現吧.

attr

attr返回的那個三元運算符嵌套寫的有點虎...待我細細說來;

--首先判斷name參數是否爲字符串,而且只有一個實參.這樣來說就是get功能.

----若是this.length不存在.則說明不是一個zepto對象(理論上),若是數組中第一個對象的nodeType值不爲1,則說明不是節點對象.直接返回undefined

----不然就從調用該節點的getAttribute方法,並賦值給result變量. name in this[0] 這個表達式返回一個bool值.同時將result使用!來轉換爲bool值.若是沒有經過getAttribute方法取出來值,而且該屬性存在於節點,

------經過節點直接取值.

------不然直接返回getAttribute的返回值.

--剩下來的就是set與remove功能的實現,這兩個是支持多對象的操做.返回值均爲調用者自己(調用者調用了each循環,循環全部節點對象).

----若是對象不是一個節點對象,則直接跳過本次循環;

----若是name爲一個object,就是說咱們一次性更改多個屬性值.這時就循環object對象,來調用setAttribute方法

----剩下的條件就是給單個屬性賦值,以前說過那個funcArg方法,判斷第二個參數是否爲function類型,若是是則經過當前節點爲做用域執行方法,不然直接返回第二個參數.

關因而否進行set仍是remove,這些是在setAttribute方法中作的處理.一個簡單的三元運算符;

removeAttr

參數只有一個,name,就是要移除的屬性的名稱,

大致執行過程爲,循環調用方法的對象,並將傳入的name按空格分割爲數組並執行forEach循環,forEach循環傳入第二個參數爲循環內部this的指向.而後在內部調用setAttribute方法.只傳入兩個參數,則執行removeAttribute方法;

prop

參數爲兩個.第一個固定爲屬性的名稱,第二個能夠爲一個function,一個字符串.一樣,若是不傳第二個參數則認爲是get,不然是set.

執行過程與attr的相似,可是attr賦值是經過setAttribute()方法,取值是getAttribute()與對象屬性取值的結合.而prop徹底操做的是對象的屬性;

 

(這個原本要昨天發的,跟領導談離職,耽誤了.)

 

再來點吧.說說data方法與val方法.都是操做dom屬性的.一氣兒說完它;

data:

方法接受兩個參數,第一個是name,第二個爲值,若是不填第二個則執行取值,不然爲賦值

用法與attr相似,可是會將傳入的name值加上"data-"的前綴,而且會將駝峯命名轉換爲全小寫連字符的格式;

取值時也不須要加"data-"前綴.

就是說,

$("").data("id");//取的是 data-id屬性的值
$("").data("userName","scott");//給data-user-name屬性賦值

 

第二個參數也能夠是一個function;

actually,data方法內部調用的就是attr方法

deserializeValue是一個反序列化函數,若是有其餘地方須要,不妨將該方法copy出去;

val:

方法接收一個參數,若是不填,則視爲取value值,不然爲設置value值.

$("").val();// getter
$("").val("");// setter

 

參數能夠是一個字符串,function;function接收的參數爲(index[對象的下標],value[對象以前的值]),function需返回一個字符串;

方法自己無亮點,可是返回值有三種;

一:

　　返回一個字符串,做爲get值時返回;

二:

　　返回一個字符串數組,做爲get值時返回;

三:

　　返回對象自己,做爲set值時返回;

之因此會存在第二種狀況,那是由於select(下拉選項)是能夠多選的.而開啓多選的屬性開關名字叫multiple;

當下拉選項開啓多選時,直接經過value屬性只會取到第一個值,其他的取不到.因此在代碼中就作了處理;

取出對象全部的option子節點.經過filter方法返回被選中的節點集合,並調用pluck方法

一個來自prototype.js大表哥中的方法;

傳入一個屬性名,將調用者集合中全部的該屬性的值做爲一個數組返回;

其他的沒什麼了.

若是有什麼疑惑的地方還請留言問我.你們共同窗習;

或者個人扣扣