2021/10/16 前端开发之JavaScript+jQuery入门 第三章JavaScript BOM操作

目录

一、什么是BOM？

二、关于BOM知识的思维导图

 三、主流浏览器的介绍

四、BOM对象

五、窗口尺寸与大小

六、系统对话框

七、JavaScript定时函数

八、JavaScript内置对象

本章总结

---

一、什么是BOM？

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

二、关于BOM知识的思维导图

 三、主流浏览器的介绍

浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

四、BOM对象

1. window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
2. document 对象，文档对象；
3. location 对象，浏览器当前URL信息；
4. navigator 对象，浏览器本身信息；
5. screen 对象，客户端屏幕信息；
6. history 对象，浏览器访问历史信息；

1）、Window对象：BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。 

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

window对象常用方法有：

弹框类的方法。前面省略window

alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址"，“打开的方式（可以是-self或-black）”，“新窗口的大小”）注：如果url为空，则默认打开一个空白页面，如果打开方式为空，则默认为新窗口方式打开页面。返回值为：返回新打开窗口的window对象

close()  关闭当前的网页。 注：存在兼容性问题：FF：禁止设置关闭浏览器的代码

                                                                Chrome：默认直接关闭

                                                                IE：询问用户

window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

定时器，清除定时器。

setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行

clearTimeout/clearInterval(定时器名称) 清除定时器
 

2）、location对象

window.location对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

属性

• location.herf = 'url地址' 
• hash 返回#号后面的字符串，不包含散列，则返回空字符串。 
• host 返回服务器名称和端口号 
• pathname 返回目录和文件名。 /project/test.html 
• search 返回？号后面的所有值。 
• port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串 
• portocol 返回页面使用的协议。 http:或https:
• hostname 返回不带端口号的服务器名称
• href 返回当前加载页面的完整URL

方法

• reload() 重新加载当前文档
• replace() 用新的文档替换当前文档

3）、navigator对象

window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。
• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• userAgent是最常用的属性，用来完成浏览器判断。

 if(window.navigator.userAgent.indexOf('MSIE')!=-1){
        alert('我是IE');
    }else{
        alert('我不是IE');
    }

4）、screen对象

window.screen 对象包含有关用户屏幕的信息。

•  screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
•  screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

5）、 history对象 

window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

•  history.back() - 加载历史列表中的前一个 URL。返回上一页。
•  history.forward() - 加载历史列表中的下一个 URL。返回下一页。
•  go(“参数”) -1表示上一页，1表示下一页。

综合以上，页面跳转的方法有：

1、window.location.href = '你所要跳转到的页面';
2、window.open('你所要跳转到的页面’);
3、window.history.back(-1):返回上一页
4、window.history.go(-1/1):返回上一页或下一页五、
5、history.go("baidu.com")；

6）、document 对象

document 对象既是window对象的一部分，又代表了整个HTML文档，可以用来访问页面中的所有元素。当使用document对象时，除了要符合各浏览器的标准外，也要符合W3C(万维网联盟)的标准

• getElementById()：返回拥有指定id的第一个对象引用
• getElementsByName()：返回带有指定 名称的对象集合
• getElementsByTagName()：返回带有指定标签名的对象的集合
• write()：向文档写文本，HTML表达式或JavaScript代码

五、窗口尺寸与大小

可视区尺寸：  document.documentElement.clientWidth                                                                                                                             document.documentElement.clientHeight

滚动条滚动距离： document.documentElement.clientScrollTop                                                                                                                          document.documentElement.clientScrollLeft

存在兼容性问题（Chrome与其它浏览器不同），解决办法如下

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;

内容高/宽：元素.scrollHeight/scrollWidth

当一个时间发生时鼠标到页面可视区的距离：clientX/clientY

六、系统对话框

1. alert()：弹窗

   <script type="text/javascript">
           alert("Hello world!");
       </script>

2. confirm()：确定框

   <script type="text/javascript">
       /*
       判断用户点击了OK还是Cancel，可以检查confirm()方法返回的布尔值：true表示单击了OK，false表示单击了Cancel或单击了右上角的X按钮。
        */
           if (confirm("Are you sure?")) {
               alert("I'm so glad you're sure! ");
           } else {
                alert("I'm sorry to hear you're not sure. ");
           }
       </script>
   

3. prompt()：输入框

<script type="text/javascript">
    /*
    prompt()方法用来生成一个"提示"框，用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ，还会显示一个文本输入域，用来输入文本内容。该方法接收两个参数：要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)
     */
        var result = prompt("What is your name? ", "");
        if (result !== null) {
         alert("Welcome, " + result);
        }
    </script>

七、JavaScript定时函数

1. 超时调用
   1. 超时调用需要使用window对象的setTimeout()方法，接收两个参数 : 要执行的代码或函数和以毫秒表示的时间，只执行一次用于加载配置文件等。

      var time;
      function Time(){
          time=setInterval(aa,3000);//延时3秒钟后执行 aa() 函数
      }
      
      function aa(){
          alert("JavaScript");
      }
      /*
      代码执行会在三秒后以弹框的方式显示出JavaScript
      */
      
      clearTimeout(time); //只要是在指定时间尚未过去之前调用clearTimeout()方法就可以完全取消超时调用

2. 间歇调用
   1. 间歇调用与超时调用类似，只不过它会按照指定时间间隔重复执行代码，直至间歇调用被取消或者页面被关闭。设置间歇调用的方法是setInterval()，它接收的参数与超时调用相同。

var time;
function Time(){
    time=setInterval(aa,3000)
}

function aa(){
    alert("JavaScript");
}
/*
代码执行会每隔三以弹框的方式显示出JavaScript
*/

clearInterval(time); //调用clearInterval()方法就可以完全取消间歇调用

八、JavaScript内置对象

在JavaScript中，系统的内置对象有String对象，Array对象，Date对象和Math对象等。主要了解后三个

        1.Array对象

          同Java中的数组一样，JavaScript中数组也是具有一个或多个值的集合。数组用一个名称储存一系列的值，用下标区分数组中的每个值，数组下标从0开始。不同的是在JavaScript中一个数组可以存放任意类型值

 //创建数组
  var arr = new Array(4);
  
  //赋值
  arr[0]=1;
  arr[1]=true;
  arr[2]='123';
  arr[3]=10.2;
  
  //访问数组
  alert(arr[1]);

         数组的常用属性和方法

  | 类别 | 名称      | 描述                                                         |
  | ---- | --------- | ------------------------------------------------------------ |
  | 属性 | length    | 设置或者返回这个数组中元素的数目                             |
  | 方法 | join()    | 把数组中的元素放入一个字符串，通过指定的分割符进行分隔       |
  | 方法 | sort()    | 对数组进行排序并返回这个数组                                 |
  | 方法 | push()    | 向数组末尾添加一个或者多个元素，并返回新的长度               |
  | 方法 | forEach() | 遍历数组，forEach()方法不会直接修改原始数组，但是回调函数可能会修改 |

forEach()用法：

var num=[1,2,3,4,5,6];
  num.forEach(function (value,index,array){
  	document.write(value);
  });
//value：数组元素的值。
//index：可选参数，数组的索引。
//array：可选参数，当前被遍历的数组。

        2.Date对象

• 如果没有参数，则表示当前日期和时间，如"var today=new Date();"。
• 参数是字符串格式"MM DD,YYYY,hh:mm:ss",表示日期和时间，如"var today=new Date("July 15,2021,10:07:42");".

var time = new Date(参数);

         Date对象的常用方法

  | 方法          | 说明                                       |
  | ------------- | ------------------------------------------ |
  | getDate()     | 返回Date对象的一个月中的每一天，其值为1~31 |
  | getDay()      | 返回Date对象的星期中的每一天，其值为0~6    |
  | getHours()    | 返回Date 对象的小时数，其值为0~ -23        |
  | getMinutes()  | 返回Date 对象的分钟数，其值为0~ 59         |
  | getSeconds()  | 返回Date 对象的秒数，其值为0~ 59           |
  | getMonth()    | 返回Date 对象的月份，其值为0~11            |
  | getFullYear() | 返回Date对象的年份，其值为4位数            |
  | getTime()     | 返回自某一时刻(1970年1月1日)以来的毫秒数   |

        时钟效果

//动态时钟

setInterval(time,1000); 

function time(){
    var time=new Date();
    var house=time.getHours();	//获取小时
    var min=time.getMinutes();	//获取分钟
    var sec=time.getSeconds(); 	//获取秒	
    		document.getElementById("time").innerHTML=house+':'+min+':'+sec; //拼接时分秒
}

        3.Math对象

          Math对象提供了许多与数学相关的功能，它是JavaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。

        Math对象的常用方法

  | 方法     | 说明                     | 示例                                                    |
  | -------- | ------------------------ | ------------------------------------------------------- |
  | ceil()   | 对数进行上舍入           | Math.ceil(25.5);返回26<br />Math.ceil(- -25.5);返回-25  |
  | floor()  | 对数进行下舍入           | Math.floor(25.5);返回25<br />Math.floor( -25.5);返回-26 |
  | round()  | 把数四舍五入为最接近的数 | Math.round(-25.5);返回25<br />Math.round(25.5);返回26   |
  | random() | 返回0~1中的随机数        | Math.random0;例如，0.62736088 14137365                  |

        Math随机数用法

<div>
      本次选择的颜色是:<span id="color"></span>
      <input type="button" value="选择颜色" onclick="self()"/>
  </div>
  
  <script type="text/javascript">
     /* var num=[1,2,3,4,5,6];
      num.forEach(function (value,index,array){
          document.write(value);
      });*/
     function self(){
         var color=new Array("红",'黄','蓝','绿','橙');
         var num=Math.ceil(Math.random()*5)-1;
         document.getElementById("color").innerHTML=color[num];
     }
  </script>

本章总结

1.  window对象常用属性: hstoy，location、screen。
2.  window对象常用方法:alert()、confirm()、prompt()、open()、close()、 setInterval()、clearInterval()、setTimeout() clearTimeout()。
3.  history对象和location对象可以轻松地实现浏览器中“后退”、前进” 和” 刷新”的功能。
4.  document对象的getElementByld0方法用于访问唯一的元素。
5.  document对象的getElementsByName()方法用于访问相同name属性的一组元素。
6.  document对象的getElementsByTagName()方法用于访问相同标签的一组元素。
7.  JavaScript 内置对象Array对象用于在单独的变量名中存储一系列的值。
8.  JavaScript内置对象Date对象用于操作日期和时间。
9.  JavaScript内置对象Math对象可以执行常用的数学任务。

练习小作业：

1. 查看不同手机介绍
2. 模拟小球移动
3. 求数组中元素的和丶最大值和最小值
4. 制作时钟特效