第五章 BOM浏览器对象模型
第一节 BOM编程
BOM:Browser Object Model,浏览器对象模型。
BOM编程: 在浏览器中,js代码是通过内嵌在浏览器中的javascript解释器来运行的。在浏览器加载页面的时候,如果页面中有js代码,js解释器会将浏览器的各个部分封装成对应的对象,然后通过访问这些对象的属性和方法来实现特定的功能,这就是BOM编程。
1.window对象
window对象是一个顶层对象,其中包含很多属性和方法,其中的属性也对应一些子对象:document,history,location,screen等等。
属性/方法 | 说明 |
---|---|
history | 历史记录对象 常用方法:history.back() history.forward() history.go() |
location | 地址栏对象 常用方法:window.location.href |
screen | 客户窗口屏幕 |
event | 事件对象 |
open | 打开子窗口 |
alert | 警告框 |
prompt | 输入框 |
confirm | 确认框 |
2.history历史记录对象
history记录了用户在浏览器中的浏览器记录,通过history可以访问用户的浏览记录历史信息。对应于浏览器工具栏上的前进和后退按钮。
方法:
history.forward():前往下一页
history.back():返回上一页
history.go(索引):跳到某一页
<!DOCTYPE html> <html> <head> <title> spring </title> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <h1>春天</h1> <a href="summer.html">访问夏天</a><br/> <a href="javascript:history.forward()">下一页</a> </body> </html>
3.location地址栏对象
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //当下拉框选项切换的时候,跳转网站 function goWebSite() { //获取选中的网站 var site = document.getElementById("website").value; //alert(site); //选中的站点数据不为空时,才跳转网站 if(site!="") { //通过浏览器的地址栏对象,跳转页面 window.location.href=site; } } </script> </head> <body> 网址: <!-- onchange:下拉选项切换时触发的事件 --> <select id="website" οnchange="goWebSite()"> <option value="">请选择</option> <option value="http://www.baidu.com">百度</option> <option value="http://www.taobao.com">淘宝</option> <option value="http://www.jd.com">京东</option> </select> </body> </html>
4.open方法
open 打开子窗口 window.open('页面路径','名称','窗口属性设置') 例如 window.open('xxx.html','mywindow','width=300,height=300'); window.close();
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //定义子窗口变量 var subWin; function openWin() { for(var i=1;i<=5;i++) { //window.open:打开子窗口 //将子窗口对象存入变量中 subWin = window.open('js-4.html','','width=300,height=300'); } } function closeWin() { //关闭窗口 subWin.close(); } </script> </head> <body οnlοad="openWin()"> <button type="button" οnclick="openWin()">打开窗口</button> <button type="button" οnclick="closeWin()">关闭窗口</button> </body> </html>
5.定时器方法
定时器方法 1s=1000ms; setTimeout(函数名 不加(),延时时间 ms);隔一段时间只执行一次函数 setInterval(函数名,延时时间);每隔一段时间执行一次函数 例如 setTimeout("函数名()",3000); setTimeout(函数名,3000);
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> var count=0; setTimeout(pre,1); function pre() { count--; if(count==-1) { count=9; } document.getElementById("tupian").src="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif"; document.getElementById("url").innerHTML="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif"; setTimeout(pre,1); } function next() { count++; if(count==10) { count=0; } document.getElementById("tupian").src="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif"; document.getElementById("url").innerHTML="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif"; setTimeout(next,1000); } var s; function showtime() { var d=new Date(); var timestring=""+d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+d.getHours()+"时"+d.getMinutes()+"分"+d.getSeconds()+"秒"; document.getElementById("time").innerHTML=timestring; s=setTimeout(showtime,1000); } function starttime() { showtime(); } function stoptime() { clearTimeout(s); } </script> </head> <body> <div id="url"></div> <div style="height:500px"> <img id ="tupian" src="../QY106/QY106-JS/lesson5/代码/image/js0.gif"/> <input type="button" οnclick="pre()" value="上一张"/> <input type="button" οnclick="next()" value="下一张"/> </div> <div id="time"></div> <input type="button" id="start" value="开始" οnclick="starttime()"/> <input type="button" id="stop" value="停止" οnclick="stoptime()"/> </body> </html>
6.HTML常用事件
onclick
:点击某个对象时触发的事件
onload
:元素加载完时触发的事件
onchange
:元素内容改变时发生的事件 可用于select
元素中
onmousemove
:鼠标被移动时触发
onmouseover
:鼠标移入某个元素时触发
鼠标事件
/* onclick:点击某个对象时触发 ondblclick:双击某个对象时触发 onmouseover:鼠标移入某个元素时触发 onmouseout:鼠标移出某个元素时触发 onmouseenter:鼠标进入某个元素时触发 onmouseleave:鼠标离开某个元素时触发 onmousedown:鼠标按下时触发 onmouseup:鼠标抬起时触发 onmousemove:鼠标被移动时触发 onwheel:鼠标滚轮滚动时触发 oncontextmenu:点击鼠标右键时触发 */
键盘事件
/* onkeydown:键盘的键按下时触发 onkeyup:键盘的键放开时触发 onkeypress:按下或按住键盘键时触发 */
框架/对象事件
/* onresize:浏览器窗口大小改变时触发 onabort:图形的加载被中断时触发 onload:元素加载完时触发 onerror:当加载文档或者图片时(没找到)发生的错误时触发 onscroll:文档滚动时触发 onpageshow:用户访问页面时触发 onunload:用户退出页面时触发 */
表单事件
/* onfocus:元素获得焦点时触发 onblur:元素失去焦点时触发 onchange:元素内容改变时触发 oninput:元素获取用户输入时触发 onsubmit:提交按钮时触发 onreset:重置按钮时触发 onselect:文本被选中时触发 */
拖动事件
/* ondrag:元素正在拖动时触发 ondragend:用户完成元素拖动时触发 */
多媒体事件
/* onplay:在视频/音频开始播放时触发 onended:在视频/音频播放结束时触发 onpause:在视频/音频暂停时触发 */
事件的绑定:
事件名称=函数名称; 注意不要加() 加了之后为调用该函数 例如:window.οnlοad=setDiv;
<meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> #flag { height:100px; width:100px; position:absolute; border:1px solid black; } </style> <script> /*window.οnlοad=function fun(){document.getElementById("flag").style.backgroundColor="lightblue"; document.getElementById("flag").style.height="400px"; document.getElementById("flag").style.width="400px"; document.getElementById("flag").οnclick=function(){alert("Hello!");}; }*/ function fun(e) { document.getElementById("flag").innerHTML=e.clientX+","+e.clientY; document.getElementById("flag").style.top=e.clientY+"px"; document.getElementById("flag").style.left=e.clientX+"px"; } document.οnmοusemοve=fun; </script> </head> <body> <div id="flag" οnlοad="alert('hello')"> 这是DIV </div> </body> </html>
第二节 数组
1.数组概念
用于存储一组数据,可以对数据进行批量处理。
//创建长度为5的数组空间 var ary = new Array(6);
<script type="text/javascript"> var num = 100; //创建长度为5的数组空间 var ary = new Array(6); //为数组元素赋值 ary[0] = 100; ary[1] ="abc"; ary[2]=new Date(); ary[3]=true; ary[4]=200; //ary.length:数组的长度 alert(ary.length); //alert(ary[2]); for(var i=0;i<ary.length;i++) { alert(i+" "+ary[i]); } </script>
2.数组统计学生成绩
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> </style> <script type="text/javascript"> //定义长度为5的数组,输入5个学生的分数,并求总分 var scores = new Array(5); for(var i=0;i<scores.length;i++) { //通过输入框接受输入分数 var s = parseInt(prompt("请输入第"+(i+1)+"个人的分数:","")); //将输入存入数组 scores[i]=s; } alert("数据存储完毕!开始输出数据"); var sum = 0; for(var i=0;i<scores.length;i++) { sum = sum+scores[i]; document.write(scores[i]+"<br/>"); } document.write("总分:"+sum); /* var num1 = prompt("请输入第1个人的分数:"); var num2 = prompt("请输入第2个人的分数:"); var num3 = prompt("请输入第3个人的分数:"); var num4 = prompt("请输入第4个人的分数:"); var num5 = prompt("请输入第5个人的分数:"); */ </script> </head> <body> </body> </html>
3.拓展
取非行间样式(不能用来设置样式) obj.currentStyle[attr] getComputedStyle(obj,false)[attr] var arr=[12,3,4,7]; var arr=new Array(23,5,6,4); 创建数组无任何差别 第一种性能略高 原因代码短 数组的属性 length 既可以获取,又可以设置 例如 arr.length=1;其结果arr=[12]; arr.length=0;常用于清空数组 数组的方法 1.添加 push(元素),从尾部添加元素 unshift(元素),从头部添加元素 2.删除 pop(),从尾部弹出 arr.pop(); shift(),从头部弹出 arr.shift(); 3.排序 reverse()反转数组 sort(比较函数),排序一个数组 排序字符串数组 直接调用 排序数字数组 sort() 括号里写比较函数,例如sort(function(num1,num2){return num1-num2;}) 4.连接两个数组 a.concat(b);连接a,b两个数组 5.join(分隔符)将数组拼接成字符串 用分隔符,组合数组元素,生成字符串 字符串split splice(开始,长度,元素...) 先删除后插入
第三节 树形菜单
1.获取元素
获取成组元素方法getElementsByTagName("元素名称")
;
可通过getElementsByTagName("元素名称")[0]
访问第几个元素对象;
.innerHTML
与.outerHTML
区别
.innerHTML
访问元素标签内的文本
.outerHTML
访问包含元素标签与内容的文本
<!DOCTYPE html> <html> <head> <title> my page </title> <style type="text/css"> .c1 { border:2px solid red; } .c2 { border:2px dashed green; } </style> <script type="text/javascript"> function getP() { //根据id获取单个元素 var d1 = document.getElementById("d1"); //根据标签名,获取元素数组 var pAry = d1.getElementsByTagName("p"); console.log(pAry); //alert(pAry.length); /* for(var i=0;i<pAry.length;i++) { //alert(pAry[i].innerHTML); console.log(pAry[i]); }*/ } function getSpan() { var d2 = document.getElementById("d2"); var spanAry = d2.getElementsByTagName("span"); for(var i=0;i<spanAry.length;i++) { //显示元素的内部内容(innerHTML); alert(spanAry[i].innerHTML); } } function getParent() { //获取p元素的父级元素 var p = document.getElementById("p2"); //获取父节点 var div = p.parentNode; //设置div的样式 div.className="c1"; //显示元素的id属性,和带元素本身标签的html内容(outerHTML) alert(div.id+" "+div.outerHTML); var span = document.getElementById("s1"); var div2 = span.parentNode; //设置div2的类样式 div2.className="c2"; alert(div2.id+" "+div2.outerHTML); } </script> </head> <body> <div id="d1"> <p>第一个P</p> <p id="p2">第二个P</p> <p>第三个P</p> <div>这是DIV</div> <p>第四个P</p> </div> <hr/> <div id="d2"> <span id="s1">SPAN1</span> <span>SPAN2</span> <span>SPAN3</span> </div> <hr/> <input type="button" value="获取子元素测试" οnclick="getSpan()" id="btn"/> <input type="button" value="获取父元素测试" οnclick="getParent()" id="btn2"/> </body> </html>
2.树形菜单代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> ul{ list-style:none; padding-left:20px; width:116px; } .add { background:url(image/plus.png) no-repeat left center ; } .page { background:url(image/page.png) no-repeat left center; } .minus { background:url(image/minus.png) no-repeat left center; } ul a{ height:28px; line-height:28px; display:block; text-decoration:none; padding-left:18px; } #nav>li,ul li { background:url(image/out.gif) no-repeat; } #nav>li:hover,ul li:hover { background:url(image/hover.gif) no-repeat; } </style> <script> function myClick(){ if (this.parentNode.getElementsByTagName("ul")[0].style.display=="none") { this.parentNode.getElementsByTagName("a")[0].className="minus"; this.parentNode.getElementsByTagName("ul")[0].style.display="block"; } else { this.parentNode.getElementsByTagName("a")[0].className="add"; this.parentNode.getElementsByTagName("ul")[0].style.display="none"; } } function myinit() { var arrLi=document.getElementsByTagName("li"); for (var i=0;i<arrLi.length;i++) { if (arrLi[i].getElementsByTagName("ul").length>0) { arrLi[i].getElementsByTagName("a")[0].className="add"; arrLi[i].getElementsByTagName("ul")[0].style.display="none"; arrLi[i].getElementsByTagName("a")[0].οnclick=myClick; } else { arrLi[i].getElementsByTagName("a")[0].className="page"; } } } window.οnlοad=myinit; </script> </head> <body> <ul id="nav"> <li> <a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li> <a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li> <a href="#">一级菜单</a> <ul> <li> <a href="#">二级菜单</a> <ul> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> <li><a href="#">三级菜单</a></li> </ul> </li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> </ul> </body> </html>