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

浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述,如果我们要
操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作。
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 >
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     }

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/>");
时间: 2024-10-05 12:04:46

javaScript---浏览器对象模型(BOM)的相关文章

Javascript浏览器对象模型BoM要点总结

BOM要点总结篇 温故而知心!!学到的东东,必须要总结一下,方便自己,巩固自己.今天我为大家总结一下BOM当中的一些要点: 一.Windows对象 1.窗口的操作 windows对象对操作浏览器窗口非常有用.用以下四种方法来实现对窗口的移动以及调整大小. moveBy(dx,dy)-----把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素.dx值为负数,向左移动窗口,dy为负数,向上移动窗口. moveTo(x,y)-----移动窗口,使他的左上角位于用户的(x,y)处.可以使用负

JavaScript 浏览器对象模型BOM

1.window对象的属性和方法window对象有一系列的属性,这些属性本身也是对象; (1).属性属性 含义closed 当窗口关闭时为真;defaultStatus 窗口底部状态栏显示的默认状态信息;document 窗口中当前显示的文档对象;frames 窗口中的框架对象数组;history 保存有窗口最近加载的URL;length 窗口中的框架数;location 当前窗口中的URL;name 窗口名;offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控

JavaScript浏览器对象模型(BOM)

1 window对象 既是通过JS访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 1.1 全局作用域 全局变量不能通过delete删除,但是直接在window对象上的定义的属性可以 var age = 29; window.color = "red"; delete window.age; // 在IE<9时抛出错误,其他浏览器中返回false delete window.color; // 在IE<9时抛出错误,其他浏览器中返回true ale

浏览器对象模型BOM小结

概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分: window对象 是浏览器中的Global对象 窗口设置 (打开.大小.位置) 间歇调用与超时调用 对话框 (提示框.确认框.输入框) location对象

ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie

BOM(浏览器对象模型(BrowserObjectModel)),允许访问和操控浏览器窗口.研发者通过使用BOM,可移动窗口.更改状态栏文本.执行其它不与页面内容发生直接联系的操作. 本文将从ExtJS中以下四类服务入手: 1,命名空间 2,用户代理对象 3,Cookie 4,定时调用函数(将于下一博文详细陈述) 命名空间   ExtJS的命名空间是在window对象所提供的全局范围内建立相互独立的范围,概念上类似于Java的package. Ext.namespace("com.baidu&q

JavaScript浏览器对象模型(BOM)之window对象

一.BOM概述 BOM(Browser Object Model)浏览器对象模型,它提供了很多对象,用于访问浏览器的功能. BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准.所以,BOM 本身是没有标准的或者还没有哪个组织去标准它. BOM 的核心对象是 window,它表示浏览器的一个实例.window 对象处于 JavaScript 结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象. 二.Window对象的属性和方法的概括

JavaScript小白教程7浏览器对象模型 BOM

JavaScript Window - 浏览器对象模型 Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口.页面就是一个窗口 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. Window 尺寸(窗口的大小:长宽) 其他 Window 方法 一些其他方法: window.open() - 打开新窗口 window.close() - 关闭当前窗口 win

浏览器对象模型BOM总结

BOM是Browser Object Model的缩写,简称浏览器对象模型.BOM提供了独立于内容而与浏览器窗口进行交互的对象  · 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window  · BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性. BOM提供了一些访问窗口对象的一些方法,:1.我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率.BOM最强大的功能是它提供了一个访

004_01浏览器对象模型BOM

BOM:Browser Object Model,是指浏览器对象模型,用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,它表示浏览器的一个实例,其他对象都是该对象的子对象. 主要功能: 1. 弹出新浏览器窗口的能力: 2. 移动.关闭和更改浏览器窗口大小的能力: 3. 可提供WEB浏览器详细信息的导航对象: 4.可提供浏览器载入页面详细信息的本地对象: 5

浏览器对象模型--BOM

BOM的核心对象是window对象,其他对象都是window对象的子对象 一.浏览器对象模型 二.window对象 属性 1.位置类型 (浏览器距离屏幕的距离) // IE chrome alert(window.screenLeft) alert(window.screenTop) // FF chrome alert(window.screenX) alert(window.screenY) 2.尺寸类型 (浏览器的文档尺寸) alert(window.innerWidth) //(有兼容性