首页 前端知识 2024年Web前端最新前端提高篇(八十九):jQuery的DOM的遍历操作(二),web开发都需要学习什么

2024年Web前端最新前端提高篇(八十九):jQuery的DOM的遍历操作(二),web开发都需要学习什么

2024-05-12 00:05:04 前端知识 前端哥 312 515 我要收藏

ES6

  • 列举常用的ES6特性:

  • 箭头函数需要注意哪些地方?

  • let、const、var

  • 拓展:var方式定义的变量有什么样的bug?

  • Set数据结构

  • 拓展:数组去重的方法

  • 箭头函数this的指向。

  • 手写ES6 class继承。

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

微信小程序

  • 简单描述一下微信小程序的相关文件类型?

  • 你是怎么封装微信小程序的数据请求?

  • 有哪些参数传值的方法?

  • 你使用过哪些方法,来提高微信小程序的应用速度?

  • 小程序和原生App哪个好?

  • 简述微信小程序原理?

  • 分析微信小程序的优劣势

  • 怎么解决小程序的异步请求问题?

其他知识点面试

  • webpack的原理

  • webpack的loader和plugin的区别?

  • 怎么使用webpack对项目进行优化?

  • 防抖、节流

  • 浏览器的缓存机制

  • 描述一下二叉树, 并说明二叉树的几种遍历方式?

  • 项目类问题

  • 笔试编程题:

最后

技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。

  • 5
  • span2

    画一下body侧的dom树,head侧的就没有画了

    在这里插入图片描述

    1.1 parent():寻找直接父元素

    //寻找span的直接父元素,并打印

    console.log( $(‘span’).parent() );

    效果:搜索到div.demo,和第5个li

    在这里插入图片描述

    还可以进一步筛选,给parent传入css选择器,直接父元素还要满足这个选择器才能被选中

    console.log( $(‘span’).parent(‘li’) );//寻找span的直接父元素,且直接父元素是li

    效果:之前搜索到的div.demo就没有了

    在这里插入图片描述

    如果我指定的是不存在的,返回的就是空对象

    console.log( $(‘span’).parent(‘p’) );

    在这里插入图片描述

    1.2 parents():寻找祖先元素

    顺着dom树一路向上找,直到html为止

    console.log( $(‘span’).parents() );

    一共6个祖先元素

    在这里插入图片描述

    同样的,可以对祖先元素再做一次筛选,传入css选择器

    console.log( $(‘span’).parents(‘li’) );

    这次被匹配到的祖先元素就只有2个了

    在这里插入图片描述

    1.3 closest():从自身开始向上寻找最近的匹配元素

    必须传入参数,不仅可以传入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’) );

        总结

        三套“算法宝典”

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

        28天读完349页,这份阿里面试通关手册,助我闯进字节跳动

        算法刷题LeetCode中文版(为例)

        人与人存在很大的不同,我们都拥有各自的目标,在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人,但是我深刻知道自己想要的是一年比一年有进步。

        最后,我想说的是,无论你现在什么年龄,位于什么城市,拥有什么背景或学历,跟你比较的人永远都是你自己,所以明年的你看看与今年的你是否有差距,不想做咸鱼的人,只能用尽全力去跳跃。祝愿,明年的你会更好!

        由于篇幅有限,下篇的面试技术攻克篇只能够展示出部分的面试题,详细完整版以及答案解析,有需要的可以关注

      转载请注明出处或者链接地址:https://www.qianduange.cn//article/8226.html
      标签
      评论
      发布的文章

      JSON三种数据解析方法

      2024-05-22 09:05:13

      使用nvm管理(切换)node版本

      2024-05-22 09:05:48

      大家推荐的文章
      会员中心 联系我 留言建议 回顶部
      复制成功!