一、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,来作为大的容器 --> <div id="outer"> <!-- 创建一个ul,用于放置图片 --> <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; } |
图片素材自己加,没有也没关系,效果如下: