7.23JS深入（续）

最新推荐文章于 2022-12-07 14:43:53 发布

yangyue012345

最新推荐文章于 2022-12-07 14:43:53 发布

阅读量68

点赞数

分类专栏： html CSS JavaScript 文章标签： css html javascript visual studio code

本文链接：https://blog.csdn.net/qq_51967148/article/details/119038674

版权

html 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

学习内容：

一、navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
 window.location.href = ""; //手机
} else {
 window.location.href = ""; //电脑
}

二、history 对象

history对象方法	作用
back()	可以后退功能
forward（）	前进功能
go(参数)	前进后退功能参数如果是1前进一个页面如果是-1 后退一个页面

三、PC端网页特效

1、元素偏移量 offset 系列

（1）相关属性可以动态的得到该元素的位置（偏移）、大小等。

（2）获得元素距离带有定位父元素的位置。

（3）获得元素自身的大小（宽度高度）。

（4）注意：返回的数值都不带单位。

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果妒忌都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回值不带单位。
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回值不带单位。

offset 与 style 区别

(1)offset 可以得到任意样式表中的样式值 ,style 只能得到行内样式表中的样式值。

(2)offset 系列获得的数值是没有单位的，style.width 获得的是带有单位的字符串。

(3)offsetWidth 包含padding+border+width， style.width 获得不包含padding和border 的值。

(4)offsetWidth 等属性是只读属性,只能获取不能赋值。所以,我们想要获取元素大小位置,用offset更合适

(5)style.width 是可读写属性，可以获取也可以赋值。所以，我们想要给元素更改值，则需要用style改变

2、元素可视区 client 系列

client 翻译就是客户端,通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding 、内容区的宽度，不含边框，返回数值不带单位。
element.clientHeight	返回自身包括padding 、内容区的高度，不含边框，返回数值不带单位。

3、元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷上去的上侧距离，返回数值不带单位。
element.scrollLeft	返回被卷上去的左侧距离，返回数值不带单位。
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位。
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位。

4、以上三个系列的对比

三大系列大小对比	作用	常用于
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回值不带单位。	获取元素位置
element.clientWidth	返回自身包括padding 、内容区的宽度，不含边框，返回数值不带单位。	获取元素大小
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位。	获取滚动距离

5、mouseenter 和mouseover的区别

（1）当鼠标移动到元素上时就会触发 mouseenter 事件。

（2） mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。

（3）mouseenter 只会经过自身盒子触发。

（4）之所以这样，就是因为mouseenter不会冒泡。

（5）跟mouseenter搭配，鼠标离开 mouseleave 同样不会冒泡。

6、动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

（1）获得盒子当前位置

（2）让盒子在当前位置加上1个移动距离

（3）利用定时器不断重复这个操作