7.BOM

最新推荐文章于 2024-08-29 16:58:55 发布

自性空

最新推荐文章于 2024-08-29 16:58:55 发布

阅读量305

点赞数

分类专栏：前段学习JavaScript

本文链接：https://blog.csdn.net/weixin_45194302/article/details/113226094

版权

前段学习JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

BOM

1. 什么是BOM(Browser Object Model) > 浏览器对象模型
		浏览器给我们提供的一套操作浏览器窗口的属性和方法
    BOM的顶级对象是 window(出了浏览器,什么也干不了)
				是一个对象,当你打开一个页面的时候就有一个 window
        你在全局定义的所有变量都在 window (console输入window可以查看)
		所有和 BOM 相关的api都是 window.xxx
				在写js代码的时候,可以省略window.

1.获取浏览器窗口尺寸

innerWidth

innerHeight

浏览器可视窗口的尺寸
浏览器由可能有滚动条 滚动条是算尺寸的
1.两个属性
		innerWidth
    innerHerght
    // 都包含滚动条 直接使用就行

2.浏览器的弹出层

三个弹出层,可以弹出一些信息
1.alert() // 警告框
		// 一个按钮 一些提示文本
2.confirm() // 选择框
		// 提示文本 选择取消 两个按钮
3.prompt() // 输入框
		// 提示文本 输入框 确定 取消按钮

// 都会阻断程序的继续执行

alert('提示文本') // 返回值:undefined
confirm('提示文本') // 返回值:布尔值 确定true 取消 false
prompt('提示文本') // 返回值:确定,文本框内容 取消就是 null

3.浏览器的地址栏(重点)

一个地址包含的内容:  
		// http://www.baidu.com?user=admin&password=123#abc
		1.http // 传输协议  前后端交互的方式
    2.www.baidu.com // 域名 ip端口
		3.?user=admin&password=123 // 查询字符串(queryString) 不影响打开页面 携带的信息
		4.`#abc` // 哈希(hash) 锚点定位

==================================

在window下有一个成员叫 location 他是一个对象 里面存储着和网页地址所有的信息
    1.hash // 当前页面的 hash 值
    2.href // 是一个读写的属性(当前地址栏地址)
    		读:获取当前打开的页面地址(中文是url编码格式)
				写:设置当前打开的页面地址(跳准页面用的)
		3.search // 当前地址中 查询的字符(queryString)
    4.reload() // 从小加载当前页面 不能写在 打开页面就执行的

解析查询字符串

// 出现情况 
没有数据("") 有数据(?key=value&key=value)
// 封装一个函数
				var str = '?name=lddragon&age=18'
        function parseQueryString(str){
            // 首先判读是否有值
            if(str === ''){
                return {} 
            }
            // 解析字符串
            // 1.去除?号      
            str = str.slice(1)
            // 2.判断有几个参数
            var strList = str.split('&')
            // 两种情况 [一个] [多个]
            // 3.循环遍历拿出每一个做处理
            // 创建一个对象
            var queryObj = new Object
            for(var i = 0;i<strList.length;i++){
                // 拿到每一个元素
                // 分割等于号
                var innerStrList = strList[i].split('=')
                 // 拿到元素
                queryObj[innerStrList[0]] = innerStrList[1]
            }
            return queryObj
        }

4.浏览器的历史记录

操作浏览器前进后退的事
window 下 有个 history 的成员 是一个对象 // 里面包含了一些操作历史记录的属性和方法
	1.history.back() // 回退到上一条记录 前提有个记录
	2.history.forward() // 前进到下一跳历史记录 必须有过回退才可以前进
	3.history.go(整数) // 正整数:前进  0:刷新 负整数:后退 数字控制回退几次

5.浏览器版本信息(了解)

用来区分浏览器
window下有个成员叫 navigator // 是一个对象 存储浏览器的版本信息
	1.userAgent // 表示浏览器的版本以及信息
  2.appName // 所有的浏览器都是统一的名字 netscape 
  3.platform // 浏览器所在的操作系统

6.浏览器常见事件

// 由浏览器出发的事件
	1.window.onload = function(){} // 页面所有资源加载完毕执行
			// 所有资源 = 图片视频音频
			作用:js前置 // 把script放在head中是不能操作dom的 从上到下 最好加上 window.onload
  2.window.onscroll = function(){} // 浏览器滚动条滚动的时候触发 不分横向纵向
			// 楼层导航 回到顶部页面 京东案例 
			// 瀑布流
	3.window.onresize = function(){} // 浏览器可视窗口改变触发 结合 innerwidth innerheight结合使用

7.浏览器卷去的高度和宽度

// 当页面比窗口宽或者高的时候 会有一部分随着滚动被隐藏的 
// 我们管 上面隐藏额叫做 卷去的高度
// 我们管 坐边隐藏的叫做 卷去的宽度
// 获取

// 高度
1.document.documentElemet.scrollTop //必须要有DOCTYPE标签
2.document.body.scrollTop //必须要没有 DOCTYPE标签
// 兼容写法
var scrolltop = document.ducumentElemet.scrollTop || document.body.scrollTop

// 宽度
1.document.documentElemet.scrollLeft //必须要有DOCTYPE标签
2.document.body.scrollLeft //必须要没有 DOCTYPE标签
var scrollleft = document.ducumentElemet.scrollLeft || document.body.scrollLeft

8.浏览器滚动到

通过js代码指定浏览器滚动到什么位置
1.scrollTo() 
		// scrollTo(横向坐标,纵向坐标) 瞬间定位
		// scrollTo({top:纵向坐标,left:横向坐标}) 可以依靠第三个配置项 控制是否瞬间定位
				// behavior: smooth instant
				// 不能决定滚动时间 需要自己完成

<body>
    <div id="box">回到顶部</div>
    <div id="background"></div>
    <style>
        #box{
            background-color:red;
            text-align: center;
            width: 42px;
            height: 42px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: none;
        }
        #background{
            width: 100%;
            background-color:cornflowerblue;
            height: 2000px;
        }
        body{
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        // 实时获取滚动条
        window.onscroll = function(){
            // 判断卷去高度是否大于200
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            console.log(scrollTop)
            if (scrollTop>200){
                box.style.display = 'block'
            }else{
                box.style.display = 'none'
            }
        }
        // 回到最上面
        box.onclick = function(){
            scrollTo({top:0,left:0,behavior:'smooth'})
        }
    </script>
</body>

// document.documentElemet.scrollLeft //必须要有DOCTYPE标签
// document.body.scrollLeft //必须要没有 DOCTYPE标签
// 上面两个可以读写 还可以设置

// 自定义
        var now = 0
        var time = 0
        box.onclick = function(){
            // 设置一个定时器 每隔30毫秒设置
            time = setInterval(function(){
                // 获取当前隐藏行高
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                // 判断是否为0
                if(scrollTop === 0){
                    clearInterval(time)
                }else{
                    // 设置
                    document.documentElement.scrollTop = scrollTop - 20
                }
            },30)
        }

        // 实时获取滚动条 
        window.onscroll = function(){
            if (now<=document.documentElement.scrollTop)clearInterval(time)
            now = document.documentElement.scrollTop
        }