jQuery源码分析之removeAttr方法和attr方法

jQuery.removeAttr函数源码测试：

<input type="radio" checked/>

var rnotwhite = (/\S+/g);  var propFix ={"for": "htmlFor","class": "className"};attrHandle = jQuery.expr.attrHandle;ruseDefault = /^(?:checked|selected)$/i;getSetAttribute =$. support.getSetAttribute;//通过setAttribute是否会影响property的访问，如果不影响返回true!getSetInput = $.support.input;jQuery.fn.extend({removeAttr1: function( elem, value ) {var name, propName,i = 0,//不要空格,如果传入一个以空格分割的字符串将他变成一个数组就可以了!attrNames = value && value.match( rnotwhite );if ( attrNames && elem.nodeType === 1 ) {while ( (name = attrNames[i++]) ) {propName = jQuery.propFix[ name ] || name;// Boolean attributes get special treatment (#10870)//对布尔值进行特殊处理!重置属性为false///jQuery.expr.match.bool=^(?:checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped)$/iif ( jQuery.expr.match.bool.test( name ) ) {// Set corresponding property to false//将input为radio的元素的checked设置false//如果是传入的"checked",那么就走else逻辑，在里面设置为elem["defaultChecked"]=elem["checked"]=false;//也就是如果元素是"checked"，那么经过else以后把checked变成false了!if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {              elem[ propName ] = false;// Support: IE<9// Also clear defaultChecked/defaultSelected (if appropriate)} else {//支持IE<9把elem["defaultChecked"]=elem["checked"]=false;elem[ jQuery.camelCase( "default-" + name ) ] =elem[ propName ] = false;}// See #9699 for explanation of this approach (setting first, then removal)//首先把相应的数据设置为空} else {jQuery.attr( elem, name, "" );}//支持get,setAttr方法就调用它elem.removeAttribute( getSetAttribute ? name : propName );}}}
})
$("input").eq(0).removeAttr1($("input")[0],"checked");
//打印false,也就是说<input type="radio" checked/>移除checked结果就是把checked属性变成false了!所以下面获取是false
alert($("input").get(0).checked);

note:

（1）对于设置的是boolean的属性，我们要特殊处理，但是还是通过下标的方式来处理,让他恢复默认值，然后调用removeAttribute!对于IE<9那么我就设置defaultChecked和defaultSelected大家可以看到这里对boolean类型的设置是通过下标的方式完成的，通过下标形式把boolean类型的全部设置为false!也就是恢复为默认状态，然后调用removeAttribute!

（2）removeAttr方法如果不是设置boolean类型的值，那么首先会把他设置为空字符串，然后再调用removeAttribute方法!但是调用removeAttribute的时候在不支持驼峰的时候直接删除name而不是propName，当时我在想，如果用户传入"removeAttr("contenteditable")"同时不支持驼峰属性的get/setAttribute最后就是直接调用的removeAttribute("contenteditable")但是html中属性是"contentEditable=true"啊，这样能移除吗?看下面的代码：

HTML部分：

<input id="content" tabIndex=5 contentEditable=true checked="checked">

JS部分：

//getAttribute可以大写也可以小写属性
$("#content")[0].removeAttribute("tabindex");
alert($("#content")[0].getAttribute("tabIndex"));//打印null，已经被移除了
//这表明对于removeAttribute来说：删除的属性既可以是驼峰写法也可以不是驼峰!
alert($("#content")[0].getAttribute("contentEditable"));//打印true
$("#content")[0].removeAttribute("contenteditable");
//打印null
alert($("#content")[0].getAttribute("contentEditable"));

所以，对于removeAttribute来说，移除的参数可以是驼峰写法也可以不是驼峰写法,get/setAttr也是一样的!(这是为什么在prop方法里面有相应的propFix而这里就不需要相应的Hooks把他转化为驼峰!)那么什么时候选择驼峰，什么时候选择非驼峰呢?因为getSetAttribute表示对Attribute的操作是否会影响property(通过className来判断的)，如果不影响那么就是true，那么移除驼峰和非驼峰是没有影响的。如果对Attribute的操作会影响property，那么为了防止对property产生污染，那么我们必须移除驼峰写法，因为property就是驼峰的!

实例方法removeAttr源码：

removeAttr: function( name ) {return this.each(function() {jQuery.removeAttr( this, name );});}

removeAttr方法会对每一个调用对象调用jQuery.removeAttr方法!
实例attr方法源码(传入参数为调用对象，回调函数jQuery.attr,name,value是传入的参数，第四个参数是参数个数是否大于1，如果是读取属性那么value是undefined,同时第五个参数是false)：读取属性的时候传入access里面的参数使得chainable，bulk都是false,length为true，所以直接执行代码fn(elems[0],key)

这使得attr方法在读取属性的时候回调函数为jQuery.attr方法的只是调用对象的第一个DOM元素和调用attr方法传入的key值，所以结果就是只是获取第一个元素的相应属性!但是在设置属性的时候确是对于调用对象的任何一个DOM元素!设置属性的值的时候如果传入第二个参数是函数，那么在access里面为每一个DOM执行jQuery.attr函数，传入的第一个参数是调用对象的DOM对象，第二个参数是attr方法key值，第三个参数是参数函数的执行结果！

attr: function( name, value ) {return access( this, jQuery.attr, name, value, arguments.length > 1 );}

var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {var i = 0,length = elems.length,bulk = key == null;// Sets many valuesif ( jQuery.type( key ) === "object" ) {chainable = true;for ( i in key ) {jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );}// Sets one value} else if ( value !== undefined ) {chainable = true;if ( !jQuery.isFunction( value ) ) {raw = true;}if ( bulk ) {// Bulk operations run against the entire setif ( raw ) {fn.call( elems, value );fn = null;// ...except when executing function values} else {bulk = fn;fn = function( elem, key, value ) {return bulk.call( jQuery( elem ), value );};}}if ( fn ) {for ( ; i < length; i++ ) {//attr方法传入的第二个参数是函数时候，执行函数中this是DOM对象，第一个参数是下标，第二个参数是调用fn(elems[i],key)//也就是获取该DOM元素的所有的以key为属性名的属性值。如attr("title",function(){})那么这里的第二个参数就是该DOM元素的//所有title属性!所以传入的参数函数提供了对key参数对应的属性值的进一步操作，如更新，也起到了批量更新的作用!//思路：先获取key的属性值+更新key对应属性值（通过进一步调用jQuery.attr方法完成!）fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );}}}return chainable ?elems :// Getsbulk ?fn.call( elems ) :length ? fn( elems[0], key ) : emptyGet;
};

如果attr方法传入的第一个参数是一个对象，那么对每一个对象属性都调用一次access方法，同时这时候是赋值调用，对每一个attr方法的调用对象DOM都执行回调函数jQuery.attr方法，传入参数是DOM，key，value值，如{height:180,width:180}那么key第一次是height，第二次是widthjQuery.attr源码如下：

attr: function( elem, name, value ) {var hooks, ret,nType = elem.nodeType;// don't get/set attributes on text, comment and attribute nodesif ( !elem || nType === 3 || nType === 8 || nType === 2 ) {return;}// Fallback to prop when attributes are not supportedif ( typeof elem.getAttribute === strundefined ) {return jQuery.prop( elem, name, value );}// All attributes are lowercase// Grab necessary hook if one is definedif ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {name = name.toLowerCase();hooks = jQuery.attrHooks[ name ] ||( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );//如果name在jQuery.attrHooks里面或者满足//布尔正则那么返回boolHook}if ( value !== undefined ) {if ( value === null ) {jQuery.removeAttr( elem, name );//没每一个Element设定值} else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {return ret;} else {elem.setAttribute( name, value + "" );return value;}//如果value是空那么表示获取值} else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {return ret;//如果我们传入的是attr("checked")那么调用的是jQuery.find.attr也就是Sizzle的方法，然后返回一个checked字符串，不是boolean!} else {//对于prop还说，他是通过elem["xx"]方式访问的，对于表单元素，只要他有checked那么他的值就是true，所以返回true!ret = jQuery.find.attr( elem, name );// Non-existent attributes return null, we normalize to undefinedreturn ret == null ?undefined :ret;}}

测试代码：

//通过attr添加是小写,获取驼峰的时候也是小写!
//打印"5"
alert($("#content").attr("tabIndex"));
//打印"5",表示获取的驼峰属性的时候属性本身可以是驼峰,也可以不是!
alert($("#content").attr("tabIndex"));
//调用removeAttr的时候如果是小写或者大写都是可以的!这是为了兼容有些人喜欢小写属性有些人喜欢驼峰!
$("#content").removeAttr("tabIndex");
//打印undefined
alert($("#content").attr("tabindex"));

对应的attrHooks:

attrHooks: {type: {set: function( elem, value ) {if ( !support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {// Setting the type on a radio button after the value resets the value in IE6-9// Reset value to default in case type is set after value during creationvar val = elem.value;elem.setAttribute( "type", value );if ( val ) {elem.value = val;}return value;}}}}

boolHook:对于boolean值，如checked|selected|async|autofocus|autoplay|controls等设置值也是经过特殊的处理的，因为我们的attr调用boolean的值的时候也是返回的字符串，而不是boolean值。对于获取值，boolHook里面没有get方法，所以对于获取值还是通过jQuery.find.attr来完成的,该方法会返回相应的字符串!但是对于设置值，那么如果value是false那么就移除该属性；否则修改defaultChect等为true，这一修改下次调用的时候就会依赖jQueyr.find.attr从而获取到"checkde"字符串而不是布尔值。（注意：这里即使调用attr("checked","xxx")也会使得下次获取到"checked"）

// Hook for boolean attributes
boolHook = {set: function( elem, value, name ) {if ( value === false ) {// Remove boolean attributes when set to falsejQuery.removeAttr( elem, name );//attr("checked",false)调用将会把checked的属性变成"undefined"} else if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {// IE<8 needs the *property* name  //对于getAttribute获取不到正确的值的情况，或者修改attribute会修改property的情况//那么我们设置setAttribute("checked","checked")这种类型elem.setAttribute( !getSetAttribute && jQuery.propFix[ name ] || name, name );// Use defaultChecked and defaultSelected for oldIE} else {//那么就是把这个元素的defaultChecked，defaultSelected设置为true。调用attr("checked","xxxx")//就会把defaultChcked设置为true了，那么再次获取通过getAttribute获取时候的返回值就是"checked"从而转化为字符串!//但是同时设置了elem[name]=true，所以通过property获取还是布尔值!elem[ jQuery.camelCase( "default-" + name ) ] = elem[ name ] = true;}return name;}
};

contentEditable:如果把contentEditable设置为false表示不让编辑了，如果设置为空字符串那么会抛出异常!

jQuery.attrHooks.contenteditable = {set: function( elem, value, name ) {nodeHook.set( elem, value === "" ? false : value, name );}};

width/height:如果我们调用attr方法设置width/height的时候设置为空字符串，那么jQuery会把height/width设置为auto!

jQuery.each([ "width", "height" ], function( i, name ) {jQuery.attrHooks[ name ] = {set: function( elem, value ) {if ( value === "" ) {elem.setAttribute( name, "auto" );return value;}}};});

下面是对于style的特殊处理：

// Get the style information from getAttribute// (IE uses .cssText instead)a.style.cssText = "top:1px";support.style = /top/.test( a.getAttribute("style") );

所以，如果support.style返回true，表示我们可以通过getAttribute获取到style属性中的text，如果是false表示getAttribute不能用于style!如果不能用于style就要做特殊的处理!处理逻辑如下：其目地就是为了兼容IE<8，因为IE<8通过getAttribute获取style返回的是对象，所以针对这种情况我们要用elem.style.cssText来特殊处理!

if ( !support.style ) {jQuery.attrHooks.style = {get: function( elem ) {// Return undefined in the case of empty string// Note: IE uppercases css property names, but if we were to .toLowerCase()// .cssText, that would destroy case senstitivity in URL's, like in "background"return elem.style.cssText || undefined;},set: function( elem, value ) {return ( elem.style.cssText = value + "" );}};
}

value:

getSetInput检测是否可以信任getAttribute("value"),getSetAttribute检测用setAttribute修改属性是否会修改property属性!

    getSetInput = support.input;// Support: IE8 only// Check if we can trust getAttribute("value")input = document.createElement( "input" );input.setAttribute( "value", "" );support.input = input.getAttribute( "value" ) === "";//如果getSetInput为true表示我们可以信任get/setAttribute!

在老版本的IE中，如果get/setAttribute不可信或者通过setAttribute修改属性会修改property属性，那么对value的值的设置也进行特殊的处理!也就是如果是设置input的值，那么修改defaultValue,如果不是修改input，那么调用IE6/7的nodeHook!

// fix oldIE attroperties
if ( !getSetInput || !getSetAttribute ) {jQuery.attrHooks.value = {set: function( elem, value, name ) {if ( jQuery.nodeName( elem, "input" ) ) {// Does not return so that setAttribute is also usedelem.defaultValue = value;//设置value值就是回归defaultValue!} else {// Use nodeHook if defined (#1954); otherwise setAttribute is finereturn nodeHook && nodeHook.set( elem, value, name );}}};
}

getSetAttribute检测：

 div = document.createElement( "div" );div.setAttribute( "className", "t" );// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)support.getSetAttribute = div.className !== "t";

在IE6/IE7中，如果setAttribute设置了className那么property也修改了!对于这种情况jQuery也做了兼容。在IE6/7中，设置属性的值的时候，首先调用getAttributeNode获取到属性节点，如果该属性节点不存在，那么创建一个属性节点赋值到该元素上面，但是这时候是一个空的属性节点；第二步就是把value值赋值到上一步创建的属性节点上。
nodeHooks:（setContentEditable中调用为:nodeHook.set(elem,"aa"/false,"contentEditable")）

// IE6/7 do not support getting/setting some attributes with get/setAttribute
if ( !getSetAttribute ) {// Use this for any attribute in IE6/7// This fixes almost every IE6/7 issuenodeHook = {set: function( elem, value, name ) {// Set the existing or create a new attribute nodevar ret = elem.getAttributeNode( name );if ( !ret ) {elem.setAttributeNode((ret = elem.ownerDocument.createAttribute( name )));}ret.value = value += "";//如果设置的值是value那么返回设置的值，否则通过getAttribute查询后返回value值!// Break association with cloned elements by also using setAttribute (#9646)if ( name === "value" || value === elem.getAttribute( name ) ) {return value;//第一个name==="value"表示上面对于value也进行了hook!}}};

总结：

（1）对于布尔类型的表单元素，如attr("checked")和prop("checked")前者调用了jQuery.find.attr也就是Sizzle的attr方法，最后返回的是一个字符串，如"checked"。对于prop来说，他最后调用的是elem["checked"],只要表单元素有checked，那么他的值就是true，是一个布尔值!当然，如果要获取字符串，我们自己也可以调用jQuery.find.attr(elem,"checked"),要获取布尔值，原生的JS可以用elem.checked!

（2）IE<8通过getAttribute获取style返回的是一个对象，但是我们通过attr("style")获取的时候却获取到了其中的字符串，所以jQuery对我们这种情况做了处理，也就是说对于这种情况，如果浏览器获取到的style是对象，也就是IE<8，那么我们就自己处理，通过style.cssText获取，否则我们还是调用jQuery.find.attr来获取。所以还是为了兼容IE<8的浏览器的!对于prop方法不要做任何兼容，直接调用elem["style"]就可以了,他返回的是对象!

（3）如果我们调用attr方法设置width/height的时候设置为空字符串，那么jQuery会把height/width设置为auto!

（4）调用attr方法设置的时候或者获取的时候都会把参数进行小写化，然后调用相应的方法如jQuery.find.attr，因为该方法是获取小写的参数，所以如果你有一个属性是"classMe"那么你可以传入attr方法参数是"classme/classMe"任何一种，这是不是可浏览器原生的get/setAttribute一致了呢。

jQuery源码分析之removeAttr方法和attr方法相关推荐

jQuery源码分析之实例find和filter方法的区别七问
问题1:jQuery.filter的源码是什么? jQuery.filter = function( expr, elems, not ) {var elem = elems[ 0 ];//如果含有第 ...
jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://git ...
[转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
[转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://github.com/JsAaro ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde
10.4 .bind() .one() 10.4.1 如何使用 .bind( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑 ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate
Js代码作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 后文预告:封装事件对象便 ...
jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别.原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大 ...
jQuery源码分析系列：.domManip() .buildFragment() .clean()
.domManip(args,table,callback):是jQuery DOM操作的核心函数,可以扩展出如下方法: append/appendTo: prepend/prependTo: b ...

jQuery源码分析之removeAttr方法和attr方法

jQuery源码分析之removeAttr方法和attr方法相关推荐

最新文章

热门文章