jQuery源碼解讀之removeAttr()方法分析

jQuery源碼解讀之removeAttr()方法分析

 這篇文章主要介紹了jQuery源碼解讀之removeAttr()方法分析,較為詳細的分析了removeAttr方法的實現技巧,非常具有實用價值,需要的朋友可以參考下

 

 

本文較為詳細的分析了jQuery源碼解讀之removeAttr()方法。分享給大家供大家參考。具體分析如下：

擴充jQuery原型對象的方法：

代碼如下:

jQuery.fn.extend({
//name，傳入要DOM元素要移除的屬性名稱。
removeAttr: function( name ) {

 

//使用jQuery.fn對象，即jQuery原型對象的each方法遍曆當前選取器選擇的jQuery對象數組，並返回該jQuery對象以便鏈式調用。
return this.each(function() {
//調用jQuery的全域方法removeAttr，傳入遍曆出的DOM對象this和要移除的屬性名稱name。
jQuery.removeAttr( this, name );
});
}
});

 

jQuery的全域方法removeAttr

 

代碼如下:

//擴充jQuery對象的全域方法
jQuery.extend({

 

//elem為遍曆出的每個DOM對象，value為要移除的屬性名稱。
removeAttr: function( elem, value ) {
var name, propName,
i = 0,
//rnotwhite為(/\S+/g)
//如果value為" "，則邏輯與運算式的值為null
//如果value假設為"title href"，則由於邏輯與操作符的兩個運算元都不是布爾值，則返回第二個運算元，此時attrNames為["title", "href"]。
//match是JavaScript字串的方法，在字串內檢索指定的值，或找到一個或多個Regex的匹配，返回存放匹配結果的數組。其他類型都會報錯。
attrNames = value && value.match( rnotwhite );
//如果attrNames不為null，並且當前DOM對象的節點類型為1，進入if語句塊，否則跳出函數，結束本次遍曆，開始下次遍曆。
if ( attrNames && elem.nodeType === 1 ) {
//此時attrNames是個裝有要移除屬性名稱的數組，即["title", "href"]
//執行while迴圈，這種寫法的意思是，先從attrNames取出一個元素賦值給name, i自增1，然後判斷name是否有值，有值，進入迴圈執行，執行完畢後開始下次迴圈，直到name無值，跳出迴圈。
while ( (name = attrNames[i++]) ) {
//如果屬性名稱與js關鍵字同名的如"for"和"class"，替換為"htmlFor"和"className"。
propName = jQuery.propFix[ name ] || name;

//如果是布爾值屬性特別對待
if ( jQuery.expr.match.bool.test( name ) ) {
//getSetInput檢測Input元素是否支援getAttribute("value")
//getSetAttribute檢測是否支援設定駝峰命名格式的屬性名稱
//!ruseDefault.test( name )不區分大小寫檢測name是否是checked或者selected屬性，
if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
//移除布爾值屬性實際上是給布爾值屬性賦值為false
elem[ propName ] = false;
} else {
//支援ie9以下
//將"default-checked"這種屬性轉換為"defaultChecked"，並賦值false
elem[ jQuery.camelCase( "default-" + name ) ] =
elem[ propName ] = false;
}
} else {
//如果不是布爾值屬性，調用jQuery的全域attr方法設定屬性
jQuery.attr( elem, name, "" );
}
//getSetAttribute用來測試setAttribute是否支援設定駝峰命名形式的屬性名稱，如果可以，在使用setAttribute和getAttribute時，需要使用修正後的屬性名稱。(相容ie6/7)
//如果getSetAttibute等於false,說明不支援，則使用修正後的屬性名稱，支援，使用原始的屬性名稱。
//調用DOM原生的removeAttribute方法，移除屬性
elem.removeAttribute( getSetAttribute ? name : propName );
}
}
}
});

關鍵字屬性修正

代碼如下:

jQuery.extend({
propFix: {
"for": "htmlFor",
"class": "className"
}
});
jQuery.extend({
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
}
});
var nodeHook, boolHook,
attrHandle = jQuery.expr.attrHandle,
ruseDefault = /^(?:checked|selected)$/i,
getSetAttribute = support.getSetAttribute,
getSetInput = support.input;
// Setup
div = document.createElement( "div" );
div.setAttribute( "className", "t" );
div.innerHTML = " <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";
a = div.getElementsByTagName("a")[ 0 ];
// First batch of tests.
select = document.createElement("select");
opt = select.appendChild( document.createElement("option") );
input = div.getElementsByTagName("input")[ 0 ];
a.style.cssText = "top:1px";
// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
support.getSetAttribute = div.className !== "t";

 

檢測input是否支援getAttribute("value")

 

代碼如下:

// Support: IE8 only
// Check if we can trust getAttribute("value")
input = document.createElement( "input" );
input.setAttribute( "value", "" );
support.input = input.getAttribute( "value" ) === "";

 

檢測是否布爾值屬性

 

代碼如下:

booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",

 

matchExpr = {
"bool": new RegExp( "^(?:" + booleans + ")$", "i" )
},

 

希望本文所述對大家的jQuery程式設計有所協助。