流程
- 在
jQuery.fn.prop内部调用了access方法。access方法内部，根据参数的情况，花式调用jQuery.prop中的方法。
知识点
-
attribute和property的区别。打印元素，可以方法，无论是id，class，data等大部分直接在元素上设置的属性，都属于attribute。而disabled，selected，checked在DOM元素上可见。
2.png
- 对于
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区别
- 通过代码可以看到，
prop是直接在元素山设置return (elem[name] = value)和获取return elem[name] -
attr是通过ret = jQuery.find.attr( elem, name )和elem.setAttribute( name, value + "" );进行操作，其中前者利用了sizzle中的方法
现象
- 通过
attr设置了自定义属性，prop不能获取 - 通过
data设置的数据和attr设置的不相同
