BOM-window对象-onload事件/window：是所有对象的顶级对象（DOM和BOM）/BOM-window对象-操作窗口

最新推荐文章于 2022-10-29 18:51:18 发布

喵帕斯_喵太

最新推荐文章于 2022-10-29 18:51:18 发布

阅读量251

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115976212

版权

javascript

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-BOM-window对象-onload事件

    <script>
        // 尝试获取box盒子
        // let box = document.querySelector('.box')
        // console.log(box)

        // window.onload：页面加载事件，浏览器不要执行js：等html加载结束后再执行（所有资源都加载完毕）
        window.onload = function () {
            let box = document.querySelector('.box')
            console.log(box)

            // 加载事件存在：可以让js独立出来，形成单独的js文件，可以在head中引入
        }
    </script>
</head>

<body>
    <div class="box">
        我是前端小白
    </div>

    <!-- 扩展浏览器的加载逻辑 -->
    <img src="images/cloud.gif" alt="">
</body>

注意：

1.window.onload：页面加载事件，浏览器不要执行js：等html加载结束后再执行（所有资源都加载完毕）
2.加载事件存在：可以让js独立出来，形成单独的js文件，可以在head中引入

02-BOM-window对象

    <script>
        // window：是所有对象的顶级对象（DOM和BOM）
        console.log(window)     // document属于window对象，前面所有讲的交互（prompt() alert()都属于window对象）

        // window有一个name属性
        // console.log(window.name, name)

        // 特殊性：name永远只能存储字符串
        // name = [1, 2, 3]                    // name的赋值一定会放到最前面去
        // console.log(name)                   // 最终一定是字符串

        // var name = { age: 18 }
        // console.log(name)                   // var的全局变量本来就属于window对象（最终依然是name属性）

        // 所有的全局有名函数：都是window的
        function gun() {
            console.log('有多远滚多远')
        }

        // 所有没有关键字声明的变量：都属于window
        i = 100

        function test() {
            inner = '我是内部变量，没有关键字声明'
        }
        test()

        // window是所有DOM（document）和BOM（其他对象） 的顶级对象
        // 定义变量：一定要有关键字（let，或者用var）
        // 尽量不要使用name做变量：let没有关系

        // let name = [1, 2, 3]        // let 属于script全局（不属于window）
        // console.log(name)
    </script>

注意：

1.window：是所有对象的顶级对象（DOM和BOM）
2.document属于window对象，前面所有讲的交互（prompt() alert()都属于window对象）
3.window有一个name属性
3.1.特殊性：name永远只能存储字符串
4.所有的全局有名函数：都是window的
5.所有没有关键字声明的变量：都属于window
6. 定义变量：一定要有关键字（let，或者用var）
7.尽量不要使用name做变量：let没有关系

03-BOM-window对象-操作窗口


<body>
    <button class="open">打开窗口</button>
    <button class="close">关闭窗口</button>

    <script>
        // 需求：点击 打开窗口 打开一个新窗口
        document.querySelector('.open').onclick = function () {
            // 直接打开：window.open()：空白
            // window.open()

            // 指定链接：open第一个参数
            // open('http://www.itcast.cn')

            // 指定打开位置：第二个参数，默认_blank（a的target属性）
            // open('http://www.itcast.cn', '_self')

            // 可以控制窗口大小：第三个参数，是一个带条件的字符串：可以控制宽度width，高度height，左偏移left，上偏移top
            res = open('http://www.itcast.cn', '_blank', 'width=500,height=300,left=200,top=200')

            console.log(res)
        }

        document.querySelector('.close').onclick = function () {
            // close()      // 关闭自己：谷歌浏览器不同的版本支持程度不一样（不支持关闭）

            // 关闭：必须指定window对象：window.close()
            res.close()
        }
    </script>
</body>

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM-window对象-onload事件/window：是所有对象的顶级对象（DOM和BOM）/BOM-window对象-操作窗口

01-BOM-window对象-onload事件 <script> // 尝试获取box盒子 // let box = document.querySelector('.box') // console.log(box) // window.onload：页面加载事件，浏览器不要执行js：等html加载结束后再执行（所有资源都加载完毕） window.onload = function () {
复制链接

扫一扫

专栏目录