• JavaScript——BOM操作


    一、BOM介绍

    BOM:Browser Object Model,浏览器对象模型。

    window代表BOM对象 ,浏览器窗口页面:滚动条,顶部tab页,整个导航条,浏览器弹窗 

    BOM操作只能在整个文档页面来操作

    BOM的结构图:

    从上图可以看出来:

    (1)DOM对象也是BOM的一部分

    (2)window对象是BOM的顶层(核心)对象

    注意:

    (1)在调用window对象的方法和属性时,可以省略window,例如:window.document.location可以简写为document.location
    
    (2)全局变量也是windows对象的属性,全局的函数是window对象的方法

    二、对象history、navigator、screen(了解)

    #1、history对象包不包含浏览器的历史
    history.back() //后退一页,等同于history.go(-1)
    history.forward() //前进一页,等同于history.go(1)
    history.go(0) //0是刷新
    用的不多。因为浏览器中已经自带了这些功能的按钮:
    
    #2、navigator对象包含了浏览器相关信息。
    navigator.appName  // Web浏览器全称
    navigator.userAgent  // 客户端绝大部分信息
    navigator.platform   // 浏览器运行所在的操作系统
    
    #3、可以用screen对象得到可用的屏幕宽度和高度
    screen.availWidth  //可用的屏幕宽度
    screen.availHeight  //可用的屏幕高度

    举例:点击进入上一页/下一页

    ================page11.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>第一个页</p>
    <a href="page22.html">点我进入下一页</a>
    </body>
    </html>
    
    
    ================page22.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>第二个页</p>
    <a href="page33.html">点我进入下一页</a>
    </body>
    </html>
    
    
    ================page33.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function back() {
                window.history.back()
            }
        </script>
    </head>
    <body>
    <p>第三个页</p>
    
    <input type="button" value="点我进入上一页" onclick="back()">
    
    </body>
    </html>
    点击进入 上一页下一页

    三、localtion对象(要用)

    location.href  //获取URL
    location.href="URL" // 跳转到指定页面
    location.reload() //重新加载页面

    location.href

    练习1:点击盒子,跳转页面

    <body>
    <div id="div1">点我一下</div>
    <script>
        var oDiv = document.getElementById('div1');
        oDiv.onclick = function () {
            location.href = 'https://www.baidu.com';
        }
    </script> 
    </body>
    //
    <body>
    <div class="box">我是div,点我</div>
    <script>
        document.getElementsByClassName("box")[0].onclick=function () {
            location.href="http://www.baidu.com"
        }
    </script> 
    </body>

    练习2:3s后,自动跳转页面

    <body>
    <div>这天下,本就是大争之世,孤的儿子,不仅要争,而且要争的光芒万丈</div>
    <script>
        setTimeout(function () {
            location.href = 'https://www.baidu.com';
        }, 3000)
    </script>
    </body>

    练习3:3s后让网页整个刷新

    <body>
    <div>这天下,本就是大争之世,孤的儿子,不仅要争,而且要争的光芒万丈</div>
    <script>
        setTimeout(function () {
            location.reload();
        }, 3000)
    </script>
    </body>

    四、弹出系统对话框

    alert在测试代码时要用

    alert(1)是window.alert(1)的简写,因为它是window的子方法。
    
    系统对话框有三种:
    
        alert("人丑还不读书,是找不到女朋友的"); //不同浏览器中的外观是不一样的
        confirm("你真的要这么做吗小伙子");  //兼容不好
        prompt("输入用户名:");   //不推荐使用
    
    // 示例
    alert("弹框内内容")
    var res=confirm("弹框内信息  比如:你确定删库吗?")
    console.log(res) //接收弹框内容的返回值 true false
    var username=prompt("请输入用户名: ") //弹框让输入用户名
    var password=prompt("请输入密码: ")
    console.log(username,password)

    五、打开关闭窗口(了解)

    #1、open("url地址","新窗口的位置_blank或者_self","新窗口的特征")
    window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
    
    #2、close()关闭当前窗口
    var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400") //_self代表在当前页面打开,_blank代表在新页面打开
    x.close() #这个是点击立即关闭,可以自己设置关闭事件

    六、浏览器窗口内部的高度和宽度

    window.innerHeight - 浏览器窗口的内部高度
    window.innerWidth - 浏览器窗口的内部宽度 

    七、 定时器 

    #1.setTimeOut()
    只在指定时间后执行一次,通常用于延迟执行某方法或功能(多长时间之后干什么事)
    
    //定时器 异步运行  
    function say(){  
        alert("hello");  
    }  
    //使用方法名字执行方法  
    var t1 = setTimeout(hello,1000);  
    var t2 = setTimeout("hello()",3000); //使用字符串执行方法  
    clearTimeout(t2); //去掉定时器
    
    
    #2.setInterval()
    在指定时间为周期循环执行,通常用于刷新表单,对于一些表单的假实时指定时间刷新同步,动画效果等。
    
    //实时刷新时间单位为毫秒  
    var t3 = setInterval(say,3000);   
    var t4 = setInterval('say()',3000);   
    
    clearInterval(t3);
    clearInterval(t4);

     举例:

        setTimeout(function () {
            location.href="http://www.baidu.com"
            location.reload()
            console.log(123) //3秒后打印出123
        },3000)
    
        setInterval(function () {
            location.href="http://www.baidu.com"
            location.reload()
            console.log(123)  //每隔3秒运行一次
        },3000)
    
        var s1=setTimeout(function () {
            alert(123)
        },3000)
        clearTimeout(s1) //清理掉
    
         var s2=setInterval(function () {
            alert(123)
        },2000)
    
        clearInterval(s2) //清理掉
  • 相关阅读:
    LeetCode 面试题 02.02. 返回倒数第 k 个节点
    LeetCode 1290. 二进制链表转整数
    LeetCode 面试题52. 两个链表的第一个公共节点
    LeetCode 2. 两数相加
    Jupyter Notebook 常用快捷键 (转)
    LeetCode 414. 第三大的数
    LeetCode 404. 左叶子之和
    三年了
    LeetCode 543. 二叉树的直径
    求结点在二叉排序树中层次的算法
  • 原文地址:https://www.cnblogs.com/guojieying/p/13712126.html
Copyright © 2020-2023  润新知