首页 前端知识 2024年前端提高篇(九十四):jQuery鼠标事件,我了解到的面试的一些小内幕

2024年前端提高篇(九十四):jQuery鼠标事件,我了解到的面试的一些小内幕

2024-05-12 00:05:48 前端知识 前端哥 958 285 我要收藏

总结

我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。

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

image
image

margin-left: -15px;

margin-top: -15px;

}/为了让点击的位置是图片的中心,提前写了margin,在添加时再根据鼠标位置定位top和left/

双击显示小心心

$(document).dblclick(function(e){

$(‘body’).append(‘<img src=“./img/1.png” alt=“” style="left:’ +

e.pageX + ‘px;’ + ‘top:’ + e.pageY + ‘px;">’)

})

效果:

在这里插入图片描述

2.event.which与contextmenu()


event.which:可以判断鼠标哪个键按下了

contextmenu():取消右键时出现的菜单

左键返回1,滚轮返回2,右键返回3

当鼠标右键时,显示小心心

$(document).contextmenu(function(e){

return false;

})//右键时出现的菜单取消掉,e虽然没有用,但一定要有

$(document).mousedown(function(e){

if (e.which == 3){

$(‘body’).append(‘<img src=“./img/1.png” alt=“” style="left:’ +

e.pageX + ‘px;’ + ‘top:’ + e.pageY + ‘px;">’)

}

})

没有取消菜单时,右击会是这样:

在这里插入图片描述

取消掉,右击会是这样:

在这里插入图片描述

我的小心心图是这样的,本身有两个心心,所以点一下有两个心心:

在这里插入图片描述

3.mouseenter() / mouseleave() / mouseover() / mouseout()


前两个不会冒泡

后两个冒泡

box

3.1 mouseenter / mouseleave:

$(‘.box’).mouseenter(function(){

console.log(‘enter’);

}).mouseleave(function(){

console.log(‘leave’);

})//给box绑定mouseenter和mouseleave事件

$(‘.wrapper’).mouseenter(function(){

console.log(‘enter-wrapper’);

}).mouseleave(function(){

console.log(‘leave-wrapper’);

})//给wrapper绑定mouseenter和mouseleave事件

效果:

1.当鼠标进入wrapper(或刷新时已在wrapper区域,然后动一下)时,触发wrapper的enter事件;

2.当鼠标进入box区域时,触发box的enter事件,没有触发wrapper的enter事件,leave同理,说明这两个事件是不冒泡的(父子设置同样的事件,子触发,父不触发)

在这里插入图片描述

3.2 mouseover / mouseout

$(‘.box’).mouseover(function(){

console.log(‘over’);

}).mouseout(function(){

console.log(‘out’);

})//给box绑定mouseover和mouseout事件

$(‘.wrapper’).mouseover(function(){

console.log(‘over-wrapper’);

}).mouseout(function(){

console.log(‘out-wrapper’);

})//给wrapper绑定mouseover和mouseout事件

效果:

1.当我鼠标从wrapper外部进入(或刷新时鼠标已在wrapper区域然后鼠标动一下)时,触发wrapper的over事件;

2.鼠标移动到box区域,同时触发wrapper的mouseout事件、box的mouseover事件、wrapper的mouseover事件

3.当鼠标移开box区域到wrapper区域,触发box的mouseout事件、wrapper的mouseout事件、wrapper的mouseover事件

4.所以这两个事件是冒泡的,进入box时,box(子)和wrapper(父)的over事件都被触发

5.另外,从wrapper移动到box区域时,还触发了wrapper的out事件,即系统认为此时离开wrapper,进入box

在这里插入图片描述

在这里插入图片描述

4.mousedown / mousemove / mouseup


数据结构与算法

这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题

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

排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。

  • 二叉树层序遍历
  • B 树的特性,B 树和 B+树的区别
  • 尾递归
  • 如何写一个大数阶乘?递归的方法会出现什么问题?
  • 把多维数组变成一维数组的方法
  • 知道的排序算法 说一下冒泡快排的原理
  • Heap 排序方法的原理?复杂度?
  • 几种常见的排序算法,手写
  • 数组的去重,尽可能写出多个方法
  • 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
  • 合并两个有序数组
  • 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)

排序方法的原理?复杂度?

  • 几种常见的排序算法,手写
  • 数组的去重,尽可能写出多个方法
  • 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
  • 合并两个有序数组
  • 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)

[外链图片转存中…(img-2QHLRIKa-1714978352000)]

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

JSON三种数据解析方法

2024-05-22 09:05:13

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

2024-05-22 09:05:48

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