jQuery源码分析系列：属性操作

属性操作

1.6.1相对1.5.x最大的改进，莫过于对属性.attr()的重写了。在1.6.1中，将.attr()一分为二： .attr()、.prop()，这是一个令人困惑的变更，也是一个破坏性的升级，会直接影响到无数的网站和项目升级到1.6。

简单的说，.attr()是通过setAttribute、getAttribute实现，.prop()则通过Element[ name ]实现：

 

jQuery.attr	setAttribute, getAttribute
jQuery.removeAttr	removeAttribute, removeAttributeNode(getAttributeNode )
jQuery.prop	Element[ name ]
jQuery.removeProp	delete Element[ name ]

 

事实上.attr()和.prop()的不同，是HTML属性（HTML attributes）和DOM属性（DOM properties）的不同。HTML属性解析的是HTML代码中的存在的属性，返回的总是字符串，而DOM属性解析的是DOM对象的属性，可能是字符串，也可能是一个对象，可能与HTML属性相同，也可能不同。

<a href="abc.html" class="csstest" style="font-size: 30px;">link</a>

<input type="text" value="123">

<input type="checkbox" checked="checked">

javascript代码：

console.info( $('#a').attr('href') ); // abc.html

console.info( $('#a').prop('href') ); // file:///H:/open/ws-nuysoft/com.jquery/jquery/abc.html

 
console.info( $('#a').attr('class') ); // csstest
console.info( $('#a').prop('class') ); // csstest

console.info( document.getElementById('a').getAttribute('class') ); // csstest

console.info( document.getElementById('a').className ); // csstest

console.info( $('#a').attr('style') ); // font-size: 30px;

console.info( $('#a').prop('style') ); // CSSStyleDeclaration { 0="font-size", fontSize="30px", ...}

console.info( document.getElementById('a').getAttribute('style') ); // font-size: 30px;

console.info( document.getElementById('a').style ); // CSSStyleDeclaration { 0="font-size", fontSize="30px", ...}

console.info( $('#text').attr('value') ); // 123
console.info( $('#text').prop('value') ); // 123

console.info( $('#checkbox').attr('checked') ); // checked
console.info( $('#checkbox').prop('checked') ); // true

 

 

不同之处总结如下：

　　1.属性名可能不同，尽管大部分的属性名还是相似或一致的。

　　2.HTML属性值总是返回字符串，DOM属性值则可能是整型、字符串、对象，可以获取更多的内容

　　3.DOM属性总是返回当前的状态（值），而HTML属性（在大多数浏览）返回的初始化时的状态（值）

　　4.DOM属性只能返回固定属性名的值，而HTML属性则可以返回在HTML代码中自定义的属性名的值

　　5.相对于HTML属性的浏览器兼容问题，DOM属性名和属性值在浏览器之间的差异更小，并且DOM属性也有标准可依

 

优先使用.prop()，因为.prop()总是返回最新的状态（值）

 

从源码可以看出.attr()的处理过程，先特殊处理各种特殊情况，再用约定getAttribute()和setAttribute()方法

 

jQuery.attr()源码：

　　.attr(attributeName) 取得第一个匹配元素的属性值（当属性没有被设置时，返回undefined，不能用在文本节点、注释节点、属性节点上）

　　.attr(attributeName, value) 设置单个属性

　　.attr(map) 设置多个属性

　　.attr(attributeName, function(index, attr)) 通过函数的返回值设置属

　　　　//工具方法  设置或获取HTML元素  setAttribute和getAttribute实现        
　　　　attr: function( elem, name, value, pass ) {
            var nType = elem.nodeType;
            //节点类型不能是：文本 注释 属性节点
            if(!elem || nType === 3 || nType === 8 nType === 2){
                return undefined;
            }
            //1>>遇到与方法同名的属性 则执行方法
            //2>>遇到扩展或需要修正的属性 执行相应的方法
            //判断属性名是否在jQuery提供的方法jQuery.attrFn中，是则直接调用方法。
            if(pass && name in jQuery.attrFn){//属性方法
                return jQuery(elem)[name](value);
            }
            //如果不支持getAttribute 则调用$.prop()方法
            if(!("getAttribute" in elem)){
                return jQuery.prop(elem,name,value);
            }
            var ret,hooks,
                notxml = nType !==1 || !jQuery.isXMLDoc(elem);//判断documentElement是否存在

            //格式化name      attrFix: { tabindex: "tabIndex"}
            name = notxml && jQuery.attrFix[name] || name;
            //属性钩子：type:  tabIndex
            hooks = jQuery.attrHooks[name];
            //如果没有name对应的钩子
            if(!hooks){
                //使用boolean钩子处理boolean属性
                (typeof value === "boolean" || value === undefined || value.tolowerCase() === name.toLowerCase())){
                    //使用布尔钩子(静态方法对象):set get
                    hooks = boolHook;
                //使用表单钩子
                }else if (formHook && (jQuery.nodeName(elem,"form") || rinvalidChar.test(name))){
                //使用表单钩子(静态方法对象):set get
                hooks = formHook;
                }
            }

            //定义了value   设置或删除
            if(value !== undefined){
            /*
                typeof null === 'object'   true
                typeof undefined === 'undefined'  true
                null == undefined   true
                null === undefined  false
            */
                if(value === null){//有值但是为空 即将值设置为空
                    jQuery.reomveAttr(elem,name);
                    return undefined;
                //属性钩子 布尔钩子 表单钩子 如果有对象的钩子 就调用set方法
                }else if(hooks && "set" in hooks && noxml && (ret = hooks.set(elem,value,name))!==undefeind){
                    return ret;
                }else{
                    //调用setAttribute方法
                    elem.setAttribute(name,"" + value);
                    return value;
                }
            //value是undefined，说明去属性 ，存在对应钩子有get方法，调用钩子的get方法
            }else if(hooks && "get" in hooks && notxml){
                return hooks.get(elem,name);
            }else{
                //取属性值
                ret = elem.getAttribute(name);
                //属性不存返回null  格式化为undefined
                return ret === null ? undefined : ret;
            }
        },

其中调用的钩子有些不明白的地方：

 

attrHooks源码：如果name = type属性，则加判断后调用setAttribute设置属性值，或者name = tabIndex时通过getAttributeNode("tabIndex")获得//获得自定义对象属性.

    //属性钩子 name = type || tabIndex
    attrHooks: {
        type: {
            set: function( elem, value ) {
                //type属性在IE下不能改变 如果改变报错
                if ( rtype.test( elem.nodeName ) && elem.parentNode ) {
                    jQuery.error( "type property can't be changed" );
                } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
                    var val = elem.value;
                    elem.setAttribute( "type", value );//最后调用setAttribute设置type属性的值
                    if ( val ) {
                        elem.value = val;
                    }
                    return value;
                }
            }
        },
        tabIndex: {
            get: function( elem ) {
                //获得tabIndex的值
                var attributeNode = elem.getAttributeNode("tabIndex");//获得自定义对象属性
                return attributeNode && attributeNode.specified ?
                    parseInt( attributeNode.value, 10 ) ://获得自定义对象属性的值
                    rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
                        0 :
                        undefined;
            }
        }
    },

 

AttrFn源码：如果name在这个属性方法的对象中，直接调用这个属性方法。

      //取属性用到的方法
      attrFn: {
        val: true,
        css: true,
        html: true,
        text: true,
        data: true,
        width: true,
        height: true,
        offset: true
    },

 

boolHook源码：

    //bool钩子
    boolHook = {
        get: function( elem, name ) {
            // Align boolean attributes with corresponding properties
            return elem[ jQuery.propFix[ name ] || name ] ?
                name.toLowerCase() :
                undefined;
        },
        set: function( elem, value, name ) {
            var propName;
            if ( value === false ) {//value不存在时，删除boolean属性
                jQuery.removeAttr( elem, name );
            } else {
                //属性名 是否在propFix中，存在就直接调用
                propName = jQuery.propFix[ name ] || name;
                if ( propName in elem ) {
                    elem[ propName ] = value;
                }
                //propName不在elem中就用setAttribute
                elem.setAttribute( name, name.toLowerCase() );
            }
            return name;
        }
    };

 

formHook源码：设置表单钩子，get/set。

 

$.prop()源码：

        //获取DOM属性
        prop: function( elem, name, value ) {
            var nType = elem.nodeType;
            //节点类型不能是：文本 注释 属性节点
            if(!elem || nType === 3 || nType === 8 nType === 2){
                return undefined;
            }
            var ret,hooks,
                notxml = nType !==1 || !jQuery.isXMLDoc(elem);//判断documentElement是否存在

            //格式化name      attrFix: { tabindex: "tabIndex"}
            name = notxml && jQuery.attrFix[name] || name;
            //属性钩子：name = type || tabIndex
            hooks = jQuery.attrHooks[name];
            if(value !== undefined){
                //如果钩子存在set  调用set方法
                if(hooks && "set" && (ret = hooks.set(elem,value,name))!==undefined){
                    return ret;
                }else{
                    return (elem[name] = value);
                }
            //读取
            }else{
                if(hooks && "get" && (ret = hooks.get(elem,value,name))!==undefined){
                    return ret;
                }else{
                    return elem[name];
                }
            }
        },

 

jQuery中调用access方法实现jQuery.fn.attr和jQuery.fn.prop：

　　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 );
　　}

$.access方法源码：

多功能函数:读取或设置集合的属性值；值为函数时会被执行
　　1>>elems:元素的集合，【collection】【类】数组
　　2>>key：属性名称，key的只为object时，会拆解key为key，value形式再次执行jQuery.access
　　3>>value:属性值
　　4>>exec：在属性值为function时是否对设置之前的value值执行函数（这里为true）
　　5>>fn:执行的函数
　　6>>pass:是否设置为jQuery对象的属性  attr时使用
　　

　　用于fn：jQuery.fn.css(),jQuery.fn.attr(),jQueyr.fn.prop
　　return jQuery.access( this, name, value, true, function( elem, name, value ) {});

说明：主要用于参数的循环处理，为什么要这样做？待详细分析

access:function(elems,key,value,exec,fn,pass){
                var elems = elems.length;
                //如果有多个属性就迭代
                if(typeof key === "object"){
                    for(var k in key){//key的参数循环处理
                        jQuery.access(elems,k,key[k],exec,fn,value);
                    }
                    return elems;
                }
                //只设置一个属性
                if(value !== undefined){
                    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;
                }
                //读取属性
                return length ? fn(elems[0],key) : undefined;

            },