JS复习-WebApi（5）

最新推荐文章于 2024-08-15 08:55:57 发布

前端楠戈

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量84

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/sky89299/article/details/123304002

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

三大家族

offset家族

作用：获取元素‘自身’真是宽高与位置

offsetWidth/offsetHeight: 真实宽度 = width+border+padding
offsetLeft/offsetTop 自身左/上外边框到定位父元素左上内边框距离

scroll家族

作用：获取‘元素内容’真实宽高与位置

scrollWidth / scrollHeight : 获取内容的宽高
scrollLeft / scrollTop : 内容的位置（就是滚动条滚动的距离）
应用：一般网页的头部变成固定定位和标准流

client家族

作用：获取元素 ‘可视区域’ 宽高和位置

clientWidth / clientHeight : 可视区域大小
clientLeft / clientTop : 可视区域位置（就是左边框和上边框宽度）
应用：判断不同尺寸的屏幕适配、横屏和竖屏判断

获取网页滚动距离

给页面注册滚动事件（window.onscroll）因为该事件实在window中滚动，所以要给window中注册事件
获取页面滚动的距离：html标签的scrollLeft
document.documentElement表示document的根元素，也就是表示html
页面事件：
1. 页面移动：window.onmousemove
2. 页面滚动：window.onscroll
3. 页面大小变化：window.onresize

BOM

js组成

ECMAScript对象：（array，object,Math,Date）
DOM(document) ：网页中的内容
BOM ：浏览器的窗口

window对象

window对象 : 是js中的顶级对象, 所有的全局方法和属性都是window对象的成员
只要是window对象的成员，使用时一律可以省略window
方法：
1. 打开窗口 window.open()
2. 关闭窗口 window.close()
事件：
1. window.onload = function(){}加载事件： DOM树 + 外部资源加载完毕后执行
  
  优势：如果图片尺寸过大，图片不能及时加载，log就会直接打印出来，导致图片高度不正确，使用onload可以解决这个问题，他会等DOM树和外部资源加载后在执行
  
  示范：
```
 	window.onload = function () {
            let box = document.querySelector('.box')
            console.log(box.scrollWidth, box.scrollHeight)
        }
```
2. window.onbeforeunload = function(){}关闭事件：页面关闭之前执行（存储数据）

对象

location对象：

location对象：浏览器地址栏url
重点：修改localtion对象的href，可以实现网页的跳转
区别：
- a标签的href是用于无条件渲染，无逻辑性，点击100%跳转，可以应用在：订单、商品详情
- location的href是有条件跳转，有逻辑性，点击需要有满足条件，才跳转，应用于：账号登良等
三个方法：
1. location.assign(‘url’) : 跳转（可以回退）
2. location.replace(‘url’) : 替换（不可以回退）
3. location.reload(‘url’) : 刷新（相当于电脑中的F5）

history对象：

history对象：历史记录
三个方法：
1. history.back() : 返回上一页
2. history.forward() : 前进下一页
3. history.go(数字) :数字负数就是回退几页，正数就是前进几页

navigator对象：

navigator对象：用户信息
应用：收集用户信息，不同的手机不同的价格

screen对象：

screen : 用户电脑屏幕（不常用）
一般用于开发游戏里面，询问用户分辨率过低，是否需要调整

存储对象

localStorage

localStorage：本地储存
应用：免登陆
语法：
1. 存数据：localStorage.setItem（‘属性名’，属性值）
2. 取数据：localStorage.getItem(‘属性名’)
3. 删数据：lacalStorage.removeItem(‘属性名’)
4. 清空数据：localStorage.clear( )
每个网站的localStorage都是独立的
注意：
1. localStorage是永久存储，除非手动清除，否则一直存在
2. 只能存储字符串

示范：

	//存数据 ：  localStorage.setItem('属性名',属性值)
	document.querySelector('.setItem').onclick = function () {
            localStorage.setItem('name', 'admin')
            localStorage.setItem('age', '18')
            localStorage.setItem('city', 'China')
            localStorage.setItem('sex', '男')
        }
        //取数据 ：  localStorage.getItem('属性名')
        document.querySelector('.getItem').onclick = function () {

            console.log(localStorage.getItem('name'))
        }
        // 删数据 :   localStorage.removeItem('属性名')
        document.querySelector('.removeItem').onclick = function () {
            localStorage.removeItem('age')
        }

        //清空数据 : localStorage.clear()
        document.querySelector('.clear').onclick = function () {
            localStorage.clear()
        }

sessionStorage

sessionStorage：本地储存
应用：页面间传值，常见于移动端
语法：
1. 存数据：sessionStorage.setItem（‘属性名’，属性值）
2. 取数据：sessionStorage.getItem(‘属性名’)
3. 删数据：sessionStorage.removeItem(‘属性名’)
4. 清空数据：sessionStorage.clear( )
每个网站的sessionStorage都是独立的
注意：
1. sessionStorage是临时存储，只要页面一关闭，数据就自动清空了
2. 只能存储字符串，如果是其他类型，编译器会自动帮你转成字符串后存储

localStorage与SessionStorage异同点

相同点：作用一致，都是用于存储数据
不同点：存储方式不同
- localStorage：硬盘存储
- sessionStorage：内存存储

JSON格式

作用：解决数据跨平台兼容性是一种数据格式，本质字符串
可以解决：js中使用localStorage存储对象，来做免登陆等

语法：

json -> js : let jsObj = JSON.parse( json格式 )
js -> json : let jsonStr = JSON.stringify( js对象 )

	// JSON格式字符串
        let jsonobj = '{"name":"张三","age":"18","sex":"男"}'
        console.log(jsonobj)
        // JSON变js
        let json = JSON.parse(jsonobj)
        console.log(json)
        // js对象变JSON
        let obj = {
            name: '张三',
            age: 20,
            sex: '女'
        }
        let jsons = JSON.stringify(obj)
        console.log(jsons)