BOM
上一篇: JavaScript基础知识
上一篇: DOM
1. 简介
全称 Browser Object Model,浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述,如果我们要操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象
2. window 对象
window对象常用的方法:
- open() 打开一个新的窗口。
- resizeTo() 将窗口的大小更改为指定的宽度和高度值。
- moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
- moveBy() 相对于原来的窗口移动指定的x、y值。
- setInterval() 每经过指定毫秒值后就会执行指定的代码。
- clearInterval() 根据一个任务的ID取消的定时任务。
- setTimeout() 经过指定毫秒值后执行指定 的代码一次。
- history.back() 回到过去
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。
<button onclick="window.history.back()">回到过去</button>
3. 常用的事件
鼠标点击相关:
- onclick 在用户用鼠标左键单击对象时触发。
- ondblclick 当用户双击对象时触发。
- onmousedown 当用户用任何鼠标按钮单击对象时触发。
- onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关:
- onmouseout 当用户将鼠标指针移出对象边界时触发。
- onmousemove 当用户将鼠标划过对象时触发。
焦点相关的:
- onblur 在对象失去输入焦点时触发。
- onfocus 当对象获得焦点时触发。
其他:
- onchange 当对象或选中区的内容改变时触发。
- onload 在浏览器完成对象的装载后立即触发。
- onsubmit 当表单将要被提交时触发。
4. location 对象
Location 对象是由 JavaScript runtime engine 自动创建的,包含有关当前 URL 的信息。
location中的重要方法:
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
5. screen 对象
Screen 对象是由 JavaScript runtime engine 自动创建的,包含有关客户机显示屏幕的信息。
Screen(屏幕)对象
availHeight 获取系统屏幕的工作区域高度,排除 Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象</title>
</head>
<body id="b1">
<script>
/*
window 是一个对象,窗口对象,表示的是整个浏览器
BOM Browser object model 浏览器对象模型
window onload 加载
window.onload = 匿名函数
类似于Java中的静态代码 权限很高
在浏览器打开时,立即执行
*/
window.onload = function (){
var body1 = document.getElementById("b1");
//在body中创建一个div
var div = document.createElement("div");
console.log(div);
//加一些CSS样式
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "greenyellow";
//给动态创建的元素进行属性的设置
div.setAttribute("id","div1");
div.setAttribute("class","classDiv");
// 将动态创建的元素对象给需要的元素
body1.appendChild(div);
}
</script>
</body>
</html>