javascript基础：bom

一、BOM

　　1、概念：Browser　Object　Model  浏览器对象模型

　　　　*  将浏览器的各个组成部分封装成对象

　　2、组成：

　　　　*  Window：窗口对象

               　　 1、创建

               　　 2、方法

               　　 3、属性

              　　  4、特点

                   　　 * Window对象不需要创建可以直接使用 window使用，window.方法名();

                    　　* window引用可以省略。 方法名()

　　　　*  Navigator：浏览器对象

　　　    *  Screen：显示器屏幕对象

　　　　*  History：历史记录对象

　　　　*  Location：地址栏对象

　　3、Window对象

　　　　　　 1、创建

               　　 2、方法　 

　　　　　　　　　　　　　　1、与弹出框有关的方法
                            alert(): 显示带一段信息和一个确认按钮的警告框
                            confirm()   显示带有一段信息以及确认按钮和取消按钮的对话框
                                * 如果用户点击确定按钮，则方法返回true
                                * 如果用户点击取消按钮，则方法返回false
                            prompt()    显示可提示用户输入的对话框
                                *返回值：获取用户输入的值
                        2、与打开关闭有关的方法：
                            close()：关闭浏览器窗口
                                * 谁调用close，就关谁 open()：打开一个新的浏览器窗口 * 返回一个新的window对象 3、与定时器有关的方式 setTimeout() 在指定的毫秒数后调用函数或计算表达式 * 参数： 1、js代码或者方法对象 2、毫秒值 * 返回值：唯一标识，用于取消定时器 clearTimeout() 取消有setTimeout() 方法设置的 timeout setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式 clearInterval() 取消由 setInterval() 设置的 timeout

               　　 3、属性

　　　　　　　　1、获取其他BOM对象：

                           　　 history

                           　　 localtion

                            　　Navigator

                            　　Screen

                       　   2、获取DOM对象

                            　　document

              　　  4、特点

                   　　 　　* Window对象不需要创建可以直接使用 window使用，window.方法名();

                    　　　　* window引用可以省略。 方法名()

 　　　　　　 //1、alert
            alert("666")
            window.alert("555")
    
            //2、confirm
            var flag = confirm("确定推出吗？？")
            alert(flag)
            if(flag){
                //退出
                alert('欢迎下次再次登录')
            }else{ //提示 alert('手别抖') } //输入框 //3、prompt var result = prompt('请输入用户名'); alert(result)

            //open
            //打开一个新窗口
            var openBtn = document.getElementById("openBtn");
            var newWindow;
            openBtn.onclick = function(){
                newWindow = open("http://www.baidu.com");
            }

            //关闭一个新窗口
            //close
            var closeBtn = document.getElementById("closeBtn");
            closeBtn.onclick = function(){ newWindow.close(); } 

            // 一次性定时器
            setTimeout("fun()",3000);
            var id = setTimeout(fun,3000);
            // 取消定时器
            clearTimeout(id);
            function fun(){
                alert('bbb~')
            }

            // 循环定时器
            var id = setInterval(fun,2000) // 取消循环定时器 clearInterval(id) 

     　　　　// 获取history
            var h1 = window.history;
            var h2 = history;
            alert(h1)
            alert(h2)
            
            var openBtn = window.document.getElementById("openBtn");
            alert(openBtn);
            // document.getElementById("")

---

　　4、Location：地址栏对象

　　　　1、创建(获取)：

　　　　　　1、window.location

　　　　　　2、location

　　　　2、方法：

　　　　　　* reload()　　重新加载当前文档，刷新

　　　　3、属性：

　　　　　　* href　　设置或返回完整的URL

　　 <input type="button" id="btn" value="刷新">
    <input type="button" id="goflypig" value="flypig">

    <script>
        //  reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function(){
            //3.刷新页面
            location.reload();
        }

        // 获取href
        var href = location.href;
        alert(href)

         //1.获取按钮
         var goflypig = document.getElementById("goflypig");
        //2.绑定单击事件
        goflypig.onclick = function(){ //3.访问flypig location.href = "https://www.flypig666.cn"; } </script>

---

　　5、History：历史记录对象

　　　　1、创建（获取）：

　　　　　　1、windows.history

　　　　　　2、history

　　　　2、方法：

　　　　　　*　back() 　　加载history 列表中的前一个 URL

　　　　　　*　forward()　　加载history  列表中的下一个 URL

　　　　　　*　go(参数)　　　　加载history　列表中的某个具体页面

　　　　　　　　* 参数

　　　　　　　　　　* 正数：前进几个历史记录

　　　　　　　　　　* 负数：后退几个历史记录

　　　　3、属性：

　　　　　　*　length　　返回当前窗口历史列表中的 URL 数量

    <input type="button" id="btn" value="获取历史记录个数">
    <a href="History_1.html">history1</a>
    <input type="button" id="forward" value="前进">

    <script>

        //一、
        //1、获取按钮
        var btn = document.getElementById("btn")
        //2、绑定单击事件
        btn.onclick = function(){
            //3、获取当前窗口历史记录个数
            var length = history.length;
            alert(length)
        }

        //二、
        //1、获取按钮
        var forward = document.getElementById("forward")
        //2、绑定单击事件
        forward.onclick = function(){
            // history.forward();
            history.go(+1) } </script>

 

 

转载于:https://www.cnblogs.com/flypig666/p/11600322.html