JavaScript学习笔记
文章平均质量分 64
fifi家
这个作者很懒,什么都没留下…
展开
-
动画函数封装
实现原理一、匀速动画1、实现步骤:2、动画函数的封装二、缓动效果1、原理:2、步骤:3、使动画在多个目标值之间移动案例:从500到800 再从800到5004、动画函数添加回调函数案例:到达500之后背景颜色由skyblue变成pink总结案例:滑动效果原创 2022-05-08 00:00:57 · 228 阅读 · 0 评论 -
mouseover和mouseenter的区别
mouseover:鼠标经过自身盒子会触发,经过子盒子还会触发mouseenter:只会在鼠标经过自身盒子才会触发 跟 mouseleave 鼠标离开 搭配原理:mouseenter与mouseleave不会冒泡,mouseover会冒泡 <head> <style> .father { width: 300px; height: 300px; background-color: pink;原创 2022-05-07 20:30:08 · 171 阅读 · 0 评论 -
案例分析。
淘宝flexible.js源码分析1、立即执行函数不需要调用,立马就能够自己执行刷新页面触发load事件的三种情况1、a标签的超链接2、F5或者刷新按钮(强制刷新)3、前进后退按钮(function() {} ())原创 2022-05-05 23:05:56 · 173 阅读 · 0 评论 -
模态框与产品放大镜效果
拖动模态框(弹出框)案例分析:点击弹出层,模块框和灰色半透明的遮挡层就会显示出来 display:block; 点击关闭按钮,模块框和灰色半透明的遮挡层就会隐藏出来 display:none; 鼠标放到模块框最上面一行,可以按住鼠标拖拽模块框在页面中移动,触发的事件源是最上面一行,即id为title 鼠标松开,可以停止拖动模态框移动 在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标 触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup 拖拽过程:鼠标原创 2022-05-04 23:46:00 · 77 阅读 · 0 评论 -
offset、client、scroll三大系列
一、元素偏移量offset系列1、offset系列属性2、offset与style的区别案例:获取鼠标在盒子内的坐标(我们在盒子内移动,想要得到鼠标距离盒子左右的距离)二、元素可视区client系列1、client系列属性三、元素滚动scroll系列1、元素scroll系列属性2、页面被卷去的头部案例:仿淘宝固定右侧侧边栏3、页面被卷去的头部兼容性解决方案三大系列总结原创 2022-05-04 23:46:23 · 202 阅读 · 0 评论 -
JS执行机制
JS执行机制1.将执行任务分为同步任务和异步任务2.先执行执行栈中的同步任务3.异步任务(回调函数)放入任务队列中4.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。同步任务: 同步任务都在主线程上执行,形成一个执行栈异步任务:JS的异步是通过回调函数实现的,一般有以下三种类型普通事件,如click、resize等 资源加载,如load、error等 定时器,包括setInterval、s原创 2022-05-03 11:11:20 · 63 阅读 · 0 评论 -
this指向问题
一般情况下this的最终指向的是那个调用它的对象1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)(1)全局作用域中 console.log(this);(2)普通函数中 function fn() { console.log(this); } window.fn();(3)定时器中 window.setTimeout(function () { ...原创 2022-05-03 10:09:05 · 38 阅读 · 0 评论 -
BOM学习笔记
一、定义二、window对象的常见事件1、窗口加载事件2、调整窗口大小事件3、定时器(1)开始setTimeout()定时器(2)停止setTimeout定时器——clearTimeout()(3)setInterval()定时器(4)停止setInterval()定时器4、location对象(1)location对象属性(2)location对象方法(3)URL5、navigator对象6、history对象原创 2022-05-01 23:22:34 · 286 阅读 · 0 评论 -
DOM的一些案例
1、百度换肤效果2、表格隔行变色效果3、表单全选和取消全选4、tab栏切换制作5、动态生成表格6、跟随鼠标的天使7、模拟京东按键输入内容案例原创 2022-04-21 20:39:29 · 134 阅读 · 0 评论 -
DOM学习笔记
定义一、获取元素1、根据ID获取2、根据标签名获取 3、H5新增方法获取——均是以伪数组的形式返回(1)根据类名获取某些元素的集合(2)返回指定选择器的第一个元素对象(3)返回指定选择器的所有元素对象集合4、获取某些特殊元素(body、html)二、事件1、定义2、事件三要素三、操作元素1、改变元素内容2、改变元素属性(1)获取属性值(2)改变元素属性值(3)移除元素属性值3、改变表单元素4、修改样式属性5、排他思想:首先先排除其他人 然后再设置自己的样式6、H5新增的自定义属性原创 2022-04-18 22:51:50 · 1118 阅读 · 1 评论