JS模块（五 BOM）

BOM：浏览器对象模型

概念
1. BOM：浏览器对象模型，将浏览器的各个组成部分看做一个对象
2. Window()：窗口对象
3. Location()：地址栏对象
4. History()：历史记录(当前窗口)对象
5. Navigator ：浏览器对象
6. Screen：显示器屏幕
特点
1. 这些BOM对象是由浏览器创建
2. BOM对象不能自己创建，当文档加载进内存，浏览器自动创建

BOM对象

Window 对象
1. 表示浏览器中打开的窗口
2. 可以获取其他BOM对象
3. 对象中的属性可以获取其他BOM对象
4. 用法
  - 获取地址栏对象
```
var loc=window.location;
var his=window.history;
var sc=window.screen;
var na=window.navigator;
```

运行结果

 - 获取html文档对象

   ```
   var doc=window.document;
   ```

window对象中的方法

window可以省略不写

有关弹框的方法

window.alert("他是一个警告框");确定true 取消false
var v=window.confirm("你确定吗？");
document.write(v);

定时器的方法

执行一次定时器
```
function show() {alert("hehe");}
```

返回个定时器id 根据id取消定时器

var show=function(){alert("hehe");}
var timeID=window.setTimeout(show, 2000); //单位是毫秒
window.clearTimeout(timeID);

运行结果
3. 循环定时器

    ```
    var i=0;
    var add=function(){i=i+1;}
    var timeID=window.setInterval(add,1000);
    window.setInterval(function(){
    console.log(i);},1000)	
    ```

运行结果
返回定时器的id

location地址栏对象

获取地址栏对象 href 设置或返回完整的 URL 浏览器的地址栏，会对文件进行URL编码
```
var text=location.href;
alert(text);
function toBaidu(){
location.href="http://www.baidu.com";}
```

一些其他属性

alert(location.port); 
alert(location.host);
alert(location.hostname);
alert(location.pathname);
alert(location.protocol);

运行结果
1. 返回当前 URL 的端口部分
2. 返回一个URL的主机名和端口
3. 返回URL的主机名
4. 返回的URL路径名
5. 返回一个URL协议

返回打开的窗口对象
```
newWindow=window.open("index.html");
```
关闭打开的窗口
```
window.close();
```

运行结果

刷新页面

function flushHTML(){location.reload();}

通过 location.hash 获取最新hash值

window.onhashchange=function(){
var hs=location.hash;
console.log(hs);}

运行结果

URL编码

decodeURI() 解码某个编码的 URI
decodeURIComponent() 解码一个编码的 URI 组件
encodeURI() 把字符串编码为 URI

encodeURIComponent() 把字符串编码为 URI 组件

var text=location.href;
document.write(text);
document.write("<hr>");
var url=decodeURIComponent(text);
document.write(url);
document.write("<hr>");
var str="张三";
var code=encodeURIComponent(str);
document.write(code);
document.write("<hr>");
var name=decodeURIComponent(code);
document.write(name);

运行结果

屏幕对象

alert(window.screen.pixelDepth);
alert(window.screen.width);
alert(window.screen.height);

运行结果
1. 屏幕的像素
2. 屏幕的宽度
3. 屏幕的高度

页面时钟的显示

使用js/moment.js这个java时间显示

function showTime() {
var divEle = window.document.getElementById("time");
var time=moment().format('YYYY-MM-DD HH:mm:ss dddd'); 
divEle.innerText = time;}
showTime(); //先手动调用一次		
window.setInterval(showTime,1000);//循环调用 间隔1000

运行结果

页面的前进与后退

<html><head><meta charset="utf-8"><title></title>
<script type="text/javascript">
function nextOne(){
window.history.go(1); //下一个}
</script></head><body>
<a href="a.html?username=zhangsan&passwrod=123456">跳到a</a>
<a href="javascript:void(nextOne())">下一个</a></body></html>

运行结果

跳转页面并携带了请求参数 username=zhangsan&passwrod=123456?键=值&键=值&键=值请求参数的格式

JS待续…

JS模块（五 BOM）

JS模块（五 BOM）

BOM：浏览器对象模型

BOM对象

猜你喜欢