jQuery源碼解讀之removeAttr()方法分析
本文較為詳細(xì)的分析了jQuery源碼解讀之removeAttr()方法。分享給大家供大家參考。具體分析如下:
擴(kuò)展jQuery原型對(duì)象的方法:
//name,傳入要DOM元素要移除的屬性名。
removeAttr: function( name ) {
//使用jQuery.fn對(duì)象,即jQuery原型對(duì)象的each方法遍歷當(dāng)前選擇器選擇的jQuery對(duì)象數(shù)組,并返回該jQuery對(duì)象以便鏈?zhǔn)秸{(diào)用。
return this.each(function() {
//調(diào)用jQuery的全局方法removeAttr,傳入遍歷出的DOM對(duì)象this和要移除的屬性名name。
jQuery.removeAttr( this, name );
});
}
});
jQuery的全局方法removeAttr
jQuery.extend({
//elem為遍歷出的每個(gè)DOM對(duì)象,value為要移除的屬性名。
removeAttr: function( elem, value ) {
var name, propName,
i = 0,
//rnotwhite為(/\S+/g)
//如果value為" ",則邏輯與表達(dá)式的值為null
//如果value假設(shè)為"title href",則由于邏輯與操作符的兩個(gè)操作數(shù)都不是布爾值,則返回第二個(gè)操作數(shù),此時(shí)attrNames為["title", "href"]。
//match是JavaScript字符串的方法,在字符串內(nèi)檢索指定的值,或找到一個(gè)或多個(gè)正則表達(dá)式的匹配,返回存放匹配結(jié)果的數(shù)組。其他類型都會(huì)報(bào)錯(cuò)。
attrNames = value && value.match( rnotwhite );
//如果attrNames不為null,并且當(dāng)前DOM對(duì)象的節(jié)點(diǎn)類型為1,進(jìn)入if語(yǔ)句塊,否則跳出函數(shù),結(jié)束本次遍歷,開(kāi)始下次遍歷。
if ( attrNames && elem.nodeType === 1 ) {
//此時(shí)attrNames是個(gè)裝有要移除屬性名的數(shù)組,即["title", "href"]
//執(zhí)行while循環(huán),這種寫法的意思是,先從attrNames取出一個(gè)元素賦值給name, i自增1,然后判斷name是否有值,有值,進(jìn)入循環(huán)執(zhí)行,執(zhí)行完畢后開(kāi)始下次循環(huán),直到name無(wú)值,跳出循環(huán)。
while ( (name = attrNames[i++]) ) {
//如果屬性名與js關(guān)鍵字同名的如"for"和"class",替換為"htmlFor"和"className"。
propName = jQuery.propFix[ name ] || name;
//如果是布爾值屬性特別對(duì)待
if ( jQuery.expr.match.bool.test( name ) ) {
//getSetInput檢測(cè)Input元素是否支持getAttribute("value")
//getSetAttribute檢測(cè)是否支持設(shè)置駝峰命名格式的屬性名
//!ruseDefault.test( name )不區(qū)分大小寫檢測(cè)name是否是checked或者selected屬性,
if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
//移除布爾值屬性實(shí)際上是給布爾值屬性賦值為false
elem[ propName ] = false;
} else {
//支持ie9以下
//將"default-checked"這種屬性轉(zhuǎn)換為"defaultChecked",并賦值false
elem[ jQuery.camelCase( "default-" + name ) ] =
elem[ propName ] = false;
}
} else {
//如果不是布爾值屬性,調(diào)用jQuery的全局attr方法設(shè)置屬性
jQuery.attr( elem, name, "" );
}
//getSetAttribute用來(lái)測(cè)試setAttribute是否支持設(shè)置駝峰命名形式的屬性名,如果可以,在使用setAttribute和getAttribute時(shí),需要使用修正后的屬性名。(兼容ie6/7)
//如果getSetAttibute等于false,說(shuō)明不支持,則使用修正后的屬性名,支持,使用原始的屬性名。
//調(diào)用DOM原生的removeAttribute方法,移除屬性
elem.removeAttribute( getSetAttribute ? name : propName );
}
}
}
});
關(guān)鍵字屬性修正
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";
檢測(cè)input是否支持getAttribute("value")
// Check if we can trust getAttribute("value")
input = document.createElement( "input" );
input.setAttribute( "value", "" );
support.input = input.getAttribute( "value" ) === "";
檢測(cè)是否布爾值屬性
matchExpr = {
"bool": new RegExp( "^(?:" + booleans + ")$", "i" )
},
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jquery中attr和prop的區(qū)別分析
- jQuery背景插件backstretch使用指南
- 基于bootstrap3和jquery的分頁(yè)插件
- jquery+CSS實(shí)現(xiàn)的多級(jí)豎向展開(kāi)樹形TRee菜單效果
- JQuery+Ajax+Struts2+Hibernate框架整合實(shí)現(xiàn)完整的登錄注冊(cè)
- jQuery.trim() 函數(shù)及trim()用法詳解
- jQuery如何使用自動(dòng)觸發(fā)事件trigger
- 使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效
- 基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- jQuery實(shí)現(xiàn)的調(diào)整表格行tr上下順序
相關(guān)文章
在css加載完畢后自動(dòng)判斷頁(yè)面是否加入css或js文件
使用jquery ui中的dialog()來(lái)顯示消息框,為了使方法方便調(diào)用,便加入了自動(dòng)判斷頁(yè)面是否加入了ui.js和ui.css,具體實(shí)現(xiàn)代碼如下2014-09-09
jquery使用slideDown實(shí)現(xiàn)模塊緩慢拉出效果的方法
這篇文章主要介紹了jquery使用slideDown實(shí)現(xiàn)模塊緩慢拉出效果的方法,涉及slideDown方法操作模塊展示效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)div拖拽效果的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素樣式變換的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-02-02
jQuery制作網(wǎng)頁(yè)版選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了jQuery制作網(wǎng)頁(yè)版選項(xiàng)卡的相關(guān)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
讓新消息在網(wǎng)頁(yè)標(biāo)題閃爍提示的jQuery代碼
可能有一些站長(zhǎng)會(huì)注意到這樣的效果,到收到的新消息會(huì)閃爍標(biāo)題提示,那么新消息在網(wǎng)頁(yè)標(biāo)題閃爍顯示的效果如何實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11
jquery動(dòng)態(tài)添加元素事件失效問(wèn)題解決方法
當(dāng)使用腳本動(dòng)態(tài)添加元素xxx時(shí),但事件失效,最后使用jquery中on方法解決腳本動(dòng)態(tài)添加元素,需要的朋友可以參考下2014-05-05
jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對(duì)jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要介紹了jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,需要的朋友可以參考下2016-01-01

