繼續說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大表哥中的方法;
傳入一個屬性名,將調用者集合中所有的該屬性的值作為一個數組返回;
其余的沒什么了.
如果有什么疑惑的地方還請留言問我.大家共同學習;
或者我的扣扣