一、BOM定义

ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，那么BOM(浏览器对象模型) 才是真正的核心。
BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。

二、wondow对象

• window对象是BOM的核心，它表示一个浏览器的实例。

• 在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。

• 全局作用域:

– window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。

2.1、窗口大小

• 浏览器中提供了四个属性用来确定窗口的大小:

– 网页窗口的大小• innerWidth
• innerHeight

– 浏览器本身的尺寸• outerWidth
• outerHeight

2.2、打开窗口

• 使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。

• 这个方法需要四个参数:

– 需要加载的url地址

– 窗口的目标
– 一个特性的字符串
– 是否创建新的历史记录

三、时间调用

3.1、超时调用

• 超时调用:
– setTimeout()

– 超过一定时间以后执行指定函数

– 需要连个参数:

• 要执行的内容
• 超过的时间

• 取消超时调用
– clearTimeout()

• 超时调用都是在全局作用域中执行的。

3.2、间歇调用

• 间歇调用:
– setInterval()
– 每隔一段时间执行指定代码

– 需要两个参数:

• 要执行的代码
• 间隔的时间

• 取消间隔调用:

– clearInterval()

四、系统对话框

• 浏览器通过 alert() 、 confirm() 和 prompt()方法可以调用系统对话框向用户显示消息。

• 它们的外观由操作系统及(或)浏览器设置决定，而不是由 CSS 决定。

• 显示系统对话框时会导致程序终止，当关闭对话框程序会恢复执行。

4.1、alert

• alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。

• 例如:
– alert("Hello World");

4.2、confirm

• confirm和alert类似，只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。

• 例如:
– confirm('你确定吗?');

• 这个函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。

4.3、prompt

• prompt会弹出一个带输入框的提示框，并可以将用户输入的内容返回。

• 它需要两个值作为参数:

– 显示的提示文字
– 文本框中的默认值

• 例子:
– prompt('你的年龄是?','18');

五、BOM常用对象

5.1、location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
href属性:
– href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。
assign() 方法
– 所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中。
replace()方法
– 功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。
reload() 方法
– 用于强制刷新当前页面

5.2、navigator对象

navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。
我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。

5.3、screen对象

• screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。

• 该对象作用不大，我们一般不太使用。

5.4、history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
go()
– 使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
back()

– 向后跳转
forward()

– 向前跳转

5.5、document对象

document对象也是window的一个属性，这个对象代表的是整个网页的文档对象。
我们对网页的大部分操作都需要以document对象作为起点。
关于document对象的内容，我们后边还要具体讲解。

六、简单例子

6.1、简单图片轮播

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           /*
           * 设置outer的样式
           */
           #outer{
               /*设置宽和高*/
               width: 520px;
               height: 333px;
               /*居中*/
               margin: 50px auto;
               /*设置背景颜色*/
               background-color: greenyellow;
               /*设置padding*/
               padding: 10px 0;
               /*开启相对定位*/
               position: relative;
               /*裁剪溢出的内容*/
               overflow: hidden;
           }
           /*设置imgList*/
           #imgList{
               /*去除项目符号*/
               list-style: none;
               /*设置ul的宽度*/
               /*width: 2600px;*/
               /*开启绝对定位*/
               position: absolute;
               /*设置偏移量*/
               /*
               * 每向左移动520px，就会显示到下一张图片
               */
               left: 0px;
           }
           /*设置图片中的li*/
           #imgList li{
               /*设置浮动*/
               float: left;
               /*设置左右外边距*/
               margin: 0 10px;
           }
           /*设置导航按钮*/
           #navDiv{
               /*开启绝对定位*/
               position: absolute;
               /*设置位置*/
               bottom: 15px;
               /*设置left值
                  outer宽度 520
                  navDiv宽度 25*5 = 125
                      520 - 125 = 395/2 = 197.5
               * */
               /*left: 197px;*/
           }
           #navDiv a{
               /*设置超链接浮动*/
               float: left;
               /*设置超链接的宽和高*/
               width: 15px;
               height: 15px;
               /*设置背景颜色*/
               background-color: red;
               /*设置左右外边距*/
               margin: 0 5px;
               /*设置透明*/
               opacity: 0.5;
               /*兼容IE8透明*/
               filter: alpha(opacity=50);
           }
           /*设置鼠标移入的效果*/
           #navDiv a:hover{
               background-color: black;
           }
       </style>
       
       <script type="text/javascript" src="js/tools.js"></script>
       <script type="text/javascript">
           //给每个图片设置点击事件
           function imgHref(obj){
                   obj.onclick = function(){
                       //可以根据点击不同的图片做不同的事件处理
                       alert(obj.name);
                       }
           }
           window.onload = function(){
               //获取imgList
               var imgList = document.getElementById("imgList");
               //获取页面中所有的img标签
               var imgArr = document.getElementsByTagName("img");
               for (var i = 0; i < imgArr.length - 1; i++) {
                   imgHref(imgArr[i]);
               }
               //设置imgList的宽度
               imgList.style.width = 520*imgArr.length+"px";
               /*设置导航按钮居中*/
               //获取navDiv
               var navDiv = document.getElementById("navDiv");
               //获取outer
               var outer = document.getElementById("outer");
               //设置navDiv的left值
               navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
               //默认显示图片的索引
               var index = 0;
               //获取所有的a
               var allA = document.getElementsByTagName("a");
               //设置默认选中的效果
               allA[index].style.backgroundColor = "black";
               /*
                  点击超链接切换到指定的图片
                      点击第一个超链接，显示第一个图片
                      点击第二个超链接，显示第二个图片
               * */
               //为所有的超链接都绑定单击响应函数
               for(var i=0; i<allA.length ; i++){
                   //为每一个超链接都添加一个num属性
                   allA[i].num = i;
                   //为超链接绑定单击响应函数
                   allA[i].onclick = function(){
                       //关闭自动切换的定时器
                       clearInterval(timer);
                       //获取点击超链接的索引,并将其设置为index
                       index = this.num;
                       //切换图片
                       /*
                       * 第一张 0 0
                       * 第二张 1 -520
                       * 第三张 2 -1040
                       */
                       //imgList.style.left = -520*index + "px";
                       //设置选中的a
                       setA();
                       //使用move函数来切换图片
                       move(imgList , "left" , -520*index , 20 , function(){
                           //动画执行完毕，开启自动切换
                           autoChange();
                       });
                   };
               }
               //开启自动切换图片
               autoChange();
               //创建一个方法用来设置选中的a
               function setA(){
                   //判断当前索引是否是最后一张图片
                   if(index >= imgArr.length - 1){
                       //则将index设置为0
                       index = 0;
                       //此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
                       //通过CSS将最后一张切换成第一张
                       imgList.style.left = 0;
                   }
                   //遍历所有a，并将它们的背景颜色设置为红色
                   for(var i=0 ; i<allA.length ; i++){
                       allA[i].style.backgroundColor = "";
                   }
                   //将选中的a设置为黑色
                   allA[index].style.backgroundColor = "black";
               };
               //定义一个自动切换的定时器的标识
               var timer;
               //创建一个函数，用来开启自动切换图片
               function autoChange(){
                   //开启一个定时器，用来定时去切换图片
                   timer = setInterval(function(){
                       //使索引自增
                       index++;
                       //判断index的值
                       index %= imgArr.length;
                       //执行动画，切换图片
                       move(imgList , "left" , -520*index , 20 , function(){
                           //修改导航按钮
                           setA();
                       });
                   },3000);
               }
           };
       </script>
   </head>
   <body>
       
       <div id="outer">
           
           <ul id="imgList">
               <li><img src="img/1.jpg" name = "img1"/></li>
               <li><img src="img/2.jpg" name = "img2"/></li>
               <li><img src="img/3.jpg" name = "img3"/></li>
               <li><img src="img/4.jpg" name = "img4"/></li>
               <li><img src="img/5.jpg" name = "img5"/></li>
               <li><img src="img/1.jpg" name = "img1"/></li>
           </ul>
           
           <div id="navDiv">
               <a href="javascript:;"></a>
               <a href="javascript:;"></a>
               <a href="javascript:;"></a>
               <a href="javascript:;"></a>
               <a href="javascript:;"></a>
           </div>
       </div>
   </body>
</html>

工具类：

//尝试创建一个可以执行简单动画的函数
/*
* 参数：
*    obj:要执行动画的对象
*    attr:要执行动画的样式，比如：left top width height
*    target:执行动画的目标位置
*    speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
   //关闭上一个定时器
   clearInterval(obj.timer);
   //获取元素目前的位置
   var current = parseInt(getStyle(obj, attr));
   //判断速度的正负值
   //如果从0 向 800移动，则speed为正
   //如果从800向0移动，则speed为负
   if(current > target) {
       //此时速度应为负值
       speed = -speed;
   }
   //开启一个定时器，用来执行动画效果
   //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
   obj.timer = setInterval(function() {
       //获取box1的原来的left值
       var oldValue = parseInt(getStyle(obj, attr));
       //在旧值的基础上增加
       var newValue = oldValue + speed;
       //判断newValue是否大于800
       //从800 向 0移动
       //向左移动时，需要判断newValue是否小于target
       //向右移动时，需要判断newValue是否大于target
       if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
           newValue = target;
       }
       //将新值设置给box1
       obj.style[attr] = newValue + "px";
       //当元素移动到0px时，使其停止执行动画
       if(newValue == target) {
           //达到目标，关闭定时器
           clearInterval(obj.timer);
           //动画执行完毕，调用回调函数
           callback && callback();
       }
   }, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
*        obj 要获取样式的元素
*        name 要获取的样式名
*/
function getStyle(obj, name) {
   if(window.getComputedStyle) {
       //正常浏览器的方式，具有getComputedStyle()方法
       return getComputedStyle(obj, null)[name];
   } else {
       //IE8的方式，没有getComputedStyle()方法
       return obj.currentStyle[name];
   }
}
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 参数:
*    obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj, cn) {
   //检查obj中是否含有cn
   if(!hasClass(obj, cn)) {
       obj.className += " " + cn;
   }
}
/*
* 判断一个元素中是否含有指定的class属性值
*    如果有该class，则返回true，没有则返回false
*
*/
function hasClass(obj, cn) {
   //判断obj中有没有cn class
   //创建一个正则表达式
   //var reg = /\bb2\b/;
   var reg = new RegExp("\\b" + cn + "\\b");
   return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj, cn) {
   //创建一个正则表达式
   var reg = new RegExp("\\b" + cn + "\\b");
   //删除class
   obj.className = obj.className.replace(reg, "");
}
/*
* toggleClass可以用来切换一个类
*    如果元素中具有该类，则删除
*    如果元素中没有该类，则添加
*/
function toggleClass(obj, cn) {
   //判断obj中是否含有cn
   if(hasClass(obj, cn)) {
       //有，则删除
       removeClass(obj, cn);
   } else {
       //没有，则添加
       addClass(obj, cn);
   }
}

效果：

点击红色超链接切换图片，点击不同的图片弹出图片名称，现在设置每隔3秒自动切换。

6.2 二级菜单

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>二级菜单</title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
               list-style-type: none;
           }
           a,img {
               border: 0;
               text-decoration: none;
           }
           body {
               font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
           }
       </style>
       
       <link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
       
       <script type="text/javascript" src="js/tools.js"></script>
       <script type="text/javascript">
           window.onload = function(){
               /*
               * 我们的每一个菜单都是一个div
               *    当div具有collapsed这个类时，div就是折叠的状态
               *    当div没有这个类是，div就是展开的状态
               */
               /*
               * 点击菜单，切换菜单的显示状态
               */
               //获取所有的class为menuSpan的元素
               var menuSpan = document.querySelectorAll(".menuSpan");
               //定义一个变量，来保存当前打开的菜单
               var openDiv = menuSpan[0].parentNode;
               //为span绑定单击响应函数
               for(var i=0 ; i<menuSpan.length ; i++){
                   menuSpan[i].onclick = function(){
                       //this代表我当前点击的span
                       //获取当前span的父元素
                       var parentDiv = this.parentNode;
                       //切换菜单的显示状态
                       toggleMenu(parentDiv);
                       //判断openDiv和parentDiv是否相同
                       if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){
                           //打开菜单以后，应该关闭之前打开的菜单
                           //为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
                           //addClass(openDiv , "collapsed");
                           //此处toggleClass()不需要有移除的功能
                           //toggleClass(openDiv , "collapsed");
                           //切换菜单的显示状态
                           toggleMenu(openDiv);
                       }
                       //修改openDiv为当前打开的菜单
                       openDiv = parentDiv;
                   };
               }
               /*
               * 用来切换菜单折叠和显示状态
               */
               function toggleMenu(obj){
                   //在切换类之前，获取元素的高度
                   var begin = obj.offsetHeight;
                   //切换parentDiv的显示
                   toggleClass(obj , "collapsed");
                   //在切换类之后获取一个高度
                   var end = obj.offsetHeight;
                   //console.log("begin = "+begin +" , end = "+end);
                   //动画效果就是将高度从begin向end过渡
                   //将元素的高度重置为begin
                   obj.style.height = begin + "px";
                   //执行动画，从bengin向end过渡
                   move(obj,"height",end,10,function(){
                       //动画执行完毕，内联样式已经没有存在的意义了，删除之
                       obj.style.height = "";
                   });
               }
           };
       </script>
   </head>
   <body>
       <div id="my_menu" class="sdmenu">
           <div>
               <span class="menuSpan">在线工具</span>
               <a href="#">图像优化</a>
               <a href="#">收藏夹图标生成器</a>
               <a href="#">邮件</a>
               <a href="#">htaccess密码</a>
               <a href="#">梯度图像</a>
               <a href="#">按钮生成器</a>
           </div>
           <div class="collapsed">
               <span class="menuSpan">支持我们</span>
               <a href="#">推荐我们</a>
               <a href="#">链接我们</a>
               <a href="#">网络资源</a>
           </div>
           <div class="collapsed">
               <span class="menuSpan">合作伙伴</span>
               <a href="#">JavaScript工具包</a>
               <a href="#">CSS驱动</a>
               <a href="#">CodingForums</a>
               <a href="#">CSS例子</a>
           </div>
           <div class="collapsed">
               <span class="menuSpan">测试电流</span>
               <a href="#">Current or not1</a>
               <a href="#">Current or not2</a>
               <a href="#">Current or not3</a>
               <a href="#">Current or not4</a>
           </div>
       </div>
   </body>
</html>

CSS代码：

@charset "utf-8";
/* sdmenu */
div.sdmenu {
   width: 150px;
   margin: 0 auto;
   font-family: Arial, sans-serif;
   font-size: 12px;
   padding-bottom: 10px;
   background: url(bottom.gif) no-repeat right bottom;
   color: #fff;
}
div.sdmenu div {
   background: url(title.gif) repeat-x;
   overflow: hidden;
}
div.sdmenu div:first-child {
   background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
   height: 25px;
}
div.sdmenu div span {
   display: block;
   height: 15px;
   line-height: 15px;
   overflow: hidden;
   padding: 5px 25px;
   font-weight: bold;
   color: white;
   background: url(expanded.gif) no-repeat 10px center;
   cursor: pointer;
   border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
   background-image: url(collapsed.gif);
}
div.sdmenu div a {
   padding: 5px 10px;
   background: #eee;
   display: block;
   border-bottom: 1px solid #ddd;
   color: #066;
}
div.sdmenu div a.current {
   background: #ccc;
}
div.sdmenu div a:hover {
   background: #066 url(linkarrow.gif) no-repeat right center;
   color: #fff;
   text-decoration: none;
}

图片素材自己加，没有也没关系，效果如下：

Javascript（十三）javascript BOM详解相关推荐

javascript的浏览器Bom详解,window、location、history对象
BOM(BrowserObjectModel)也叫浏览器对象模型,描述与浏览器进行交互的方法和接口.BOM由多个对象组成, 其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对 ...
众望所归的《JAVASCRIPT凌厉开发--EXT详解与实践》终于上市了！
大家好,我是这本书的策划编辑,经过努力,这本书终于上市了. 从创作开始,我们的目标就是写一本真正适合开发者参考和借鉴的EXT书,写作过程中,经过了无数次讨论和痛苦修订,感谢三位作者付出的艰辛劳动. 这 ...
JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
Javascript常用的设计模式详解
Javascript常用的设计模式详解阅读目录一:理解工厂模式二:理解单体模式三:理解模块模式四:理解代理模式五:理解职责链模式六:命令模式的理解: 七:模板方法模式八:理解javas ...
Javascript this关键字指向详解
Javascript this关键字指向详解面向对象语言中 this 表示当前对象的一个引用.在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变. 1) 单独使用 ...
[js]JavaScript Number.toPrecision() 函数详解
[js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...
JavaScript中的this详解
前言 this JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪 ...
用html js制作迷宫,JavaScript生成随机迷宫详解
本篇教程介绍了JavaScript生成随机迷宫详解,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < #先看生成随机迷宫的代码吧↓ 1 2 3 生成随机迷宫v ...
JavaScript Promise返回值详解
JavaScript Promise返回值详解 Promise回顾 Promise回调函数返回非Promise值 Promise回调函数返回Promise对象 Promise回调函数中抛出错误总结 ...

Javascript（十三）javascript BOM详解