JavaScript(4)---BOM详解

时间 2020-02-10

标签 javascript bom 详解栏目 JavaScript 繁體版

原文原文链接

JavaScript(4)---BOM详解

以前写过一篇有关DOM的博客：JavaScript(2)---DOM详解javascript

DOM有个顶级对象叫：document。一样BOM中也有顶级对象叫 window。css

它们的区别在于： DOM是一套操做HTML标签的API。 BOM是一套操做浏览器的API。html

1、概念

一、什么是BOM

概念 BOM(浏览器对象模型) 提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，能够对浏览器窗口进行访问和操做。java

从这幅图能够看出,document也是window的子对象。由于页面中的全部内容也是属于浏览器的一部分，因此document也是属于window。浏览器

二、常见的BOM对象

一、window:     # 表明整个浏览器窗口（window是BOM中的一个对象，而且是顶级的对象）
二、Navigator:  # 表明浏览器当前的信息，经过Navigator咱们能够获取用户当前使用的是什么浏览器
三、Location:   # 表明浏览器当前的地址信息，经过Location咱们能够获取或者设置当前的地址信息
四、History:    # 表明浏览器的历史信息，经过History咱们能够实现上一步/刷新/下一步操做
五、Screen:     # 表明用户的屏幕信息

2、window对象

概念 window对象表示的是浏览器中打开的窗口，至关因而浏览器中的最顶层对象。服务器

一、window经常使用方法

一、open():          # 在一个窗口中打开页面
二、setInterval():   # 设置定时器（执行n次）
三、clearInterval(): # 清除定时器
四、setTimeout():    # 设置定时器(只执行1次)
五、clearTimeout():  # 清除定时器
六、alert():    # 提示框
七、confirm():  # 确认提示框
八、propmt():   # 输入提示框
九、console():  # 浏览器控制台打印
十、onload():  # 页面加载完才触发的事件

注意：由于window对象使用很是频繁，因此当调用js中的window对象的方法时，能够省略对象名(window)不写。dom

二、示例

代码测试

<style type="text/css">
    input{
        display:block;
        width: 120px;
        height: 25px;
        background-color: #cddc39;
        margin-left: 250px;
        margin-top:10px;      
    }
</style>

<script type="text/javascript">
    function testAlert(){
        window.alert("弹出alert");    
    }

    /*
     * 参数1:dialog中显示的内容
     * 参数2,3:可点击的按钮(默认没有就是"ok","cancle")
     * 返回值: ok->true cancle->false
     */
    function testConfirm(){
        var flag;
        flag = window.confirm("请选择是否?","是","否");
        if (flag)
            window.alert("你点击的是-'肯定'");
        else
            window.alert("你点击的是-'取消'");
    }
    
    /*
     * 参数1：能够是一个资源地址（图片，本地地址...）
     * 参数2：target of links
     * 参数3：窗口特色......
     */
    function testOpen (){
        window.open("http://www.baidu.com","_blank","height=400px,width=400px,left=10px");
    }

    /*
     * 参数1：提示语
     * 返回值：在输入框中输入的内容
     */
    function testPrompt (){
        var str;
        str = window.prompt("请输入您手机号码：");    
        window.alert("您刚才输入了："+str);
    }
    
    /*
     * 参数1：定时器要执行的方法（每隔必定时间执行）
     * 参数2：定时器时间
     */
    var intervalID;
    function testInterval (){
        intervalID = window.setInterval("testAlert()",2000);
    }

    /*
     * 清除定时器
     */
    function removeInterval (){ 
        window.clearInterval(intervalID);   
        console.log("定时任务ID="  + intervalID);
      
    }
    
    /*
    参数1：定时器要执行的方法（只执行一次）
    参数2：定时器时
    */
    var timeoutID;
    function testTimeout (){
        timeoutID = window.setTimeout("testAlert()",2000);   
    } 
    
    /*
     * 清除定时器
     */
    function removeTimeout (){
        window.clearTimeout(timeoutID); 
        console.log("定时任务ID="+ timeoutID);
    }
 
</script>
</head>
<body>
    <input type="button" value="测试alert" onclick="testAlert()" />
    <input type="button" value="测试open" onclick="testOpen()" />
    <input type="button" value="测试Confirm" onclick="testConfirm()" />
    <input type="button" value="测试testPrompt" onclick="testPrompt()" />
    <input type="button" value="测试Interval" onclick="testInterval()" />
    <input type="button" value="测试清除Interval" onclick="removeInterval()" />
    <input type="button" value="测试Timeout" onclick="testTimeout()" />
    <input type="button" value="测试清除Timeout" onclick="removeTimeout()" />
</body>

运行结果3d

3、location对象

概念 location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。code

一、location经常使用属性

属性

一、location.href  # 返回当前加载页面的完整URL
二、location.hash  # 返回URL中的hash（#号后跟零或多个字符），若是不包含则返回空字符串。
三、location.host  # 返回服务器名称和端口号（若是有）
四、location.hostname  # 返回不带端口号的服务器名称。
五、location.pathname  # 返回URL中的目录和（或）文件名。
六、location.port      # 返回URL中指定的端口号，若是没有，返回空字符串。
七、location.protocol  # 返回页面使用的协议。
八、location.search    # 返回URL的查询字符串。这个字符串以问号开头。

位置操做

一、location.href = '网址'   # 当前页面跳转到新的网址  <a href="网址"></a>
二、location.replace('网址') # 跳转但不会在历史记录中生成新纪录
三、location.reload()       # 刷新当前页面
四、window.open('网址')      # 会新建一个窗口打开页面<a href="网址" target='_blank'></a>

4、history对象

概念 history对象保存着用户上网的历史记录，在窗口打开的那一刻算起。由于history是window对象因此每一个浏览器窗口都有本身的history对象与特定的window对象关联。

一、经常使用方法

一、history.back()    # 后退一页
  二、history.forward() # 前进一页
  三、history.go(n)     # 前进n页
  四、history.go(-2)    # 后退n页
  五、history.go(0)     # 至关于刷新

二、示例

为了实现 返回上一页和 返回下一页功能，这里须要两个简单页面

首页

<!DOCTYPE html>
<html lang="en">
  <style type="text/css">
    input{
      width: 120px;
      height: 25px;
      background-color: #cddc39;
      margin-top:10px;      
    }
</style>
<body>
<input type="button" value="跳转页面" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script src="common.js"></script>
<script>
  //跳转的
  document.getElementById("btn1").onclick = function () {
    window.location.href = "test.html";
  };
  //前进 前进一步就会又到跳转的页面
  document.getElementById("btn2").onclick = function () {
    window.history.forward();
  };
</script>
</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
  <style type="text/css">
    input{
      width: 120px;
      height: 25px;
      background-color: #cddc39;     
    }
</style>
<body>
<input type="button" value="后退" id="btn"/>
<script src="common.js"></script>
<script>
  //后退 后退一步就是到上一个页面
  document.getElementById("btn").onclick = function () {
    window.history.back();
  };
</script>
</body>
</html>

运行结果

5、综合示例

一、一块儿摇起来

实现原理 ：设置定时器 + 取消定时器 + 设置随机边距实现

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img {  width: 150px; height: 150px; }
    div {  margin-top: 15px;  position: absolute;  }
  input {  width: 120px; height: 25px; background-color: #cddc39; }
  </style>
</head>
<body>
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="中止" id="btn2"/> <br>
<div id="dv">
  <img src="11.jpg" alt=""/>
  <img src="12.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //定时器ID 用于解除定时
  var timeId="";
  my$("btn1").onclick = function () {
    clearInterval(timeId); //先清一次,由于不先清，若是用户屡次点击“摇起来” 那么Id已经被覆盖 以前的定时任务不可能中止
    timeId= setInterval(function () {
      var x = parseInt(Math.random() * 100 + 1);   //随机数
      var y = parseInt(Math.random() * 100 + 1);
      my$("dv").style.left = x + "px";    //设置元素的left和top属性值
      my$("dv").style.top = y + "px";
    }, 50); //定时时间50毫秒
  };

  my$("btn2").onclick=function () {  //清除定时任务
    clearInterval(timeId);
  };

/**
 * 获取指定标签对象
 */
function my$(id) {
    return document.getElementById(id);
}
</script>
</body>
</html>

二、用户协议

使用场景 咱们在阅读一些协议的时候，每每不能直接点赞成，而是几秒后才能点赞成。

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
  请仔细阅读协议,请仔细阅读协议,请仔细阅读协议,请仔细阅读协议.
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script>
var time=5; //5秒倒计时
 var timeId= setInterval(function () {
   time--;
   my$("btn").value="请仔细阅读协议("+time+")";
    if(time <= 0){
      //中止定时器就能够
      clearInterval(timeId);
      //按钮能够被点击了
      my$("btn").disabled=false;
      my$("btn").value="赞成";
    }

  },1000);

 /**
 * 获取指定标签对象
 */
function my$(id) {
    return document.getElementById(id);
}
</script>
</body>
</html>

参考

一、js bom 四大对象

二、JavaScript BOM

你若是愿意有所做为，就必须善始善终。(23)