jQuery.attributes源码分析(attr/prop/val/class)

jQuery.fn.extend({

    /**
     * 向被选元素添加一个或多个类
     * @param value ‘aclass‘ ‘aclass bclass dclass‘,function () {}
     */
    addClass: function (value) {
        var classes, elem, cur, clazz, j,
            i = 0,
            len = this.length,
            proceed = typeof value === "string" && value; //检测value是否为字符串

        /**
         * $(‘#box‘).addClass(function (elem,oldClassName) {
         *      return ‘m-general-abc‘;
         * });
         *
         * 如果是个函数，那么逐个遍历现有元素，递归addClass方法
         */
        if (jQuery.isFunction(value)) {
            return this.each(function (j) {
                jQuery(this).addClass(value.call(this, j, this.className));
            });
        }

        // 如果是个字符串，那就执行正真的添加
        if (proceed) {
            // The disjunction here is for better compressibility (see removeClass)
            classes = ( value || "" ).match(core_rnotwhite) || []; //将value用空格分开成一个数组 classes = value.split(/\s+/);

            for (; i < len; i++) { //遍历所有的元素
                elem = this[ i ];
                cur = elem.nodeType === 1 && ( elem.className ? //检测是否为HTMLElement
                    ( " " + elem.className + " " ).replace(rclass, " ") : //去掉换行什么的，两边加上空格，防止出错
                    " " //如果没有class的话，那就等于一个空格
                    );

                if (cur) {
                    j = 0;
                    while ((clazz = classes[j++])) { //遍历所有的classes
                        if (cur.indexOf(" " + clazz + " ") < 0) { //如果没有的话，才加入，如有，跳出了就
                            cur += clazz + " ";
                        }
                    }
                    elem.className = jQuery.trim(cur); //设置className，并且trim一下

                }
            }
        }

        // 链式结构,返回被封装的元素
        return this;
    },

    removeClass: function (value) {
        var classes, elem, cur, clazz, j,
            i = 0,
            len = this.length,
            proceed = arguments.length === 0 || typeof value === "string" && value;

        if (jQuery.isFunction(value)) {
            return this.each(function (j) {
                jQuery(this).removeClass(value.call(this, j, this.className));
            });
        }
        if (proceed) {
            classes = ( value || "" ).match(core_rnotwhite) || [];

            for (; i < len; i++) {
                elem = this[ i ];
                // This expression is here for better compressibility (see addClass)
                cur = elem.nodeType === 1 && ( elem.className ?
                    ( " " + elem.className + " " ).replace(rclass, " ") : //去掉换行什么的，两边加上空格，防止出错
                    ""
                    );

                if (cur) {
                    j = 0;
                    while ((clazz = classes[j++])) {
                        // Remove *all* instances
                        while (cur.indexOf(" " + clazz + " ") >= 0) {
                            cur = cur.replace(" " + clazz + " ", " "); //如果存在，就删除
                        }
                    }
                    elem.className = value ? jQuery.trim(cur) : ""; //重新设置，如果没了，就设为空
                }
            }
        }

        // 链式结构,返回被封装的元素
        return this;
    },

    /**
     * 设置或移除被选元素的一个或多个类进行切换
     * 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
     * @param value String:类名  Function:规定返回需要添加或删除的一个或多个类名的函数$(selector).toggleClass(function(index,class,switch),switch)
     * @param stateVal 规定是否添加(true)或移除(false)类 为true不存在,则添加.为false,已存在,则删除
     * @returns {*}
     */
    toggleClass: function (value, stateVal) {
        var type = typeof value,
            isBool = typeof stateVal === "boolean";

        /**
         * $(‘#box‘).toggleClass(function (elem,oldClassName，stateVal) {
         *      return ‘m-general-abc‘;
         * });
         */
        if (jQuery.isFunction(value)) {
            return this.each(function (i) {
                jQuery(this).toggleClass(value.call(this, i, this.className, stateVal), stateVal);
            });
        }

        return this.each(function () {
            if (type === "string") {
                // toggle individual class names
                var className,
                    i = 0,
                    self = jQuery(this),
                    state = stateVal,
                    classNames = value.match(core_rnotwhite) || [];

                while ((className = classNames[ i++ ])) { //遍历所有的classNames
                    // check each className given, space separated list

                    //如果stateVal是布尔值，那么就去state，如果不是，就看hasClass是否有
                    //按照逻辑，执行添加或者删除class函数
                    state = isBool ? state : !self.hasClass(className);
                    self[ state ? "addClass" : "removeClass" ](className);
                }

                // Toggle whole class name
                // 如果没有传入type或者type是个布尔值，那么就取当前DOM元素的className属性，用缓存系统将__className__设置成当前的className
                //
            } else if (type === core_strundefined || type === "boolean") {
                if (this.className) {
                    // store className if set
                    jQuery._data(this, "__className__", this.className);
                }

                // If the element has a class name or if we‘re passed "false",
                // then remove the whole classname (if there was one, the above saved it).
                // Otherwise bring back whatever was previously saved (if anything),
                // falling back to the empty string if nothing was stored.
                // 这里就判断是否value为false，如果是，就将className设置为空，否则，将className从缓存系统里取出来，设置回去
                this.className = this.className || value === false ? "" : jQuery._data(this, "__className__") || "";
            }
        });
    },

    /**
     * 检查被选元素是否包含指定的 class
     * @param selector selector 类名
     * @returns {boolean} 返回true表示包含，返回false，表示未包含
     */
    hasClass: function (selector) {
        var className = " " + selector + " ",
            i = 0,
            l = this.length;
        for (; i < l; i++) {
            if (this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf(className) >= 0) {
                return true;
            }
        }

        return false;
    }
});

jQuery.fn.extend({
    attr: function (name, value) {
        return jQuery.access(this, jQuery.attr, name, value, arguments.length > 1);
    },

    removeAttr: function (name) {
        return this.each(function () {
            jQuery.removeAttr(this, name);
        });
    },

    prop: function (name, value) {
        return jQuery.access(this, jQuery.prop, name, value, arguments.length > 1);
    },

    removeProp: function (name) {
        name = jQuery.propFix[ name ] || name; //先取钩子
        return this.each(function () {
            // try/catch handles cases where IE balks (such as removing a property on window)
            // delete window[‘abc‘] // IE6~8 对象不支持此操作
            try {
                this[ name ] = undefined;
                delete this[ name ];
            } catch (e) {
            }
        });
    }
}));

jQuery.extend({
    valHooks: {
        option: {
            get: function (elem) {
                // specified:检测是否在HTML中设置了属性值，设置了返回true，否者返回false
                // 因为select下的option有value和text两种值，如果存在value属性，将返回value值，否者返回option的text文本
                // attributes.value is undefined in Blackberry 4.7 but
                // uses .value. See #6932
                var val = elem.attributes.value;
                return !val || val.specified ? elem.value : elem.text;
            }
        },
        select: {

            // http://blog.csdn.net/liyong199012/article/details/8161621
            get: function (elem) {
                var value, option,
                    options = elem.options,
                    index = elem.selectedIndex, //选中的索引，如果没有选中的话，默认为0



                    one = elem.type === "select-one" || index < 0,
                    values = one ? null : [],
                    max = one ? index + 1 : options.length,
                    i = index < 0 ?
                        max :
                        one ? index : 0;

                // Loop through all the selected options
                for (; i < max; i++) {
                    option = options[ i ];

                    // oldIE doesn‘t update selected after form reset (#2551)
                    if (( option.selected || i === index ) &&
                        // Don‘t return options that are disabled or in a disabled optgroup
                        //如果option是禁用的，或者被禁用的optGroup元素中的option，不返回值
                        // <option disabled="disabled"> 或者 <optgroup disabled="disabled"><option>111</option></optgroup>
                    /**
                     *  select.disabled = true;
                        support.optDisabled = !opt.disabled;

                        在老版本的Safari浏览器中，如果selected的disabled设置为true，option也会被自动的将disabled设置为true

                        !option.disabled -> 没有被禁用 如果safari的话，就看HTMLTag中是否指定了disabled为true

                        !option.parentNode.disabled || !jQuery.nodeName(option.parentNode, "optgroup")相当于
                        !(option.parentNode.disabled && jQuery.nodeName(option.parentNode, "optgroup"))意思是：
                        如果不是（option的父元素为optgroup，并且disabled为true）

                        总之，也就是判断option的disabled不是为true
                     */
                        ( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
                        ( !option.parentNode.disabled || !jQuery.nodeName(option.parentNode, "optgroup") )) {

                        // Get the specific value for the option
                        value = jQuery(option).val();

                        // We don‘t need an array for one selects
                        //如果是单选，直接返回值
                        if (one) {
                            return value;
                        }

                        // Multi-Selects return an array
                        // 如果是多选，把值放入数组中
                        values.push(value);
                    }
                }

                //多选时，返回一个数组
                return values;
            },

            /**
             * 先将value转换为数组，然后逐个遍历option元素
             * 如果option的val在value数组中时，设置option的selected为true
             * 如果一个都没有命中的话，修正selectedIndex的值为-1
             */
            set: function (elem, value) {
                var optionSet, option,
                    options = elem.options,
                    values = jQuery.makeArray(value),
                    i = options.length;

                while (i--) {
                    option = options[ i ];
                    if ((option.selected = jQuery.inArray(jQuery(option).val(), values) >= 0)) {
                        optionSet = true;
                    }
                }

                // force browsers to behave consistently when non-matching value is set
                if (!optionSet) {
                    elem.selectedIndex = -1;
                }
                return values;
            }
        }
    },

    attr: function (elem, name, value) {
        var hooks, notxml, ret,
            nType = elem.nodeType;

        // don‘t get/set attributes on text, comment and attribute nodes
        // 如果当前元素是文本节点，注释节点，或者 属性节点，直接return
        if (!elem || nType === 3 || nType === 8 || nType === 2) {
            return;
        }

        // Fallback to prop when attributes are not supported
        // 如果不支持getAttribute的话，就调用prop
        if (typeof elem.getAttribute === core_strundefined) {
            return jQuery.prop(elem, name, value);
        }

        //notxml = !(nType === 1 && jQuery.isXMLDoc(elem));
        // 不是xml
        notxml = nType !== 1 || !jQuery.isXMLDoc(elem);


        // All attributes are lowercase
        // Grab necessary hook if one is defined
        /**
         * 如果不是xml，就是HTML
         * 将name转化为小写，根据name找到hooks钩子
         */
        if (notxml) {
            name = name.toLowerCase();

            /**
             * rboolean = /^(?:checked|selected|autofocus|autoplay|async|controls|defer|disabled|hidden|
             *                  loop|multiple|open|readonly|required|scoped)$/i
             * 这些属性，在HTML标签内，都是字符串
             * <input id="box" checked="checked" /> 那么就用boolean的钩子
             */

            hooks = jQuery.attrHooks[ name ] || ( rboolean.test(name) ? boolHook : nodeHook );
        }

        //说明是设置值
        if (value !== undefined) {

            //如果value是空，就是要移除了
            if (value === null) {
                jQuery.removeAttr(elem, name);

            } else if (hooks && notxml && "set" in hooks && (ret = hooks.set(elem, value, name)) !== undefined) {
                /**
                 * 看看钩子里有没有，如果有的话，调用之，如果钩子有返回值，那么跳到这里
                 * 在钩子里，如果想用默认的setAttribute进行设置，那么久return undefined或者false，如果不想用默认的，就返回个true
                 */
                return ret;

            } else {
                //木有钩子，或者钩子返回空，直接setAttribute了
                elem.setAttribute(name, value + "");
                return value;
            }

        }
        /**
         * 这里没有value，是get值，如果钩子中有，那么调用钩子，如果有返回值，进入该if
         */
        else if (hooks && notxml && "get" in hooks && (ret = hooks.get(elem, name)) !== null) {
            return ret;

        } else {

            // In IE9+, Flash objects don‘t have .getAttribute (#12945)
            // Support: IE9+
            /**
             * IE9+的falsh没有getAttribute，放弃
             */
            if (typeof elem.getAttribute !== core_strundefined) {
                ret = elem.getAttribute(name);
            }

            // Non-existent attributes return null, we normalize to undefined

            // 没有可能ret是null，标准化为undefined
            return ret == null ?
                undefined :
                ret;
        }
    },

    removeAttr: function (elem, value) {
        var name, propName,
            i = 0,
            attrNames = value && value.match(core_rnotwhite);

        // $(‘#box‘).removeAttr(‘checked abc def‘);

        if (attrNames && elem.nodeType === 1) {

            //依次判断
            while ((name = attrNames[i++])) {
                propName = jQuery.propFix[ name ] || name;

                // Boolean attributes get special treatment (#10870)
                if (rboolean.test(name)) {
                    // Set corresponding property to false for boolean attributes
                    // Also clear defaultChecked/defaultSelected (if appropriate) for IE<8
                    if (!getSetAttribute && ruseDefault.test(name)) { //处理checked和selected
                        elem[ jQuery.camelCase("default-" + name) ] =
                            elem[ propName ] = false;
                    } else {
                        elem[ propName ] = false; //直接将值设置为false
                    }

                    // See #9699 for explanation of this approach (setting first, then removal)
                } else {
                    jQuery.attr(elem, name, "");
                }

                //原生调用
                elem.removeAttribute(getSetAttribute ? name : propName);
            }
        }
    },

    attrHooks: {
        /**
         * jQuery.support.radioValue 是如下逻辑判断
         *
         input.value = "t";
         input.setAttribute( "type", "radio" );
         support.radioValue = input.value === "t"; IE678是false

         如果是IE(6,7,8,9,10,11) && input.setAttribute(‘type‘,‘radio‘);的时候，才会进入到下面这个判断
         */
        type: {
            set: function (elem, value) {
                if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
                    // Setting the type on a radio button after the value resets the value in IE6-9
                    // Reset value to default in case type is set after value during creation
                    //先将原来的值备份下来，然后设置新值，最后再设置回去
                    var val = elem.value;
                    elem.setAttribute("type", value);
                    if (val) { //如果能转换为false，就跳出了
                        elem.value = val;
                    }
                    return value;
                }
            }
        }
    },

    propFix: {
        tabindex: "tabIndex",
        readonly: "readOnly",
        "for": "htmlFor",
        "class": "className",
        maxlength: "maxLength",
        cellspacing: "cellSpacing",
        cellpadding: "cellPadding",
        rowspan: "rowSpan",
        colspan: "colSpan",
        usemap: "useMap",
        frameborder: "frameBorder",
        contenteditable: "contentEditable"
    },

    // 跟attr大同小异，不再分析
    prop: function (elem, name, value) {
        var ret, hooks, notxml,
            nType = elem.nodeType;

        // don‘t get/set properties on text, comment and attribute nodes
        if (!elem || nType === 3 || nType === 8 || nType === 2) {
            return;
        }

        notxml = nType !== 1 || !jQuery.isXMLDoc(elem);

        if (notxml) {
            // Fix name and attach hooks
            name = jQuery.propFix[ name ] || name;
            hooks = jQuery.propHooks[ name ];
        }

        if (value !== undefined) {
            if (hooks && "set" in hooks && (ret = hooks.set(elem, value, name)) !== undefined) {
                return ret;

            } else {
                return ( elem[ name ] = value );
            }

        } else {
            if (hooks && "get" in hooks && (ret = hooks.get(elem, name)) !== null) {
                return ret;

            } else {
                return elem[ name ];
            }
        }
    },

    propHooks: {
        //http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html
        //http://www.w3help.org/zh-cn/causes/SD2021
        //http://aokunsang.iteye.com/blog/835787
        tabIndex: {
            get: function (elem) {
                // 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/
                // tabIndex不总是返回正确的值，所以要用getAttributeNode进行取值，详情请膜拜司徒正美的文章
                var attributeNode = elem.getAttributeNode("tabindex");

                /**
                 * 这里是针对IE6~8的情况，因为这几个浏览器是不会区分div的tabIndex的，而标准浏览器会返回-1
                 */
                return attributeNode && attributeNode.specified ?
                    parseInt(attributeNode.value, 10) :

                        //如果没有指定，那就判断是不是超链接或者表单元素，如果是，返回0，如果不是，返回undefined
                        rfocusable.test(elem.nodeName) || rclickable.test(elem.nodeName) && elem.href ?
                    0 :
                    undefined;
            }
        }
    }
});