javascript 基础学习（BOM）（五）

DOM与BOM比较： 

 1、open   location

1.1、a标签  跳转界面和界面内部位置跳转的方法

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#abc">内部锚点跳转</a>
<div id="abc">
	abc的内容
</div>

1.2、open

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open(URL,name,specs,replace)

1、url：  可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

2、name：可选。指定target属性或窗口的名称。支持以下值：

• _blank - URL加载到一个新的窗口。这是默认
• _parent - URL加载到父框架
• _self - URL替换当前页面
• _top - URL替换任何可加载的框架集
• name - 窗口名称

3、specs：  可选。一个逗号分隔的项目列表。支持以下值：

• channelmode=yes|no|1|0    是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
• directories=yes|no|1|0    是否添加目录按钮。默认是肯定的。仅限IE浏览器
• fullscreen=yes|no|1|0    浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
• height=pixels    窗口的高度。最小.值为100
• left=pixels    该窗口的左侧位置
• location=yes|no|1|0    是否显示地址字段.默认值是yes
• menubar=yes|no|1|0    是否显示菜单栏.默认值是yes
• resizable=yes|no|1|0    是否可调整窗口大小.默认值是yes
• scrollbars=yes|no|1|0    是否显示滚动条.默认值是yes
• status=yes|no|1|0    是否要添加一个状态栏.默认值是yes
• titlebar=yes|no|1|0    是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
• toolbar=yes|no|1|0    是否显示浏览器工具栏.默认值是yes
• top=pixels    窗口顶部的位置.仅限IE浏览器
• width=pixels    窗口的宽度.最小.值为100

4、replace

• true - URL 替换浏览历史中的当前条目。
• false - URL 在浏览历史中创建新的条目。

var json = {
	"name": "helloworld",
	"fullscreen": "no",
	"location": "no",
	"width": "600px",
	"height": "400px",
	"top": "100px",
	"left": "100px"
};
page = window.open("http://www.taobao.com","_blank",json)

1.3、location

1、url

protocol://host[:port]/path/[?query]#fragment

 2、对象属性

3、对象方法

// location.href = "http://www.4399.com"//修改href属性也可以跳转页面
// location.assign("http://www.qq.com")
//替换是将当前页面替换掉,不能用回退按钮进行回退
location.replace("http://www.qq.com")
//重新加载当前页面,相当于点击了刷新按钮
//location.reload()

2、navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

判断用户用哪个终端打开页面，实现跳转：

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) { 
    window.location.href = "";     //手机 
 } else { 
    window.location.href = "";     //电脑 
 }

3、延迟事件和间隔事件

3.1、延迟函数

setTimeout(延迟做的函数，延迟多少毫秒时间)

第三个参数(给延迟触发的函数传参)

//var timeoutId = setTimeout(fn1,3000,"skyblue",100)
setTimeout(function(){
    fn1("purple",200)
},3000)
//取消延迟函数
//clearTimeout(timeoutId)

3.2、间隔函数

var intervalId = setInterval(fn1,1000)
 
//取消间隔函数clearInterval(间隔函数ID)
clearInterval(intervalId)

4、history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中） 访问过的 URL。

5、本地储存

5.1、localStorage

在同一个ip端口号  全部网页有效

//存放数据
localStorage.newsTitle = "跻身前40！中国营商环境全球排名再度提升"
localStorage['author'] = "今日头条"
localStorage.setItem("content","促进共同发展，携手构建人类命运共同体。")
//取数据
document.write("<h1>"+localStorage.newsTitle+"</h1>")
document.write("<h2>"+localStorage['author']+"</h2>")
document.write("<p>"+localStorage.getItem("content")+"</p>")
console.log(localStorage.newsTitle)
//清除数据
//清除1条数据
localStorage.removeItem("author")
			
//清除所有数据
localStorage.clear()

5.2、sessionStorage

只在当前网页窗口有效

//存放数据
sessionStorage.newsTitle = "跻身前40！中国营商环境全球排名再度提升"
sessionStorage['author'] = "今日头条"
sessionStorage.setItem("content","促进共同发展，携手构建人类命运共同体。")
//取数据
document.write("<h1>"+sessionStorage.newsTitle+"</h1>")
document.write("<h2>"+sessionStorage['author']+"</h2>")
document.write("<p>"+sessionStorage.getItem("content")+"</p>")
console.log(sessionStorage.newsTitle) 
//清除数据
//清除1条数据
sessionStorage.removeItem("author")
			
//清除所有数据
sessionStorage.clear()