zoukankan      html  css  js  c++  java
  • BOM用法

    一、BOM简介

    BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。

    Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()

    二、window对象

    看上面的例子你会发现,name直接封装到了window对象上,了解一下就可以了。

      所有浏览器都支持 window 对象。它表示浏览器窗口。

    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

    全局变量是 window 对象的属性。全局函数是 window 对象的方法。

    接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一

    一些常用的Window方法:(在浏览器调试器的console里面输入下面这些属性或者方法,就能看到对应的效果)

    • window.innerHeight - 浏览器窗口的内部高度
    • window.innerWidth - 浏览器窗口的内部宽度
    • window.open() - 打开新窗口
    • window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面,了解一下就行了)
    // 打开窗体,本页面跳转
    window.open("http://www.baidu.com","_self");
     // 打开窗体,新窗口跳转
    window.open("http://www.baidu.com","_blank","width=1px,height=1px");

    三、弹出框(windows子对象)

    可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

    3.1 警告框

     警告框经常用于确保用户可以得到某些信息。

       当警告框出现后,用户需要点击确定按钮才能继续进行操作。

       语法:

    window.alert("你看到了吗?");

    3.2 确认框

     确认框用于使用户可以验证或者接受某些信息。

        当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

        如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

    var res = window.confirm("111")
    console.log(res)

    3.3 提示框

    提示框经常用于提示用户在进入页面前输入某个值。

        当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

        如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为默认值,就是第二个参数,如果没有默认值那么返回null。

        语法:

    var res = window.prompt("请输入您的银行卡密码:")
    console.logv(res,typeof(res))

    四、location对象(windows子对象)

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

        常用属性和方法:

    location.href  //获取URL
    location.href="URL" // 跳转到指定页面
    location.reload()  //重新加载页面,就是刷新一下页面

    五、history对象(windows子对象)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> history 对象 和 navigator 对象 </title>
    </head>
    <body>
        <button onclick="func1()">查看history历史对象</button>
        <button onclick="func2()">上一页</button>
        <button onclick="func3()">下一页</button>
        <button onclick="func4()">刷新</button>
        <script>
            function func1(){
                console.log(history)
            }
            
            function func2(){
                history.go(-1)
            }
    
            function func3(){
                // 跳转第一页
                history.go(1)
                // 跳转到第二页
                history.go(2)
            }
    
            function func4(){
                history.go(0)
            }
    
            console.log(navigator) 
            console.log(navigator.platform)  // 判断是pc端还是移动端
            console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据
            
    
    
        </script>
        
    </body>
    </html>

    六 navigator对象

    浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

    console.log(navigator) 
    console.log(navigator.platform)  // 判断是pc端还是移动端
    console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据

    七、定时器

    定时器是基于单线程的异步并发操作

    通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件

      window.setInterval(函数,间隔时间(毫秒)) // 定时执行多次任务
      window.setTimeout(函数,间隔时间(毫秒))  // 定时执行一次任务 
     // 清除定时器
     window.clearInterval(id号)
     window.clearTimeout(id号)
    // 创建一个定时器1
            // var id1 = window.setInterval(func,1000)
    
            // 创建一个定时器2
            var id2 = window.setTimeout(func,1000)
    
            var count = 1
            // 执行任务 当前函数可以预加载
            function func(){
                console.log("当前数值为:",count)
                if(count == 10){
                    // 杀死定时器1
                    // window.clearInterval(id1)
                    // 杀死定时器2
                    window.clearTimeout(id2)
                }
                count++
            }
  • 相关阅读:
    4.nmap常用命令备忘录
    1.封神台sql注入实战靶场
    第一章、为了女神小芳
    2.kali部署vulhub
    5.docker可视化
    6.docker精髓
    【Rust】引用模式
    【Rust】虚类型测试
    【Rust】可变借用
    【Rust】虚类型参数
  • 原文地址:https://www.cnblogs.com/yj0405/p/14766596.html
Copyright © 2011-2022 走看看