五大对象

最新推荐文章于 2023-05-21 22:59:20 发布

小崽子o

最新推荐文章于 2023-05-21 22:59:20 发布

阅读量501

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_64352881/article/details/123887239

版权

window对象

 <script>
        /* 
        window对象 ： 浏览器窗口
            1. 是js中的顶级对象。 所有的全局函数、全局属性都是window对象的成员(属性+方法) 
            2. 只要是window对象的成员，在使用时可以省略window
            3. window对象有一些特殊的属性不能被覆盖。 例如top不能作为全局变量名
        */

        console.log( window )

        window.console.log(1111)//等价于 console.log(11111)
        
        console.log( window.document === document )//true
    
    </script>

window对象事件

 <script>
        //如果js写在head里面，将会无法获取dom元素
        //原因：js代码从上往下解析，执行到这里。dom还没有加载

        // onload事件： dom树 + 外部资源 加载完毕后执行
        window.onload = function(){
            console.log('dom树 + 外部资源，加载完毕后执行')
            //dom树加载完毕，才可以获取box
            let box = document.querySelector('.box')
            //外部资源加载完毕，才可以拿到图片的尺寸
            console.log( box.scrollWidth ,box.scrollHeight )//1200 675
        }
    </script>
</head>
<body>
    
    <div class="box" style="width: 100px;height: 100px;background-color: red">
        <img src="./01.jpg" alt="">
    </div>
    <script>
        /* 
        window对象 ： 浏览器窗口
            1. 是js中的顶级对象。 所有的全局函数、全局属性都是window对象的成员(属性+方法) 
            2. 只要是window对象的成员，在使用时可以省略window
            3. window对象有一些特殊的属性不能被覆盖。 例如top不能作为全局变量名
        window对象两个方法
            1.打开新窗口：  window.open()
            2.关闭新窗口：  window.close()
        window对象事件
            1. window.onload事件 ：dom树 + 外部资源 加载完成后执行
            2. window.onbeforeunload事件 ：页面关闭之前执行
            3. window.onunload事件  ：页面正在关闭
        */

        //1. 加载事件 : dom树 + 外部资源 加载完成后执行
        // window.onload = function(){
        //     console.log('dom树 + 外部资源，加载完毕后执行')
        //     let box = document.querySelector('.box')
        //     console.log( box.scrollWidth ,box.scrollHeight )//1200 675
        // }

        //2. 页面关闭之前执行
        // window.onbeforeunload = function(){
        //     console.log('页面关闭之前'); 
        // }

        //3.页面正在关闭
        // window.onunload = function(){
        //     console.log("页面正在关闭");
        // }

       
    </script>

location对象

<body>

    <button class="assign">assign 跳转网页</button>
    <button class="replace">replace 替换网页</button>
    <button class="reload">reload 刷新网页</button>
    <a href="http://www.baidu.com">点我跳转</a><br>
    <input class="username" type="text" placeholder="请输入账号"><br>
    <input class="password" type="text" placeholder="请输入密码"><br>
    <button>点我登录</button>

    <script>
        /* location : 网址栏  url
            1.使用最多的属性(网页跳转)： location.href
            2.location对象三个方法 : 
                location.assign() : 跳转网页。  作用与location.href一致
                location.replace() : 替换网页。  使用较少，因为替换后不能返回
                location.reload() :  刷新网页。  一般用于移动端
        */ 
       
        console.log( window.location )

        //1.location对象使用最多的属性 href
        console.log( location.href )
        //作用： 跳转网页
        // location.href = 'http://www.baidu.com'

        document.querySelector('button').onclick = function(){
            let username = document.querySelector('.username').value
            let password = document.querySelector('.password').value
            if( username == 'admin' && password =='123456' ){
                window.location.href = 'http://www.baidu.com'
            }else{
                alert('用户名或密码错误')
            }
        }
        //2.获取域名
        console.log( location.hostname )//域名  网址的身份证
        //3.获取参数
        console.log( location.search )//网络参数
        

        document.querySelector('.assign').onclick = function(){
            //跳转： 与location.href 一模一样。 只是写法不同
            location.assign('http://www.baidu.com')
        }
        document.querySelector('.replace').onclick = function(){
            //替换网页 ： 无法回退
            location.replace('http://www.baidu.com')
        }
        document.querySelector('.reload').onclick = function(){
            //刷新网页： 相当于F5
            location.reload()
        }
        
        
        
        
    </script>
</body>

history对象

<body>
    <script>
        /* 
        history : 历史记录
        history三个方法：
            history.back() : 返回上一页     等价于  history.go(-1)
            history.forward() : 前进下一页     等价于  history.go(1)
            history.go( 数字 ) : 到历史记录的具体哪一页
                正数： 前进    1：前进1页   2：前进2页   
                负数： 回退    -1：回退1页  -2：回退2页
        */  
       
        console.log( history )
        console.log( history.length )//几条历史记录
        
        
    </script>
</body>

navigator对象

<body>
    <script>
        /* 
        navigator : 浏览器信息对象
            作用：收集用户信息
        */    

        console.log( navigator )
        console.log( navigator.userAgent )//用户代理： 浏览器型号，内核。 计算机操作系统型号
        
        
    </script>
</body>

screen对象

<body>
    <script>
       /*screen对象 ：获取用户电脑分辨率 
       
       */ 

       console.log( screen )
       
    </script>
</body>

小崽子o

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
五大对象

window对象 <script> /* window对象：浏览器窗口 1. 是js中的顶级对象。所有的全局函数、全局属性都是window对象的成员(属性+方法) 2. 只要是window对象的成员，在使用时可以省略window 3. window对象有一些特殊的属性不能被覆盖。例如top不能作为全局变量名 */ console.log( w
复制链接

扫一扫