// 8: Comment, 注释
// 不执行任何操作
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
// 如果支持attitude方法, 则调用property方法
if ( typeof elem.getAttribute === strundefined ) {
return jQuery.prop( elem, name, value );
}
// 如果elem的Node类型不是元素(1)
if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
name = name.toLowerCase();
// 针对浏览器的兼容性，获取钩子函数，处理一些特殊的元素
hooks = jQuery.attrHooks[ name ] ||
( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
}
if ( value !== undefined ) { // 如果value不为undefined，执行"SET"
if ( value === null ) { // 如果value为null，则移除attribute
jQuery.removeAttr( elem, name );
} else if ( hooks && “set” in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret; // 使用钩子函数
} else { // 使用Dom的setAttribute方法
elem.setAttribute( name, value + “” ); // 注意，要将value转换为string，因为所有attribute的值都是string
return value;
}
// 如果value为undefined，就执行"GET"
} else if ( hooks && “get” in hooks && (ret = hooks.get( elem, name )) !== null ) {
return ret; // 使用钩子函数
} else {
ret = jQuery.find.attr( elem, name ); // 实际上调用了Sizzle.attr，这个方法中针对兼容性问题作出处理来获取attribute的值
// 返回获得的值
return ret == null ?
undefined :
ret;
}
},
…
});
从代码可以发现，jQuery.attr调用的是getAttribute和setAttribute方法。
jQeury.prop
jQuery.extend({
…
prop: function( elem, name, value ) {
var ret, hooks, notxml,
nType = elem.nodeType;
// 过滤注释、Attr、元素文本内容
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
if ( notxml ) { // 如果不是元素
name = jQuery.propFix[ name ] || name; // 修正属性名
hooks = jQuery.propHooks[ name ]; // 获取钩子函数
}
if ( value !== undefined ) { // 执行"SET"
return hooks && “set” in hooks && (ret = hooks.set( elem, value, name )) !== undefined ?
ret : // 调用钩子函数
( elem[ name ] = value ); // 直接对elem[name]赋值
} else { // 执行"GET"
return hooks && “get” in hooks && (ret = hooks.get( elem, name )) !== null ?
ret : // 调用钩子函数
elem[ name ]; // 直接返回elem[name]
}
},
…
});
jQuery.prop则是直接对DOM对象上的property进行操作。
通过对比jQuery.prop和jQuery.attr可以发现，前者直接对DOM对象的property进行操作，而后者会调用setAttribute和getAttribute方法。setAttribute和getAttribute方法又是什么方法呢？有什么效果？
setAttribute和getAttribute
基于之前测试使用的输入框，执行如下代码：
in1.setAttribute(‘value’, ‘new attr from setAttribute’);
console.log(in1.getAttribute(‘value’)); // ‘new attr from setAttribute’
console.log(in1.value); // ‘new attr from setAttribute’
console.log(in1.attributes.value); // ‘value="new attr from setAttribute"’,实际是一个Attr对象
执行完setAttribute以后，就如同直接更改attributes中的同名属性；
而getAttribute的结果与访问property的结果一模一样，而不会像直接访问attritudes那样返回一个Attr对象。
特殊的例子
href
然而，是不是所有标签，所有属性都维持保持这样的特性呢？下面我们看看href这个属性/特性。
首先在html中创建一个标签：
在JS脚本中执行如下代码：
console.log(a1.href); // ‘file:///D:/GitHub/JS/html/test_01/page_1.html’
console.log(a1.getAttribute(‘href’)); // ‘page_1.html’
可以看到，property中保存的是绝对路径，而attribute中保存的是相对路径。那么，如果更改了这些值会发生什么情况呢？
更改attribute：
a1.setAttribute(‘href’, ‘page_2.html’); // 相对路径
console.log(a1.href); // ‘file:///D:/GitHub/JS/html/test_01/page_2.html’
console.log(a1.getAttribute(‘href’)); // ‘page_2.html’
a1.setAttribute(‘href’, ‘/page_3.html’); // 根目录路径
console.log(a1.href); // ‘file:///D:/page_3.html’
console.log(a1.getAttribute(‘href’)); // ‘/page_3.html’
更改property：
a1.href = ‘home.html’; // 相对路径
console.log(a1.href); // ‘file:///D:/GitHub/JS/html/test_01/home.html’
console.log(a1.getAttribute(‘href’)); // ‘home.html’
a1.href = ‘/home.html’; // 根目录路径
console.log(a1.href); // ‘file:///D:/home.html’
console.log(a1.getAttribute(‘href’)); // ‘/home.html’
从这里可以发现，href是特殊的属性/特性，二者是双向绑定的，更改任意一方，都会导致另一方的的值发生改变。而且，这并不是简单的双向绑定，property中的href永远保存绝对路径，而attribute中的href则是保存相对路径。
看到这里，attribute和property的区别又多了一点，然而，这又让人变得更加疑惑了。是否还有其他类似的特殊例子呢？
id
尝试改变property中的id：
a1.id = ‘new_id’;
console.log(a1.id); // ‘new_id’
console.log(a1.getAttribute(‘id’)); // ‘new_id’
天呀,现在attribute中的id从property中的id发生了同步，数据方向变成了property <=> attribute；
disabled
再来看看disabled这个属性，我们往第一个添加“disabled”特性：
// 此时input已经被禁用了
然后执行下面的代码：
console.log(in1.disabled); // true
in1.setAttribute(‘disabled’, false); // 设置attribute中的disabled，无论是false还是null都不会取消禁用
console.log(in1); // true
console.log(in1.getAttribute(‘disabled’)); // ‘false’
改变attributes中的disabled不会改变更改property，也不会取消输入栏的禁用效果。
如果改成下面的代码：
console.log(in1.disabled); // true
in1.disabled = false; // 取消禁用
console.log(in1.disabled); // false
console.log(in1.getAttribute(‘disabled’)); // null，attribute中的disabled已经被移除了
又或者：
console.log(in1.disabled); // true
in1.removeAttribute（‘disabled’); // 移除attribute上的disabled来取消禁用
console.log(in1.disabled); // false
console.log(in1.getAttribute(‘disabled’)); // null，attribute中的disabled已经被移除了
可以发现，将property中的disabled设置为false，会移除attributes中的disabled。这样数据绑定又变成了，property<=>attribute;
所以property和attritude之间的数据绑定问题并不能单纯地以“property<-attribute”来说明。
总结
–
分析了这么多，对property和attribute的区别理解也更深了，在这里总结一下：
创建
-
DOM对象初始化时会在创建默认的基本property；
-
只有在HTML标签中定义的attribute才会被保存在property的attributes属性中；
-
attribute会初始化property中的同名属性，但自定义的attribute不会出现在property中；
-
attribute的值都是字符串；
数据绑定
-
attributes的数据会同步到property上，然而property的更改不会改变attribute；
-
对于value，class这样的属性/特性，数据绑定的方向是单向的，attribute->property；
-
对于id而言，数据绑定是双向的，attribute<=>property；
-
对于disabled而言，property上的disabled为false时，attribute上的disabled必定会并存在，此时数据绑定可以认为是双向的；
使用
- 可以使用DOM的setAttribute方法来同时更改attribute；
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
总结
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！
而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！
资料截图 ：
高级前端工程师必备资料包
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
资料截图 ：
高级前端工程师必备资料包
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-bNfsZbsn-1712450420044)]
3028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
