前端提高篇(八十五)：jQuery的属性与特性，prop与attr，2024年最新字节跳动面试官不想录取的暗示

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

div

div2

console.log ( $(‘div’).attr(‘id’) );//只输出test

console.log ( $(‘div’).prop(‘id’) );//只输出test

5.prop()和attr()给dom设置属性可以影响所有被匹配的标签

---

prop()和attr()给dom设置属性时，如果有多个可匹配的dom，全部都被设置上属性；可以一次性设置一个属性或多个属性

5.1 设置一个属性：

div1

div1

ppp

ppp

效果：class属性都设置上了

5.2 设置多个属性（参数可以是对象）：

//设置多个属性

$(‘div’).attr({

class: ‘test’,

myAttribute: ‘ccy’});

$(‘p’).prop({

class: ‘test’,

myAttribute: ‘ccy’});

效果：一次性设置多个属性，由于prop只操作固有属性，所以myAttribute属性没设置上

6. 获取未设置的属性

---

attr()获取未设置的属性，返回undefined；

prop()获取未设置的固有属性，返回空值（prop()获取新增属性均返回undefined，不论是否被设置）

div1

7.attr()不能动态获取标签的状态，prop()可以

---

input标签未设置checked时，不论该input是否被选中，用attr()获取checked属性，均是返回undefined；

input标签设置checked时，不论该input是否被选中，用attr()获取checked属性，均是返回checked；

说明attr()只认明面上标签是否写了某属性，不能动态获取属性

• 喜欢吃的东西?

• 以下都喜欢

• 苹果

• 香蕉

• 梨

  效果：

  

  当.title属性添加上checked时（checked为默认选中）

• 以下都喜欢

  

  写成<input type="checkbox" checked='123'>效果一样

  而当点击.title，该标签增加上checked属性时，prop能对此做出反应：

  • 喜欢吃的东西?

• 以下都喜欢

• 苹果

• 香蕉

• 梨

  效果：当从未选中状态变成选中状态时，返回true；从选中状态改成未选中状态时，返回false

  

  标签被设置成默认选中状态也可以工作，功能一致：

  

  因此，我们可以根据prop()返回的布尔值来判断这第一个选项是否被选中：如果被选中，所有的选项都要被选中；如果取消选中，所有的选项取消选中

  $(‘.title input’).change(function(){

  // console.log($(‘.title input’).prop(‘checked’));

  if ( $(‘.title input’).prop(‘checked’) ){

  $(‘ul input’).prop(‘checked’, true);//.title下的input被选中时，所有input都被选中

  }else {

  $(‘ul input’).prop(‘checked’, false);//.title下的input取消选中时，所有input都没被选中

  }

  })

  效果：

  

  8.移除属性removeAttr()、removeProp()

  ---

  8.1 removeAttr():

  前端框架

  前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

  以 Vue 为例，我整理了如下的面试题。

  

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  框架深挖原理。

  以 Vue 为例，我整理了如下的面试题。

  

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-mRu8Iybo-1713477159577)]

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！