首页 > 代码库 > jQuery.attributes源码分析(attr/prop/val/class)
jQuery.attributes源码分析(attr/prop/val/class)
回顾
有了之前的几篇对于jQuery.attributes相关的研究，是时候分析jQuery.attr的源码了
- Javascript中的attribute和property分析
- attribute和property兼容性分析
- jQuery.access源码分析
结构
jQuery.fn.extend({ attr: function (name, value) { }, removeAttr: function (name) { }, prop: function (name, value) { }, removeProp: function (name) { }, hasClass: function () {}, addClass:function () {}, toggleClass:function () {}, val: function () {}});jQuery.extend({ attr: function () { }, removeAttr: function () { }, prop: function () { },});
关于jQuery的hasClass/addClass/removeClass/toggleClass
- 1.承袭jQuery一贯的风格，对函数的重载做的相当不错，不仅可以传入单个类名，而且可以传入用空格分隔的类型，传入函数
- 2.addClass思路：
- 1.判断value是否为函数，如果是，遍历jQuery内部所有元素，传入函数返回值，jQuery.addClass之
- 2.将传入的className进行处理，双层循环，一层循环所有元素，一层循环所有类名
- 3.添加className时进行判断，如果当前元素的className为空，直接赋值，如果不为空，判断当前需要插入的类名是否存在，如果不存在，拼接进入缓存类名字符串
- 4.将缓存类名字符串设置进入元素的className
- 3.removeClass与addClass如出一辙，删除前依旧进行判断是否存在
- 4.hasClass：将元素的当前类名取出，用字符串的indexOf方法进行判断是否存在
- 5.toggleClass：
- 1.处理传入函数的可能
- 2.遍历jQuery所有元素，如果value值是个字符串，遍历所有类名，用addClass和removeClass进行状态转换
- 3.如果type没有传入，或者type是字符串，判断是否value为false，如果是，就将className设置为空，否则，将className从缓存系统里取出来，设置回去
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 =http://www.mamicode.com/=="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 =http://www.mamicode.com/=="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 =http://www.mamicode.com/== 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.attr和jQuery.prop
- 1.依赖jQuery.access保证传参的灵活性
- 2.对于很多种意外情况进行判断过滤（注释节点、xml等、falsh没有getAttribute等）
- 3.运用钩子机制，解决浏览器的兼容问题，为了兼容IE6-8确实做了不少钩子，也够辛苦，也保证了可扩展性，很明显,jQuery 2.x却没有那么多的钩子的兼容
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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/== 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 = "http://www.mamicode.com/t"; input.setAttribute( "type", "radio" ); support.radioValue = input.value =http://www.mamicode.com/=="t"; IE678是false 如果是IE(6,7,8,9,10,11) && input.setAttribute(‘type‘,‘radio‘);的时候，才会进入到下面这个判断 */ type: { set: function (elem, value) { if (!jQuery.support.radioValue && value =http://www.mamicode.com/=="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 =http://www.mamicode.com/ 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; } } }});
关于钩子
在之前的文章中，有关于这方面浏览器的兼容性分析，但是还不完全 attribute和property兼容性分析 关于tabIndex，请参考司徒正美大牛的 tabIndex属性总结的比较好！ boolHook的原因请看下sandy的 各浏览器中使用getAttribute获取checkbox/radio的checked值不同 其他的情况在代码中都已经有了注释.
/** * rboolean = /^(?:checked|selected|autofocus|autoplay|async|controls|defer|disabled|hidden| * loop|multiple|open|readonly|required|scoped)$/i * * 关于IE下面的checked和selected，IE6、IE7要用defaultChecked和defaultSelected代替checked和selected * * http://www.cnblogs.com/rubylouvre/p/3524113.html * http://www.cnblogs.com/snandy/archive/2012/05/06/2473936.html * http://www.cnblogs.com/rubylouvre/p/3524113.html */// Hook for boolean attributesboolHook = { get: function (elem, name) { var // Use .prop to determine if this attribute is understood as boolean prop = jQuery.prop(elem, name), // Fetch it accordingly attr = typeof prop === "boolean" && elem.getAttribute(name), /** * 好长的一个3元运算符， * 1、先判断prop是否为boolean值，如果不是，就取getAttributeNode，如果是的话，进入下一个 * 2、先判断是否支持getAttribute和setAttribute和getsetInput，如果不支持，就去判断字符为selected或者checked * 如果支持，就是attr */ detail = typeof prop === "boolean" ? getSetInput && getSetAttribute ? attr != null : // oldIE fabricates an empty string for missing boolean attributes // and conflates checked/selected into attroperties // IE67的selected和checked，如果在prop中是个boolean，那么就在elem上去defaultSelected和defaultChecked ruseDefault.test(name) ? elem[ jQuery.camelCase("default-" + name) ] : !!attr : // fetch an attribute node for properties not recognized as boolean elem.getAttributeNode(name); /** * detail.value是否不是false，如果不是就返回name，如果是返回undefined */ return detail && detail.value !== false ? name.toLowerCase() : undefined; }, set: function (elem, value, name) { /** * $(‘input[type=radio]‘).attr(‘checked‘,false); 如果是这种情况，直接调用removeAttr */ if (value =http://www.mamicode.com/== false) { // Remove boolean attributes when set to false jQuery.removeAttr(elem, name); } else if (getSetInput && getSetAttribute || !ruseDefault.test(name)) { /** * 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" }, * * ruseDefault = /^(?:checked|selected)$/i; * 如果不是IE6也不是IE7，或者不是checked|selected，来到这个循环 * 如果IE8+，那么将，设置 elem.setAttribute(‘readonly‘,‘readonly‘); * 如果IE8-,设置elem.setAttribute(‘readOnly‘,‘readonly‘); 这样设置，为了property name的设置正确？ */ // IE<8 needs the *property* name elem.setAttribute(!getSetAttribute && jQuery.propFix[ name ] || name, name); // Use defaultChecked and defaultSelected for oldIE } else { //如果IE6、或者IE7，并且是selected、checked elem[ jQuery.camelCase("default-" + name) ] = elem[ name ] = true; //elem[‘defaultSelected‘] = elem[‘selected‘] = true; //elem[‘defaultChecked‘] = elem[‘checked‘] = true; //但是，为什么要将selected和checked单独出来呢？ } return name; }};// fix oldIE value attroperty// getSetInput IE567891011测试通过// getSetAttribute IE67测试不过/** * */if (!getSetInput || !getSetAttribute) { jQuery.attrHooks.value = { get: function (elem, name) { var ret = elem.getAttributeNode(name); //如果是input，那么就去defaultValue，如果不是，就用attributeNode取值 return jQuery.nodeName(elem, "input") ? // Ignore the value *property* by using defaultValue elem.defaultValue : ret && ret.specified ? ret.value : undefined; }, set: function (elem, value, name) { if (jQuery.nodeName(elem, "input")) { //如果是input，换成defaultValue，如果不是，用nodeHook.set // Does not return so that setAttribute is also used elem.defaultValue =http://www.mamicode.com/ value; } else { // Use nodeHook if defined (#1954); otherwise setAttribute is fine return nodeHook && nodeHook.set(elem, value, name); } } };}// IE6/7 do not support getting/setting some attributes with get/setAttributeif (!getSetAttribute) { // Use this for any attribute in IE6/7 // This fixes almost every IE6/7 issue /** * <button value="http://www.mamicode.com/abc">def</button> * button.getAttribute(‘value‘) IE67-> def chrome->abc * 所以这里需要转换一下 */ nodeHook = jQuery.valHooks.button = { get: function (elem, name) { var ret = elem.getAttributeNode(name); return ret && ( name === "id" || name === "name" || name === "coords" ? ret.value !== "" : ret.specified ) ? ret.value : undefined; }, set: function (elem, value, name) { // Set the existing or create a new attribute node var ret = elem.getAttributeNode(name); if (!ret) { elem.setAttributeNode( (ret = elem.ownerDocument.createAttribute(name)) ); } ret.value = value += ""; // Break association with cloned elements by also using setAttribute (#9646) return name === "value" || value =http://www.mamicode.com/== elem.getAttribute(name) ? value : undefined; } }; // Set contenteditable to false on removals(#10429) // Setting to empty string throws an error as an invalid value // contenteditable:规定是否可编辑元素的内容 jQuery.attrHooks.contenteditable = { get: nodeHook.get, set: function (elem, value, name) { //$(‘#box‘).attr(‘contenteditable‘,‘‘); 如果是这种情况，则将其设置为false nodeHook.set(elem, value === "" ? false : value, name); } }; // Set width and height to auto instead of 0 on empty string( Bug #8150 ) // This is for removals /** * 设置宽度、高度为空字符串时，使用auto代替 * $.attr(‘width‘,‘‘) --> setAttribute(‘width‘,‘auto‘); */ jQuery.each([ "width", "height" ], function (i, name) { jQuery.attrHooks[ name ] = jQuery.extend(jQuery.attrHooks[ name ], { set: function (elem, value) { if (value =http://www.mamicode.com/=="") { elem.setAttribute(name, "auto"); return value; } } }); });}// Some attributes require a special call on IE// http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx/** * href src 返回绝对地址，自动补入链接,针对IE， */if (!jQuery.support.hrefNormalized) { jQuery.each([ "href", "src", "width", "height" ], function (i, name) { jQuery.attrHooks[ name ] = jQuery.extend(jQuery.attrHooks[ name ], { get: function (elem) { var ret = elem.getAttribute(name, 2); // !!!getAttribute加入第二个参数“2”，返回此属性的value值 return ret == null ? undefined : ret; } }); }); // href/src property should get the full normalized URL (#10299/#12915) jQuery.each([ "href", "src" ], function (i, name) { jQuery.propHooks[ name ] = { get: function (elem) { //在IE里面getAttribute，是可选的，有两个参数，第二个参数类型是整数，可填写0,1,2,4。 0是默认值，2是返回这个属性的value值。 //返回属性值作为一个完全展开的URL。只适用于URL属性 return elem.getAttribute(name, 4); } }; });}/** * a.style.cssText = "top:1px;float:left;opacity:.5"; * support.style = /top/.test( a.getAttribute("style") ); * * 在IE下，box.setAttribte(‘style‘,‘color:blue‘); box.style is a object * 所以，在此兼容，用cssText替换之 * 1.8以前的版本是return elem.style.cssText.toLowerCase() || undefine IE返回的css属性都是大写，所以小写转换 */if (!jQuery.support.style) { jQuery.attrHooks.style = { get: function (elem) { // Return undefined in the case of empty string // Note: IE uppercases css property names, but if we were to .toLowerCase() // .cssText, that would destroy case senstitivity in URL‘s, like in "background" return elem.style.cssText || undefined; }, set: function (elem, value) { return ( elem.style.cssText = value + "" ); } };}// Safari mis-reports the default selected property of an option// Accessing the parent‘s selectedIndex property fixes it/** * 获取元素option的selected属性,修复在IE默认不选中的BUG * * var select = document.createElement(‘select‘); var option = document.createElement(‘option‘); option.innerHTML = ‘option111‘; option.value = http://www.mamicode.com/1;>*/if (!jQuery.support.optSelected) { jQuery.propHooks.selected = jQuery.extend(jQuery.propHooks.selected, { get: function (elem) { var parent = elem.parentNode; if (parent) { // 访问父级selectedIndex属性，修复选择下标 parent.selectedIndex; // Make sure that it also works with optgroups, see #5701 if (parent.parentNode) { // 确保也适用于optgroups元素 parent.parentNode.selectedIndex; } } return null; } });}// IE6/7 call enctype encoding/** * 修复IE6/7调用enctype编码 * * http://www.jb51.net/article/30389.htm * http://www.jb51.net/article/39485.htm * http://www.cnblogs.com/top5/archive/2011/07/13/2105260.html */if (!jQuery.support.enctype) { jQuery.propFix.enctype = "encoding";}// Radios and checkboxes getter/setter/** * $(‘input[type=radio]‘).val(); * * 获取radio/checkbox的value属性默认值 * safair默认为""空字符串,其他为on * * <input type="radio"> * support.checkOn = !!input.value; */if (!jQuery.support.checkOn) { jQuery.each([ "radio", "checkbox" ], function () { jQuery.valHooks[ this ] = { get: function (elem) { // Handle the case where in Webkit "" is returned instead of "on" if a value isn‘t specified return elem.getAttribute("value") === null ? "on" : elem.value; } }; });}/** * 针对radio和checkbox多选操作,在val里面传入数组 * 如果当前input的value值在value数组中，那么，将之选中(elem.checked = true) * * $(‘input[type=radio]‘).val([1,2,3,4,5,6]); * */jQuery.each([ "radio", "checkbox" ], function () { jQuery.valHooks[ this ] = jQuery.extend(jQuery.valHooks[ this ], { set: function (elem, value) { if (jQuery.isArray(value)) { return ( elem.checked = jQuery.inArray(jQuery(elem).val(), value) >= 0 ); } } });});
关于val
val方法主要做的就是对于option和select的兼容性的处理，正常情况下直接取Element.vlaue进行操作，亮点依旧在钩子技术和参数重载上.
val: function (value) { var ret, hooks, isFunction, elem = this[0]; /** * 如果没有传值，说明是取值 $(‘#box‘).val() * 1.先通过elem.type或者elem.nodeName取得钩子 * 2.如果钩子存在，并且钩子的返回值不是undefined，那么返回钩子返回的值 * 3.如果没有进入钩子，那就简单处理下得到的值，返回之 */ if (!arguments.length) { if (elem) { hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ]; if (hooks && "get" in hooks && (ret = hooks.get(elem, "value")) !== undefined) { return ret; } ret = elem.value; return typeof ret === "string" ? // handle most common string cases // 如果ret是个字符串，将字符串去掉回车什么的，返回 ret.replace(rreturn, "") : // handle cases where value is null/undef or number // 如果不是字符串，那就看看是不是undefined或者null，如果是返回空字符，如果不是，那就返回ret了 ret == null ? "" : ret; } return; } isFunction = jQuery.isFunction(value); /** * 可以传入以下值： * $(‘.box‘).val(function (index,value) { * * }); * * $(‘.box‘).val([1,2,3,4,5]); * */ return this.each(function (i) { var val, self = jQuery(this); //如果不是node节点，返回之 if (this.nodeType !== 1) { return; } //如果是个函数，执行之 if (isFunction) { val = value.call(this, i, self.val()); } else { val = value; } // Treat null/undefined as ""; convert numbers to string //将null undefined 转换成空字符串 //将数字转换为字符串 //转换数组，将数组中的元素全部转换为字符串 if (val == null) { val = ""; } else if (typeof val === "number") { val += ""; } else if (jQuery.isArray(val)) { val = jQuery.map(val, function (value) { return value =http://www.mamicode.com/= null ? "" : value + ""; }); } // 取得钩子 hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; // 如果进入了钩子，就用钩子中的设置方法 // 如果没有进入钩子，那就直接设置this.value = http://www.mamicode.com/val; 这里的this指向的是单个的DOM元素 // If set returns undefined, fall back to normal setting if (!hooks || !("set" in hooks) || hooks.set(this, val, "value") === undefined) { this.value =http://www.mamicode.com/ val; } }); }
参考
- http://www.cnblogs.com/aaronjs/p/3387906.html
- http://www.cnblogs.com/aaronjs/p/3387906.html
- http://www.jb51.net/article/50686.htm
- http://www.liyao.name/2013/09/differences-between-property-and-attribute-in-javascript.html
- http://www.cnblogs.com/rubylouvre/archive/2010/03/07/1680403.html
- http://ju.outofmemory.cn/entry/36093
- http://www.cnblogs.com/aaronjs/p/3387906.html
- http://www.jb51.net/article/29263.htm
- http://www.cnblogs.com/wangfupeng1988/p/3631853.html
- http://www.cnblogs.com/wangfupeng1988/p/3639330.html
- http://www.cnblogs.com/wangfupeng1988/p/3626300.html
- http://www.cnblogs.com/snandy/archive/2011/09/01/2155445.html
- http://www.cnblogs.com/snandy/archive/2011/09/03/2163702.html
- http://www.cnblogs.com/snandy/archive/2011/08/27/2155300.html
- http://www.cnblogs.com/snandy/archive/2011/08/28/2155787.html
- http://www.cnblogs.com/snandy/archive/2011/08/27/2155718.html
- http://www.cnblogs.com/snandy/archive/2011/09/01/2155445.html
- http://www.cnblogs.com/snandy/archive/2011/09/01/2162088.html
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。