2024年前端提高篇(八十九)：jQuery的DOM的遍历操作（二），阿里P8架构师前端大厂面试题总结

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

效果：

1.4 offsetParent()：寻找最近的有定位的父级

不能传参，如果父级都没有设置定位，就找html

给div.test设置定位

.test {

position: relative;

}

在div.test的子元素div.item，寻找最近的设置定位的父元素

console.log( $(‘.item’).offsetParent() );

如果我都不设置定位，找到的就是html标签：

总结：

2. children / find / end / add / addBack

---

html文件用的也是最开始那个

• 1
• 2
• 3
• span

• 4
• 5

• span2

  2.1 children() 查找子元素（不是所有后代，只找直接的）

  console.log( $(‘ul’).children() );//查找ul下的子元素

  效果：

  

  可以传css选择器：

  console.log( $(‘ul’).children(‘.test’) );//查找ul子元素，且类名为test

  效果：

  

  2.2 find() 查找后代元素

  console.log( $(‘ul’).find(‘span’) );

  

  2.3 end() ：回退，prevObject的封装

  在前面调用find()，返回的jQuery对象中，有记录了父级的信息，存储在prevObject中

  

  所以，我们可以通过调用prevObject属性，返回上一级，做一些操作

  console.log($(‘ul’).find(‘li:eq(3)’));

  $(‘ul’).find(‘li:eq(3)’).css(‘background’, ‘red’).prevObject.find(‘li:eq(2)’).css(‘background’, ‘pink’);

  $('ul').find('li:eq(3)')找到ul下索引为3的li，调用css()将背景颜色设置成红色，返回jQuery对象$('li:eq(3)')；

  '$('li:eq(3)').prevObject'回退一步，是$('ul')；

  继续find('li:eq(2)')找到ul下索引为2的li，调用css()将背景颜色设置成粉色

  

  在jQuery中，end()封装了这一功能

  $(‘ul’).find(‘li:eq(3)’).css(‘background’, ‘red’).end().find(‘li:eq(2)’).css(‘background’, ‘pink’);

  效果一致

  回退到上一级具体是哪一级，是跟find对应的，如果find查找的不是直接子元素，prevObject对应的也不是直接父元素

  console.log( $(‘ul’).find(‘span’) );//span不是ul的直接子元素，prevObject回去的是ul

  

  2.4 add() ：把元素添加到已存在的元素组合中

  参数可以是css选择器（selector）、原生dom、jQuery对象、html标签

  如果我们想要给第一个和最后一个li加背景颜色，可能要写两行

  $(‘li:first’).css(‘background’, ‘orange’);

  $(‘li:last’).css(‘background’, ‘orange’);

  都是给背景换橙色，分两行写不够简练，于是，用add()：

  $(‘li:first’).add(‘li:last’).css(‘background’, ‘orange’);

  效果一致：

  

  2.5 addBack()：使用链式操作时调用，可以同时获取当前对象和前面获取的对象
• 1
• 2
• 3
• 4
• 5

• span2

  $(‘li:eq(1)’).css(‘background’,‘pink’).nextAll().css(‘background’,‘blue’).addBack().css(‘color’, ‘white’)

  将索引1的li背景颜色设置成粉色；

  索引1的li后面的标签背景颜色都设置成蓝色

  addBack，将当前选中的标签和前面一组选中的标签中的字体颜色改成白色，索引1的li后面的标签和索引1的li字体颜色变成白色

  效果：

  

  addBack影响的只是当前这一组对象和链式操作前一组的对象：

  如果A连接B连接C，C对象调用了addBack()，只有BC被影响，A没有在addBack范围内

  $(‘li:eq(1)’).css(‘background’,‘pink’)

  .next().css(‘background’,‘yellow’)

  .next().css(‘background’,‘orange’)

  .addBack().css(‘color’, ‘white’)

  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  )，只有BC被影响，A没有在addBack范围内

  $(‘li:eq(1)’).css(‘background’,‘pink’)

  .next().css(‘background’,‘yellow’)

  .next().css(‘background’,‘orange’)

  .addBack().css(‘color’, ‘white’)

  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-LzXtQwfX-1715485022863)]