webapi和Bom有关的部分和三大家族

一个好好的程序员

已于 2022-05-15 14:31:18 修改

阅读量980

点赞数

文章标签： js

于 2022-04-02 20:05:51 首次发布

本文链接：https://blog.csdn.net/m0_62823653/article/details/123912650

版权

一.window对象

1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象

（ 1 ）. 只要是window对象的成员，使用时一律可以省略window。

例如：window.alert( ) 可以省略window写成alert( )

例如：window.document 可以省略window写成document

( 2 ) window对象有一个特殊属性叫做name(它永远都是一个字符串，无论给他赋什么值 )

( 3 ） window对象有一个特殊的属性叫做top, 指向window本身（变量名不能用top）

2.window对象的两个方法

（1）打开窗口 window.open ( )

（2）关闭窗口 window.close（）（几乎不用）

<body>
    <div class="box"></div>
    <button class="btn1">打开新窗口</button>
    <button class="btn2">关闭新窗口</button>
    <script>
            // 1. 打开窗口  window.open( )
            // 2. 关闭窗口  window.close( )
        document.querySelector('.btn1').onclick=function(){
            //第一个参数：url网址
            //第二个参数：相当于a标签target属性,默认值_blank新窗口，_self：当前窗口
            //第三个参数：设置新窗口样式
            open('http://www.baidu.com','_blank','left=100px,top=100px,width=500px,height=500px')
        }

    </script>
</body>

3.window对象两个事件

（1）window.onload = function( ){ } （加载事件： DOM树 + 外部资源）

  window.onload=function(){
            let box = document.querySelector('.box')
  //box.scrollWidth，box.scrollHeight:检查box盒子的长度和宽度
            console.log(box.scrollWidth,box.scrollHeight)
        }

（2）window.onbeforeunload = function( ){ }（* 关闭事件：页面关闭之前执行：一般是用于页面关闭之前存储数据）

 window.onbeforeunload = function(){
        console.log('关闭页面前执行的操作')
     while(true){
       window.open('http://www.baidu.com')
        }
     }

4. location对象：浏览器地址栏 url

1 .重点掌握： location.href = 'url'

2. 三个方法（location.assign('url')）和 location.href = 'url' 同样跳转

跳转 location.assign( 'url' ) 例如 location.assign('http://www.baidu.com')

替换 location.replace( 'url' )

刷新(一般用于移动端) location.reload('url')

3.history对象：查看浏览器历史记录

history.back( ) : 返回上一页

history.forward( ) : 前进下一页

history.go(数字) 0就是刷新当前页面 1就是前进一位 -1就是回退一位（跳转指定页面）4. navigator对象：用户信息

console.log ( navigator ) (查看navigator属性)

console.log ( navigator.userAgent ) 用户代理：用户设备信息+浏览器信息

5.screen : 用户电脑屏幕（了解，不常用）

console.log(screen)

二.存储对象（ localStorage与sessionStorage ）

1.localStorage

存数据：localStorage.setItem( ' 属性名 ' , ' 属性值 ' )

取数据：localStorage.getItem( ' 属性名 ' ) 有返回值，设置变量接收

删除数据：localStorage.removeItem( ' 属性名 ' )

清空数据 ( 格式化 ): localStorage.clear( 括号内不要填写内容 )

2.localStorage与sessionStorage区别（异同点）

相同点：都是用来存储数据的

不同点： localstorage是硬盘存储，sessionStorage：内存存储

三.json格式（JSON是一种数据格式，本质字符串）

json对象：console.log('{ " name " : " ikun " , " age " : 30 , " sex " : " 男 " } ' )

（1）后台发给前端的，返回的是js对象

json -> js : let jsObj = JSON.parse( 把对象类型json转换JS对象类型 )

（2）前端发给后台的，返回的是json

js -> json : let jsonStr = JSON.stringify(把JS对象类型转换为JSOM对象 )

四.三大家族

1.offset家族

（1）.获取自身盒子真实宽高，（2）.距离浏览器的位置

console.log( box.offsetWidth,box.offsetHeight,box.offsetLeft,box.offsetTop )

2. scroll家族

（1）.获取元素内容的自身宽高，（2）.和滚动条的位置

console.log( box.scrollWidth,box.scrollHeight,box.scrollLeft,box.scrollTop )

3.client家族

（1）获取元素可视区域大小,（2）.可视区域位置（就是左边框和上边框宽度）

console.log( box.clientWidth,box.clientHeight,box.clientLeft,box.clientTop )

4.window.onscroll = function () { } 页面滚动事件

配合html页面的查找滚动条位置使用document.documentElement.scrollTop

一个好好的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webapi和Bom有关的部分和三大家族

一.window对象1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象（ 1 ）. 只要是window对象的成员，使用时一律可以省略window。例如：window.alert( ) 可以省略window写成alert( ) 例如：window.document 可以省略window写成document( 2 ) window对象有一个特殊属性叫做name(它...
复制链接

扫一扫