BOM的介绍_BOM定义

全栈程序员站长

发布于 2022-09-20 17:09:08

1.2K0

发布于 2022-09-20 17:09:08

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型。

浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等。

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性 window.name

Global对象：全局变量，脚本的任何一个地方都能调用的变量。

全局方法：脚本的任何一个地方都能调用的方法。

window对象的方法

对话框

alert()
prompt()
confirm()

1 alert()

2 prompt()

什么也不填返回的时空字符串“”。

3 confirm

4 open()

参数：

1 window.onload = function(){
2 // 打开子窗口，显示newwindow.html                    
3  window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no"); 
4 }

5 close()

点击关闭后，当前窗口关闭，子窗口没有关闭。

编程练习

实现：当点击页面上的按钮时，弹出确认框

（1）当点击按钮上的确定时，打开设置了新特征的子窗口, 新窗口的特征参考任务栏中的描述

（2）当点击按钮上的取消时，关闭当前页面

http://img1.sycdn.imooc.com/climg/59e59aaa0001d90c05000202.jpg

思路

第一步：获取到按钮元素，并为按钮绑定鼠标单击事件

下面的步骤皆在单击事件中进行

第二步：当点击按钮时，弹出确认框，用if判断对确认框返回的值进行判断

（1）返回的值为true时，说明点击的是确认，打开新的窗口“newPage.html”，用open（）方法，新窗口的特征如下：

①宽300，高300

②窗口距离屏幕上边200，距离屏幕左边600

③窗口不显示地址字段、菜单栏、滚动条以及状态栏

（2）返回值是false为false时，表示点击的是“取消”按钮，当前页面被关闭，用close（）方法。

我的代码

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>打开/关闭页面</title> </head> <body> <input type="button" name="" value="打开页面"> <script type="text/javascript"> //补充代码 var btn = document.getElementsByTagName("input")[0]; btn.onclick=function(){ var result=confirm("是否打开页面"); if(result){ window.open("newPage.html","newPage","width=300,height=300,left=600,top=200,toolbar=no,menubar=no,scrollbars=no,location=no,status=no"); }else{ window.close(); } } </script> </body> </html>

页面加载事件

onload

 window.onload = function () {
   // 当页面加载完成执行
   // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
 }

onunload

 window.onunload = function () {
   // 当用户退出页面时执行
 }

定时器

1 setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

 // 创建一个定时器，1000毫秒后执行，返回定时器的标示
 var timerId = setTimeout(function () {
   console.log('Hello World');
 }, 1000);
 
 // 取消定时器的执行
 clearTimeout(timerId);

2 setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

 // 创建一个定时器，每隔1秒调用一次
 var timerId = setInterval(function () {
   var date = new Date();
   console.log(date.toLocaleTimeString());
 }, 1000);
 
 // 取消定时器的执行
 clearInterval(timerId);

null——释放内存

location对象

location对象是window对象下的一个属性，使用的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

location有哪些成员？

使用chrome的控制台查看
查MDN MDN
成员
- assign()/reload()/replace()
- hash/host/hostname/search/href……

URL

统一资源定位符 (Uniform Resource Locator, URL)

URL的组成

 scheme://host:port/path?query#fragment
 http://www.itheima.com:80/a/b/index.html?name=zs&age=18#bottom
 scheme:通信协议
  常用的http,ftp,maito等
 host:主机
  服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
 port:端口号
  整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
 path:路径
  由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
 query:查询
  可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
 fragment:信息片断
  字符串，锚点.

作业

解析URL中的query，并返回对象的形式

 function getQuery(queryStr) {
   var query = {};
   if (queryStr.indexOf('?') > -1) {
     var index = queryStr.indexOf('?');
     queryStr = queryStr.substr(index + 1);
     var array = queryStr.split('&');
     for (var i = 0; i < array.length; i++) {
       var tmpArr = array[i].split('=');
       if (tmpArr.length === 2) {
         query[tmpArr[0]] = tmpArr[1];
      }
    }
  }
   return query;
 }
 console.log(getQuery(location.search));
 console.log(getQuery(location.href));