BOM · TUNA-daily

[TOC] ## 1.BOM ### 1.1. 什么是BOM编程 >* BOM是（Broswer Object Model）浏览器对象模型编程，JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。其中包括： 1. 窗口：window对象 2. 地址栏：location对象 3. 屏幕：screen对象 4. 历史记录栏：history对象 5. 浏览器的版本所有信息的对象。Navigator对象： >* 浏览器对象模型（BOM）以 window 对象为基础，window表示在浏览器中打开的一个界面（表示浏览器窗口以及页面可见区域） ![](https://box.kancloud.cn/61641edc55523552484b6ac0ad95dc32_663x400.png) ### 1.2 window 对象 > 1. Window 对象是 JavaScript 层级中的顶层DOM对象。 > 2. Window 对象代表一个浏览器窗口或一个框架。 > 3. Window 对象会在` <body>` 或` <frameset> `每次出现时被自动创建。 #### 1.2.1. window的常用方法 ##### 1. alert() 显示一个警告框。 ##### 2. confirm() 选择确定框。var flag = window.confirm("确认删除？"); 会返回用户的选择，确定（true），取消（false） ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window对象</title> <script type="text/javascript"> function testConfirm(){ /* 返回值就是用户操作 true: 点击了确定 false：点击了取消 */ var flag = window.confirm("确认删除？"); if(flag){ alert("确定删除"); }else{ alert("取消操作"); } } </script> </head> <body> <input type="button" value="confirm()" onclick="testConfirm()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/458a17a00fe39b2320475227b81ed001_798x568.png) 点击确定就会弹出缺框 ![](https://box.kancloud.cn/49029b57388bb967bea60925361e0702_157x175.png) ##### 3. prompt() 输入框。 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window对象</title> <script type="text/javascript"> function testPrompt(){ /* 输入提示框 */ var flag = window.prompt("请输入你的密码"); if(flag){ alert("密码正确"); }else{ alert("取消操作"); } } </script> </head> <body> <input type="button" value="testPrompt()" onclick="testPrompt()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/380ff211c6417c58ef6857772603f161_911x309.png) ##### 4. moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。 ##### 5. moveby() 相对于目前的位置移动。 ##### 6. resizeTo() 调整当前浏览器的窗口。 ##### 7. open() 打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡） window.open(),这个有三个参数： > 1. 参数一：打开的页面 > 2. 参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认） > 3. 参数三：设置窗口参数。比如窗口大小，是否显示任务栏 ~~~ !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window对象</title> <script type="text/javascript"> function testOpen(){ /* 参数一：打开的页面参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）参数三：设置窗口参数。比如窗口大小，是否显示任务栏 */ window.open("02.广告页面.html","_blank","width=300px;height=300px;toolbar=0"); } </script> </head> <body> <input type="button" value="open()" onclick="testOpen()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/b6e060f37b3578100958ef6f4582d03c_1249x269.png) ##### 8. setTimeout(vCode, iMilliSeconds) 超时后执行代码（只执行一次）。 ##### 9. setInterval(vCode, iMilliSeconds) > 定时执行代码，第一次也是先待，到时再执行。taskId = window.setInterval("testOpen()",3000); 返回一个taskid，可以根据taskid去取消任务 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window对象</title> <script type="text/javascript"> var taskId; function testInterval(){ /* 定时器：每隔n毫秒调用指定的任务（函数）参数一：指定的任务（函数）参数二：毫秒数 */ taskId = window.setInterval("testOpen()",3000); } function testClearInterval(){ /*清除任务参数一：需要清除的任务ID */ window.clearInterval(taskId); } </script> </head> <body> <input type="button" value="setInteval()" onclick="testInterval()"/> <input type="button" value="clearInteval()" onclick="testClearInterval()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/47260616e7071df438a72e2abe59bfad_827x583.png) 可以点击取消定时任务 ### 1.3 location 对象 Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。提供两个操作url的方法 > 1. href属性设置或获取整个 URL 为字符串。 > 2. reload() 重新装入当前页面 > ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>location对象</title> <script type="text/javascript"> /* href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符 reload方法：刷新当前页面 */ function testHref(){ //alert(window.location.href); /* 通过修改location对象的href属性来实现页面的跳转 */ window.location.href="02.广告页面.html"; } function testReload(){ //刷新当前页面 window.location.reload(); } window.setTimeout("testReload()",1000); </script> </head> <body> <a href="02.广告页面.html">超链接</a> <input type="button" value="跳转" onclick="testHref()"/> <input type="button" value="实现定时刷新" onclick="testRefresh()"/> </body> </html> ~~~ ### 1.4 screen 对象 Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。属性： > 1. availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 > 2. availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 > 3. height 获取屏幕的垂直分辨率。 > 4. width 获取屏幕的水平分辨率。 ~~~ /* availHeight和availWidth是排除了任务栏之后的高度和宽度 */ document.write(window.screen.availWidth + "<br/>"); document.write(window.screen.availHeight + "<br/>"); document.write(window.screen.width + "<br/>"); document.write(window.screen.height + "<br/>"); ~~~ 任务栏 ![](https://box.kancloud.cn/e4a38623d9a6baa83087eb7292f19e4d_1920x482.png) ## 2. 事件 ### 2.1 事件说明大部分的HTML元素中都可以指定事件属性。所有的事件属性都是以on开头，后面的是事件的触发方式，如： onclick，表示单击 onkeydown，表示键按下 ... ### 2.2 常用的事件类型： #### 2.2.1 鼠标点击相关： > 1. onclick 在用户用鼠标左键单击对象时触发。 > 2. ondblclick 当用户双击对象时触发。 > 3. onmousedown 当用户用任何鼠标按钮单击对象时触发。 > 4. onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 #### 2.2.2 鼠标移动相关： > 1. onmouseout 当用户将鼠标指针移出对象边界时触发。 > 2. onmousemove 当用户将鼠标划过对象时触发。 #### 2.2.3 焦点相关的： > 1. onblur 在对象失去输入焦点（光标）时触发。 > 2. onfocus 当对象获得焦点（光标）时触发。 #### 2.2.4 按键相关的： > 1. onkeydown 当用户按下键盘按键时触发。 > 2. onkeyup 当用户释放键盘按键时触发。 > 3. onkeypress 当用户按下字面键时触发。 #### 2.2.5 内容 onchange 当对象或选中区的内容改变时触发。 onload 在浏览器完成对象的装载后立即触发。 onsubmit 当表单将要被提交时触发。