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

 

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元素的值修复