属性操作

流程

1. 在jQuery.fn.prop内部调用了access方法。access方法内部，根据参数的情况，花式调用jQuery.prop中的方法。

知识点

1. attribute和property的区别。打印元素，可以方法，无论是id，class，data等大部分直接在元素上设置的属性，都属于attribute。而disabled，selected，checked在DOM元素上可见。

2.png

2. 对于input元素type舒心，对于tabIndex等设置的时候，使用Hook。jQuery中设置Hook的形式。

    propHooks = {
        tabIndex: {
            get: function( elem ) {
                // Support: IE <=9 - 11 only
                var tabindex = jQuery.find.attr( elem, "tabindex" );
                if ( tabindex ) {
                    return parseInt( tabindex, 10 );
                }
                if (
                    rfocusable.test( elem.nodeName ) ||
                    rclickable.test( elem.nodeName ) &&
                    elem.href
                ) {
                    return 0;
                }

                return -1;
            }
        }
    }

jQuery.prop中主要代码和逻辑

jQuery.extend({
    prop: function (elem, name, value) {
        var ret, hooks, nodeType = elem.nodeType;
        if (nType === 3 || nType === 8 || nType === 2) {
            return;
        }
        if (nType !== 1 || !jQuery.isXMLDoc(elem)) {
            // 将name进行处理，然后如果有相应的 hook 时，提取
            name = jQuery.propFix[name] || name;
            hooks = jQuery.propHooks[name];
        }
        // 如果是设置（也就是有key,有value），就调用hooks中的set方法
        if (value !== undefined) {
            if (hooks && 'set' in hooks && (ret = hook.set(ele, value, name)) !== undefined) {
                return ret;
            }
            // 没有hooks或者hooks中没有 set 方法，就直接设置
            return (elem[name] = value);
        }
        // 如果是获取，就调用hooks中get方法
        if (hooks && "get" in hooks && (ret = hooks.get(elem, name)) !== null) {
            return ret;
        }
        // 如果没有 hooks，但是获取，那么就直接在元素上取出就可以了
        return elem[name];
    }
})

access方法中多种情况的逻辑

var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
    // i 用来
    // len 元素的个数
    // bulk 为 true 的时候，key 是null/undefined
    var i = 0,
        len = elems.length,
        bulk = key == null;
    // Sets many values
    // 传入的 key 是关于属性的对象集合，说明是设置多个属性，因此要循环调用本身
    if ( jQuery.type( key ) === "object" ) {
        // 设置的时候，可以链式操作
        chainable = true;
        for ( i in key ) {
            access( elems, fn, i, key[ i ], true, emptyGet, raw );
        }

    // Sets one value
    // 如果传入了单个的值
    } else if ( value !== undefined ) {
        // 设置就是链式操作
        chainable = true;
        // value 不是 function
        if ( !jQuery.isFunction( value ) ) {
            raw = true;
        }
        // 当没有 key 的时候
        if ( bulk ) {

            // Bulk operations run against the entire set
            // 但是有非函数的 value 值时，就执行 fn ---- jQuery.prop 或者 jQuery.attr
            if ( raw ) {
                fn.call( elems, value );  /*(1)*/
                fn = null;

            // ...except when executing function values
            } else {
                bulk = fn;
                fn = function( elem, key, value ) {
                    return bulk.call( jQuery( elem ), value );
                };
            }
        }
        // 当有 key 值的时候，但是还要检测 value 是不是函数
        if ( fn ) {
            for ( ; i < len; i++ ) {
                // fn 内部执行的是 jQuery.prop 或者 jQuery.attr 
                // 根据是不是 function 有不同的操作
                fn(
                    elems[ i ], key, raw ?
                    value :
                    value.call( elems[ i ], i, fn( elems[ i ], key ) ) // 这个应该就是，function (index,attr) { index 是元素索引，attr 就是 fn() 的结果}
                );
            }
        }
    }
    // 之前的操作，相当于都是设置，之后的这几个就是取值返回

    // 由于 chainable 在有 value 时为 true，所以可链式操作，返回 elems
    if ( chainable ) {
        return elems;
    }

    // Gets
    // 如果不是链式（获取的时候不是链式）并且 key 为 null 或者 undefined
    if ( bulk ) {
        return fn.call( elems );
    }
    // 如果不是链式，但是有key，那么就是取出呀
    return len ? fn( elems[ 0 ], key ) : emptyGet;
};

jQuery.prop和jQuery.attr区别

1. 通过代码可以看到，prop是直接在元素山设置return (elem[name] = value)和获取return elem[name]
2. attr是通过ret = jQuery.find.attr( elem, name )和elem.setAttribute( name, value + "" );进行操作，其中前者利用了sizzle中的方法

现象

1. 通过attr设置了自定义属性，prop不能获取
2. 通过data设置的数据和attr设置的不相同