首页 > 代码库 > jquery源码解析：jQuery对元素属性的操作1
jquery源码解析：jQuery对元素属性的操作1
我们先来看一下jQuery中有多少个方法是用来操作元素属性的。
首先，看一下实例方法：
然后，看下静态方法（工具方法）：
静态方法是内部使用的，我们外面使用的很少，实例方法才是对外的。
接下来，我们来看下一些方法是如何使用的？
$("#div1").attr("title","hello") ，设置属性，两个参数时。
$("#div1").attr("title") ， 获取属性值，一个参数时。
$("#div1").prop("title")，也可以获得这个属性值。
它们之间的区别就是：attr相当于原生的setAttribute()，getAttribute()。
prop相当于原生的.属性名（[属性名]），比如：div.title = "hello";div.title。
在这里简单的讲一下原生的区别：
$("#div1").attr("chaojidan","hello") ，给元素添加属性名为chaojidan的属性。在元素div标签上会显示chaojidan这个属性。
$("#div1").prop("chaojidan","hello")，也是给元素添加属性名为chaojidan的属性，但是在元素div标签上不会显示这个属性。
因为chaojidan是自定义属性，不是元素的固有属性。
还有一个区别：
<div chaojidan="hello" id="div1">
$("#div1").attr("chaojidan") 返回hello。但是$("#div1").prop("chaojidan")，在有些浏览器下会返回空。因为chaojidan是自定属性。
还有一个区别：
对于a标签的href属性，attr返回href的属性值，但是prop返回document.URL + href的属性值。href是a标签的固有属性。
更具体的区别，请看：http://www.cnblogs.com/chaojidan/p/4108777.html
固有属性，如果你用removeProp删除的话，会有问题，比如，删除一个元素的id，是删除不掉的。但是用removeAttr就可以。因此prp和removeProp用的比较少，而attr和removeAttr用的比较多。
最后，我们来看源码：
jQuery.fn.extend({
attr: function( name, value ) {
return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 ); //此方法之前讲过，如果arguments.length > 1，就代表是设置操作，如果是false，那就代表是获取操作。而真正调用的回调方法是静态方法：jQuery.attr。name就是你传进来的属性名，value是你传进来的属性值。
},
removeAttr: function( name ) {
return this.each(function() {
jQuery.removeAttr( this, name ); //实例方法removeAttr，调用的也是同名的静态方法removeAttr。
});
},
prop: function( name, value ) { //也是静态方法jQuery.prop
return jQuery.access( this, jQuery.prop, name, value, arguments.length > 1 );
},
removeProp: function( name ) {
return this.each(function() {
delete this[ jQuery.propFix[ name ] || name ]; //删除属性，如果属性名需要做兼容，就做兼容，比如:class要变成className。
});
},
......
});
jQuery.extend({
attr: function( elem, name, value ) {
var hooks, ret,
nType = elem.nodeType;
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { //元素不存在或文本节点，或注释节点，或属性节点，不能设置属性，直接返回。元素节点才能设置属性。
return;
}
if ( typeof elem.getAttribute === core_strundefined ) { //core_strundefined = "undefined"。document，window没有getAttribute方法，因此使用prop方法，而prop方法是用.属性名的形式。
return jQuery.prop( elem, name, value );
}
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) { //如果不是元素节点或元素节点是不是xml文档下的，如果是，那么jQuery.isXMLDoc( elem ) 返回true。这里的意思就是：如果是xml文档下的元素节点，就不会进入到if语句。xml文档下的元素都是自定义的，没有兼容性问题。所以不需要进入到if语句，进行兼容性处理。而html文档下的元素节点，有兼容性问题，所以需要做下处理。
name = name.toLowerCase();
//hooks是jQuery中专门用来解决兼容性问题的。support用来检测浏览器的兼容性，hooks来解决兼容性问题，hooks针对不同的类型有相对应的hooks，比如：attr，就对应于attrHooks。hooks分两种，一种是针对设置的兼容性处理，set方法，一种是针对获取的兼容性处理，get方法。如果有兼容性问题，set方法或get方法会返回兼容性处理之后的值，如果没有兼容性问题，set就会返回undefined，get就会返回null。大家可以看下attrHooks对象，其实传属性名进来，只有type属性才有兼容性问题。而且只针对设置操作，获取操作没有兼容性问题。具体一点就是：设置type = "radio" 的兼容性问题。
hooks = jQuery.attrHooks[ name ] || ( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook ); //jQuery.expr = Sizzle.selectors，Sizzle.selectors对象中有match: matchExpr属性。matchExpr也是一个对象，它里面的bool属性值是：new RegExp( "^(?:" + booleans + ")$", "i" )。而booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped"。nodeHook = undefined。如果不是在IE下设置type类型为radio，那么就会判断name是否匹配此正则。如果匹配，就返回boolHook，而不匹配就会返回undefined。boolHook是用来专门处理bool类型属性的。比如：<input type="checkbox" checked="checked">， $("input").attr("checked") : checked，$("input").prop("checked") : true。checked属性就属于bool类型属性。针对以上这个例子，我们知道attr获取checked的值是checked，因为当我们设置是也应该$("input").attr("checked","checked")，但有些人可能对jQuery不熟，会写成$("input").attr("checked",true)，那么这种写法行不行呢，也是可以的，因为jQueyr里面做了兼容处理。其实就是boolHook对象，大家可以在文章的最后看到这个对象，看它是如何处理的。
}
if ( value !== undefined ) { //设置操作
if ( value =http://www.mamicode.com/== null ) { //$("#div1").attr("chaojidan",null)这种情况，会把chaojidan的属性移除。
jQuery.removeAttr( elem, name );
} else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret; //如果有兼容性问题，就进行处理，然后把处理的值返回。
} else {
elem.setAttribute( name, value + "" ); //用普通的方式，进行设置操作。因为属性值都是字符串，所以把number转化成字符串。
return value;
}
} else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
return ret; //获取操作。先看是否有get的兼容性操作。
} else {
ret = jQuery.find.attr( elem, name ); //jQuery.find = Sizzle。Sizzle中的attr方法对getAttribute 方法进行了兼容性处理。
return ret == null ? undefined : ret;
}
},
attrHooks: {
type: {
set: function( elem, value ) { //这个方法是解决这样一个问题的：input = document.createElement("input");input.value = "http://www.mamicode.com/t";input.type = "radio";support.radioValue = http://www.mamicode.com/input.value ==="t";当你先对input的value赋值，然后再设置input的type为radio时，IE下的input的value会变成on，而其他浏览器会得到t。
if ( !jQuery.support.radioValue && value =http://www.mamicode.com/=="radio" && jQuery.nodeName(elem, "input") ) { //如果存在以上这个兼容性问题，也就是jQuery.support.radioValue =http://www.mamicode.com/false,IE下是false，value就是你设置type属性的值，并且元素是input，意思就是：你对input元素设置type=radio的操作。
var val = elem.value; //怎么解决IE下的这个兼容性问题呢，我们先把这个input的value值保存起来。等设置了type = "radio" 后，再把值赋过去。这样它的input的value就不会变成on了。
elem.setAttribute( "type", value );
if ( val ) {
elem.value = http://www.mamicode.com/val;
}
return value;
}
}
}
},
removeAttr: function( elem, value ) {
var name, propName,
i = 0,
attrNames = value && value.match( core_rnotwhite ); //core_rnotwhite = /\S+/g,这里的意思就是可以同时删除多个属性值，比如：$("div").removeAttr("id name class");，value = "http://www.mamicode.com/id name class"，调用match方法，并传入正则/\S+/g，会返回[id,name,class]。
if ( attrNames && elem.nodeType === 1 ) { //必须是元素节点Element
while ( (name = attrNames[i++]) ) {
propName = jQuery.propFix[ name ] || name; //propFix: {"for": "htmlFor","class":"className"}，如果要删除的属性名是for或者class，那么需要做兼容处理。因此你做$("div").removeAttr("class")操作时，就不会出问题。
if ( jQuery.expr.match.bool.test( name ) ) { //如果要删除的属性名属于bool型的属性（也就是说它的值通过[属性名]获取时，是false或者true）
elem[ propName ] = false; //需要把此bool型的属性值赋为false，因为这个属性已经被移除了，不应该用[属性名]获取时，返回true。比如:input元素的checked属性，当你移除这个checked属性时，你通过input.checked获得true，那么就会被认为input中有这个checked，而这时checked你已经移除了，所以必须设置它的input.checked=false。具体请看这里：http://www.cnblogs.com/chaojidan/p/4108777.html
}
elem.removeAttribute( name ); //调用原生的方法移除掉
}
}
},
prop: function( elem, name, value ) {
var ret, hooks, notxml,
nType = elem.nodeType;
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
if ( notxml ) { //不是xml文档，需要做兼容处理
name = jQuery.propFix[ name ] || name; //propFix上面已经讲了
hooks = jQuery.propHooks[ name ]; //如果name是tabIndex，需要做兼容处理。tabIndex可以切换光标的顺序（通过tab键），按元素中tabIndex的属性值大小（1,2,3....），从小到大进行切换。
}
if ( value !== undefined ) { //设置操作
return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ? ret : ( elem[ name ] = value ); //这里如果返回的是elem[ name ] = value，其实是return value。
} else { //获取操作
return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ? ret : elem[ name ];
}
},
propHooks: {
tabIndex: { //此属性是在获取时，会有兼容性问题。其实就是在元素默认不支持tabIndex属性时，并且没有显式设置它的tabIndex属性时，IE6-8会返回0，而标准浏览器下会返回-1。所以兼容处理，都返回-1.
get: function( elem ) {
return elem.hasAttribute( "tabindex" ) || rfocusable.test( elem.nodeName ) || elem.href ? elem.tabIndex : -1; //rfocusable = /^(?:input|select|textarea|button)$/i;，如果元素不属于正则中指定的这些元素时，并且元素没有href属性，那么就证明此元素默认不支持tabIndex属性。
}
}
}
......
});
boolHook = {
set: function( elem, value, name ) { //根据例子，假设你设置$("input").attr("checked",true)
if ( value =http://www.mamicode.com/== false ) { //value等于true。如果是$("input").attr("checked",false)就移除checked的属性。
jQuery.removeAttr( elem, name );
} else {
elem.setAttribute( name, name ); //$("input").attr("checked","checked")
}
return name;
}
};
if ( !jQuery.support.optSelected ) { //这里的hooks是针对select元素的第一个option元素是否会默认被选中。
jQuery.propHooks.selected = { //在IE下（老版本safari），不会默认选中，因此获取option的selected值时返回false，而其他浏览器返回true。
get: function( elem ) { //只有get方法，因为只有获取时才会出现这个问题。假设你要获取option的selected属性值。
var parent = elem.parentNode;
if ( parent && parent.parentNode ) {
parent.parentNode.selectedIndex; //只要在获取option的selected的值时，先访问select.selectedIndex属性，就可以设置option.selected = true了。意思就是在访问option的selected属性时，先访问其父级select元素的selectedIndex属性，强迫浏览器计算option的selected属性，以得到正确的值。需要注意的是option元素的父元素不一定是select，也有可能是optgroup。这里是支持IE9+,所以option的parentNode是optgroup，optgroup的parentNode是select。
}
return null;
}
};
}
jQuery.each([ //不懂each方法的，可以去这里看下http://www.cnblogs.com/chaojidan/p/4156600.html
"tabIndex",
"readOnly",
"maxLength",
"cellSpacing",
"cellPadding",
"rowSpan",
"colSpan",
"useMap",
"frameBorder",
"contentEditable"
], function() {
jQuery.propFix[ this.toLowerCase() ] = this; //这里的this就是数组中的选项，比如：jQuery.propFix[ tabIndex.toLowerCase() ] = tabIndex;之所以这样做，是以防有人做jQuery属性操作时，把名字写成了全部是小写的情况，这里做下兼容，使用户输入全部是小写属性名，也能正常操作。
});
这一课，还是比较重要的，牵涉的东西很多，想彻底弄明白，还是需要一定的基础的。
加油！
jquery源码解析：jQuery对元素属性的操作1