码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript---浏览器对象模型(BOM)

时间:2015-11-15 13:24:03      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述,如果我们要
操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作。
top
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象

1.window对象go top

常用的方法:
open() 打开一个新的窗口。(可设置工具栏、地址栏、窗口的大小等)
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy() 相对于原来的窗口移动指定的x、y值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。

注意: 使用window对象的任何属性与方法都可以省略window对象不写的。

Window对象的事件:

事件:
注册事件的方式:

方式一: 直接在html元素上注册

1 <body onload="ready()">
2 </body>

3 <script type="text/javascript"> 4 function ready(){ 5   alert("body的元素被加载完毕了.."); 6 } 7 </script>

方式二:可以js代码向找到对应的对象再注册。 推荐使用。

1 var bodyNode = document.getElementById("body");
2 
3 bodyNode.onload = function(){
4   alert("body的元素被加载完毕");    
5 }

常用的事件:

鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

技术分享
 1 function clickTest(){
 2         alert("单击..");    
 3     }
 4     
 5     function dbClick(){
 6         alert("双击..");     
 7     }
 8     
 9 
10 
11     function showTime(){
12         var timeSpan = document.getElementById("timeSpan");
13         var date  = new Date().toLocaleString();
14         timeSpan.innerHTML = date.fontcolor("red");
15     }
16     
17     function hideTime(){
18         var timeSpan = document.getElementById("timeSpan");
19         timeSpan.innerHTML = "";
20     }
21 
22 
23     function showInfo(){
24         var timeSpan = document.getElementById("userName");
25         timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");    
26     }
27 
28     function hideInfo(){
29         var timeSpan = document.getElementById("userName");
30         timeSpan.innerHTML = "";    
31     }
32  
33     function change(){
34         alert("城市改变了..");    
35     }
View Code

 

2.Location(地址栏)对象go top

href : 设置以及获取地址栏的对象
reload() 刷新当前的页面

 

3.Screen(屏幕)对象go top

availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。

1  document.write("获取系统屏幕的工作区域高度:"+screen.availHeight+"<br/>");
2  document.write("获取系统屏幕的工作区域宽度:"+screen.availWidth+"<br/>");
3  document.write("获取屏幕的垂直分辨率:"+screen.height+"<br/>");
4  document.write("获取屏幕的水平分辨率:"+screen.width+"<br/>");

 

javaScript---浏览器对象模型(BOM)

标签:

原文地址:http://www.cnblogs.com/gzc911/p/4966408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!