读jQuery之十七（attribute/property/class）

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34099526

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量68

点赞数

文章标签： javascript ViewUI

本文详细解读了jQuery属性模块提供的方法，包括attr/removeAttr, prop/removeProp, addClass/removeClass/toggleClass/hasClass, val等，并探讨了jQuery.access方法背后的实现逻辑，以及如何解决不同浏览器之间的兼容性问题。

jQuery的属性模块提供了如下方法

attr/removeAttr

prop/removeProp（1.6）

addClass/removeClass/toggleClass/hasClass

val

提供了几个静态方法以支持JQ对象以上方法，如jQuery.attr 对应 attr，即jq对象的attr方法内部调用了jQuery.attr。其次还有

jQuery.removeAttr -> removeAttr

jQuery.prop -> prop

看代码可发现attr和prop方法中都直接调用的是jQuery.access

attr: function( name, value ) {
	return jQuery.access( this, name, value, true, jQuery.attr );
},
prop: function( name, value ) {
	return jQuery.access( this, name, value, true, jQuery.prop );
},

最后一个参数分别是jQuery.attr，jQuery.prop。可以想象在jQuery.access中会调用传入的这个函数。下面是jQuery.access的源码

access: function( elems, key, value, exec, fn, pass ) {
	var length = elems.length;

	// Setting many attributes
	if ( typeof key === "object" ) {
		for ( var k in key ) {
			jQuery.access( elems, k, key[k], exec, fn, value );
		}
		return elems;
	}

	// Setting one attribute
	if ( value !== undefined ) {
		// Optionally, function values get executed if exec is true
		exec = !pass && exec && jQuery.isFunction(value);

		for ( var i = 0; i < length; i++ ) {
			fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
		}

		return elems;
	}

	// Getting an attribute
	return length ? fn( elems[0], key ) : undefined;
},

当设置/获取属性的时候遍历jQuery对象，依次调用fn函数。这里的fn可能是jQuery.attr和jQuery.prop。

需要注意的是这里用for遍历elems，这个elems实际是jQuery对象，jQuery对象它是一个ArrayLike。

大概就是如此，剩下的一堆hooks是用来解决浏览器兼容性的问题。如jQuery.attrHooks、jQuery.propHooks、jQuery.valHooks。列举如下

1，IE6/7不完全支持setAttribute，比如不能设置class,for等属性

2，IE6/7中getAttribute获取href / src 属性（相对路径）值与其它浏览器不同

3，IE6/7中获取Button元素的值有bug

4，IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值

5，获取tabIndex属性有差异

6，布尔类型属性的修复，如selected，disabled，checked等

7，select和option元素的值修复