2024年最全前端提高篇(八十九)：jQuery的DOM的遍历操作（二）(1)，2024年最新计算机应届毕业生面试题

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

必须传入参数，不仅可以传入css选择器，还可以传入jQuery对象，或者dom元素

console.log( $(‘span’).closest(‘li’) );//离span最近的li标签

效果：匹配到两个

如果自身就符合匹配条件，返回自身

• 1
• 2
• 3
• span
• 4
• 5

• span2

  效果：

  

  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()：使用链式操作时调用，可以同时获取当前对象和前面获取的对象

  结尾

  学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

  

  象

  结尾

  学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

  [外链图片转存中…(img-yDFlK0fu-1715676214281)]