JavaScript学习笔记（BOM）

BOM给开发人员提供了于浏览器交互的方法，在此梳理以下DOM为我们提供的一些开发中离不开的对象，有不对的欢迎指正

BOM提供了几个对象，window, location，navigator, screen, history

window对象

BOM 的核心对象是 window，它表示浏览器的一个实例

全局作用域

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法,但是定义全局变量与在 window 对象上直接定义属性还是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以

window对象（浏览器）相对于屏幕的位置

fireFox: screenX/ screenY
其他浏览器：screenLeft/screenTop


var leftPos = (typeof window.screenLeft == "number") ?
 window.screenLeft : window.screenX;
 
var topPos = (typeof window.screenTop == "number") ?
 window.screenTop : window.screenY;

窗口大小

浏览器本身大小 outerWidth/outerHeight
浏览器内视图区大小 innerWidth/innerHeight
IE8之前没有提供此类方法，需要通过DOM提供的方法获取

 var pageWidth = window.innerWidth,
 pageHeight = window.innerHeight;

if (typeof pageWidth != "number"){
 if (document.compatMode == "CSS1Compat"){//标准模式
 pageWidth = document.documentElement.clientWidth;
 pageHeight = document.documentElement.clientHeight;
 } else {//混杂模式
 pageWidth = document.body.clientWidth;
 pageHeight = document.body.clientHeight;
 }
}

在移动浏览器中， innerWidth/innerHeight表示窗口可视区大小，移动IE中不支持这个属性，通过document.documentElement.clientWidth，document.documentElement.clientHeight获取

var pageWidth = window.innerWidth,
 pageHeight = window.innerHeight;
 
 //移动IE浏览器兼容

 if (typeof pageWidth != "number"){
	pageWidth = document.documentElement.clientWidth;
 	pageHeight = document.documentElement.clientHeight;
}

定时器和延时器

延时器setTimeout
```
setTimeout(function() {
 alert("Hello world!");
}, 1000); 
```
理想状态下，延时器的作用是经过多少时间执行延时器里面的代码，但是过了时间，代码不一定会执行，js是单线程，有任务队列的概念,队列为空了才会执行延时器中的代码

定时器setInterval

setInterval (function() {
 alert("Hello world!");
}, 10000);

定时器存在问题，后一个间歇调用可能在前一个间歇调用之前启动，因此最佳实践是采用延迟器模拟定时器

var i = 0;
if(i<10){
i++;
setTimeout(function(){
	alert('hello world')
},500)
}

setTimeout(function(){
	alert('hello world')
},500)

自带弹窗

alert()
confirm()
prompt()

location对象

location保存了文档个URL的信息，下面是loacation对象的属性：

href 返回完整的URL
hash 返回url中的hash
host 返回服务器名加端口号
hostname 返回服务器名不带端口好
port 返回端口号
protocol 返回协议名
pathname 返回文件名
search 返回查询字符串，以？开始

封装获取参数的方法

function getQueryStringArgs(name){
 //取得查询字符串并去掉开头的问号
 var qs = (location.search.length > 0 ? location.search.substring(1) : ""),

 //保存数据的对象
 args = {},

 //取得每一项
 items = qs.length ? qs.split("&") : [],
 item = null,
 name = null, 
  value = null,
 //在 for 循环中使用
 i = 0,
 len = items.length;
 //逐个将每一项添加到 args 对象中
 for (i=0; i < len; i++){
 item = items[i].split("=");
 name = decodeURIComponent(item[0]);
 value = decodeURIComponent(item[1]);
 if (name.length) {
 args[name] = value;
 }
 }

 return args[name];
}

实现导航的功能
location最常用的导航功能就是location.href, 跳转指定的url并添加一条记录

location.href = "http://www.wrox.com";

navigator对象

navigator对象存储了浏览器客户端的信息，提供了很多属性，主要用于浏览器客户端识别，具体内容不做展开说明

screen对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的 screen 对象都包含着各不相同的属性，在编程中使用的不多

history对象

history 对象保存着用户上网的历史记录
lengh属性
history的length属性记录的是history记录的数量，利用length数量可以判断是否是第一次打开了当前页面

if(history.length==0){
	alert('一开始打开了当前页面')
}

history方法

go()

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

forward() 前进
back()后退

HTML5新增

pushState()添加记录
replaceState() 修改当前记录

liu_xiaoru

发布了34 篇原创文章 · 获赞 2 · 访问量 1648

私信关注