BOM(操作浏览器)

最新推荐文章于 2024-11-02 12:42:04 发布

苏一一

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量328

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45789701/article/details/127918694

版权

BOM

----------操作浏览器

1.window对象

BOM(浏览器对象模型)

BOM(Browser Object Model)是浏览器对象模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lsGSjCmo-1668741043790)(C:\Users\s2 在这里插入图片描述

490\Desktop\知识总结\JavaScript\assets\1665817863619.png)]

window是浏览器内置中的全局对象，我们所学习的所有Web APIs的知识内容都是基于window对象实现的
window对象下包含了navigator、location、document、history、screen5个属性，即所谓的BOM(浏览器对象模
型)
document是实现DOM的基础，它其实是依附于window的属性。
注：依附于window对象的所有属性和方法，使用时可以省略window

定时器-延时函数

javaScript 内置的一个用来让代码延迟执行的函数。叫 setTimeout

语法：

setTimeout(回调函数， 等待的豪秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是一段代码延迟执行，平时省略 window

let timer = setTimeout(回调函数， 等待的豪秒数)
clearTimeout(timer)

总结：
- setInterval（间歇函数）的特征是重复执行，首次执行会延时
- setTimeout的特征是延时执行，只执行1次
- setTimeout结合递归函数，能模拟setInterval重复执行
- clearTimeout清除由setTimeout创建的定时任务

JS 执行机制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPpIY8tS-1668741043790)(C:\Users\s2490\Desktop\知识总结\JavaScript\assets\1665824685279.png)]

location对象

location 的数据类型是对象，其拆分并保存了 URL 地址的哥哥组成部分
常用属性和方法：
- href属性获取完整的URL地址，对其赋值时用于地址的跳转
- search属性获取地址中携带的参数，符号？后面部分
- hash属性获取地址中的啥希值，符号#后面部分
- reload方法用来刷新当前页面，传入参数true时表示强制刷新

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

通过userAgent检测浏览器的版本及平台

//检测userAgent(浏览器信息)
!(function ()
const userAgent = navigator.userAgent
//验证是否为Android.或iPhone
const android = userAgent.match(/(Android);?[\s\/]+[\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
//如果是Android.或iPhone,则跳转至移动站点
if (android || iphone){
Location.href ='http://m.itcast.cn'
}
})()

histroy对象

history的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：

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

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

2.swiper插件

官网：https://www.swiper.com.cn/
在线演示：https://www.swiper.com.cn/demo/index.html
基本使用流程:https://www.swiper.com.cn/usage/index.html
查看API文档，配置自己的插件：https://www.swiper.com.cn/api/index.html
注：多个swiper同时使用的时候，类名需要区分