jQuery源码分析：jQuery对象属性设置(attr、access、$.attr)源代码分析

jQuery中设置对象属性有以下几种：

1、获取属性attr(name)　　

$("img").attr("src"); 

2、设置属性attr(name,value)

$("img").attr("src","test.jpg");

3、批量设置属性attr(properties)

$("img").attr({ src: "test.jpg", alt: "Test Image" });

4、为所有匹配的元素设置一个计算的属性值，由这个函数计算的值作为属性值。 attr(key, function(index, attr))

$("img").attr("title", function() { return this.src });
// 获取当前元素的src值作为title属性值

5、移除属性 removeAttr(name)

$("img").removeAttr("src");

其中都会用到jQuery对象的attr方法，attr的源代码如下：

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

可以看到，attr只是起到一个传值的作用，然后返回的是access的返回值，再来看看access函数中的代码：

function access( elems, key, value, exec, fn, pass) {
     var length = elems.length;
     // 如果key是对象，则拆分成名值单独赋值
     if ( typeof key === "object" ) {
         for ( var k in key ) {
             access( elems, k, key[k], exec, fn, value );
         }
         return elems;
     }
     
     // 如果value含值,则给属性赋值
     if ( value !== undefined ) {
 
         // 如果value为函数的时候综合判断是否需要执行此函数
         // 判断VALUE是否为函数，是函数则exec为true
         exec = !pass && exec && jQuery.isFunction(value);
 
         // 拆分对象，单独赋值
         for ( var i = 0; i < length; i++ ) {
             // 对单独的对象调用jQuery.attr,设置属性
             // 如果value是函数则执行value.call( elems[i], i, fn( elems[i], key ) )
             fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass);
         }
         // 返回对象数组
         return elems;
     }
     
     // 如果上面的条件都不符合，length有值则获取属性值，无对象则为undefined
     return length ? fn( elems[0], key ) : undefined;
 }

access就像它单词的意思一样是一个入口，判断key、value值的不同类型，最终会把值传递给jQuery的静态方法attr处理，即（$.attr()）：

attr静态方法中分别对浏览器的兼容性、各种特殊属性做了相应的处理

jQuery.extend({
    attrFn: {
        val: true,
        css: true,
        html: true,
        text: true,
        data: true,
        width: true,
        height: true,
        offset: true
    },
        
    attr: function( elem, name, value, pass ) {
        // don't set attributes on text and comment nodes
        // 如果对象为空、文字、注释则返回undefined
        if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
            return undefined;
        }
        // 如果 name为 val、css、html、text、data、width、height、offset
        // 则直接调用jquery对应的方法如：$('p').html(value);
        if ( pass && name in jQuery.attrFn ) {
            return jQuery(elem)[name](value);
        }

        // 不是xml文档
        var notxml = elem.nodeType !== 1 || !jQuery.isXMLDoc( elem ),
            // Whether we are setting (or getting)
            // 是否需要设置或者获取
            set = value !== undefined;

        // Try to normalize/fix the name
        // 转换为适配的属性，如 class -> className
        name = notxml && jQuery.props[ name ] || name;

        // Only do all the following if this is a node (faster for style)
        // 元素element 对象
        if ( elem.nodeType === 1 ) {
            // These attributes require special treatment
            // rspecialurl = /href|src|style/
            var special = rspecialurl.test( name );

            // Safari mis-reports the default selected property of an option
            // Accessing the parent's selectedIndex property fixes it
            /*
            *  以下为opselected的bug修复
            *  http://www.cnblogs.com/GrayZhang/archive/2010/10/28/feature-detection-jquery1-4.html
            * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
             <select id="optSelected">
             </select>
             <script type="text/javascript">
             var select = document.getElementById('optSelected');
             var option = document.createElement('option');
             select.appendChild(option);
             console.log(option.selected);
             </script>
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

             以下为各浏览器中运行结果：

             浏览器      | 结果
             ----------- | -----
             IE6         | false
             IE7         | false
             IE8         | false
             IE9 beta    | false
             Firefox 3.6 | true
             Chrome 7    | true
             Safari 5    | false

             经测试，IE系列和Safari使用`appendChild`对空的`<select>`元素添加一个`<option>`后，该`<option>`的`selected`属性不会被默认设置为**true**。

             该问题引起的BUG描述如下：

             > 部分浏览器在获取option的selected属性时，会错误地返回false。

             该问题的解决方案是在访问`selected`属性时，先访问其父级`<select>`元素的`selectedIndex`属性，强迫浏览器计算`<option>`的`selected`属性，
             以得到正确的值。需要注意的是`<option>`元素的父元素不一定是`<select>`，也有可能是`<optgroup>`。具体代码如下：

             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
             if (!support.optSelected) {
             var parent = option.parentNode;
             parent.selectedIndex;
             //处理optgroup时的情况
             if (parent.parentNode) {
             parent.parentNode.selectedIndex;
             }
             }
             return option.selected;
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
             */
            if ( name === "selected" && !jQuery.support.optSelected ) {
                var parent = elem.parentNode;
                if ( parent ) {
                    parent.selectedIndex;
    
                    // Make sure that it also works with optgroups, see #5701
                    if ( parent.parentNode ) {
                        parent.parentNode.selectedIndex;
                    }
                }
            }

            // If applicable, access the attribute via the DOM 0 way
            if ( name in elem && notxml && !special ) {
                if ( set ) {
                    // We can't allow the type property to be changed (since it causes problems in IE)
                    // rtype = /(button|input)/i,
                    // button 与 input 不允许修改 type属性
                    if ( name === "type" && rtype.test( elem.nodeName ) && elem.parentNode ) {
                        jQuery.error( "type property can't be changed" );
                    }

                    elem[ name ] = value;
                }

                // browsers index elements by id/name on forms, give priority to attributes.
                // 元素为form
                if ( jQuery.nodeName( elem, "form" ) && elem.getAttributeNode(name) ) {
                    return elem.getAttributeNode( name ).nodeValue;
                }

                // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
                // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
                if ( name === "tabIndex" ) {
                    var attributeNode = elem.getAttributeNode( "tabIndex" );

                    return attributeNode && attributeNode.specified ?
                        attributeNode.value :
                        rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
                            0 :
                            undefined;
                }

                return elem[ name ];
            }

            if ( !jQuery.support.style && notxml && name === "style" ) {
                if ( set ) {
                    elem.style.cssText = "" + value;
                }

                return elem.style.cssText;
            }

            if ( set ) {
                // convert the value to a string (all browsers do this but IE) see #1070
                elem.setAttribute( name, "" + value );
            }

            var attr = !jQuery.support.hrefNormalized && notxml && special ?
                    // Some attributes require a special call on IE
                    elem.getAttribute( name, 2 ) :
                    elem.getAttribute( name );

            // Non-existent attributes return null, we normalize to undefined
            return attr === null ? undefined : attr;
        }

        // elem is actually elem.style ... set the style
        // Using attr for specific style information is now deprecated. Use style instead.
        return jQuery.style( elem, name, value );
    }
});