jQuery.attributes源码分析，attr/prop/val/class
回顾
有了之前的几篇对于jQuery.attributes相关的研究，是时候分析jQuery.attr的源码了
结构
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
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 === "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.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 = 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 /> 那么就用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;
}
}
}
});关于钩子
在之前的文章中，有关于这方面浏览器的兼容性分析，但是还不完全 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 attributes
boolHook = {
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 === 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 = 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/setAttribute
if (!getSetAttribute) {
// Use this for any attribute in IE6/7
// This fixes almost every IE6/7 issue
/**
* <button value="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 === 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 === "") {
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 = 1;
select.appendChild(option);
document.body.appendChild(select);
console.log(option.selected); //IE6~7 false 其他true
*
* IE<=11+
*/
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 == null ? "" : value + "";
});
}
// 取得钩子
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
// 如果进入了钩子，就用钩子中的设置方法
// 如果没有进入钩子，那就直接设置this.value = 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 = 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