BOM 浏览器对象模型
一、Window对象:所有对象都支持window对象,它表示浏览器窗口;所有JavaScript全局变量,函数以及变量均自动成为window对象的成员;全局变量是window对象的属性;全局变量是window对象的方法;Html Dom的document也是window对象的属性之一。
window.document.getElementById(”box”)=document.getElementById(“box”)
1.window对象属性
(1)确定浏览器尺寸(不包括工具栏和滚动条)
a.对于InternetExplorer8+、Chrome、Firefox、Opera、Safari
window.innerHeight:浏览器窗口的内部高度
window.innerWidth:浏览器窗口的内部宽度
b.对于InternetExplorer8-
document.documentElement.clientHeight:浏览器窗口的内部高度
document.documentElement.clientWidth:浏览器窗口的内部宽度
c.或者
document.body.clientHeight:浏览器窗口的内部高度
document.body.clientWidth:浏览器窗口的内部宽度
(2)确定浏览器尺寸(包括工具栏和滚动条)
window.outHeight 外部高度
window.outWidth 外部宽度
(3)length 设置或返回窗口中的框架数量
(4)name 设置或返回窗口的名称
2.window对象方法
(1)window.close( ) 关闭浏览器窗口
(2)window.alert()显示带有一段消息和一个确认按钮的警告框
(3)window.confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
(4)window.prompt()显示可提示用户输入的对话框
(5)window.open()打开一个新的浏览器窗口或查找一个已命名的窗口
window.open(“页面名”,”_blank/_self”,”属性”)
(6)window.resizeTo(水平距离,垂直距离) 把窗口大小调整到指定宽度和高度
(7)window.resizeBy( ) 按照指定的像素调整窗口的大小
(8)window.scrollTo( ) 把内容滚动到指定坐标
(9)window.scrollBy( ) 按照指定的像素值滚动内容
增:浮动框架
<iframe src=”页面名” frameborder=”0” name=” ”></iframe>
<a href=” ” target=”框架名”> </a>
// 把超链接链接的页面内容显示到框架里
<a href="website/music.html" target="ifm1">音乐</a>
<a href="website/game.html" target="ifm1" >游戏</a>
<a href="website/network.html" target="ifm1">网站</a>
<!--把三个超链接的网页内容 在框架ifm1里面显示-->
</p>
<div>
<iframe src="close.html" frameborder="0" name="ifm1" class="fram1">
<!--把close页面的内容显示到框架ifm1 里面-->
</iframe>
二、window下的其他对象
1.history对象(window前缀可省略)
a.window.history.back() 与在浏览器中点击后退按钮相同
b.window.history.forward() 与在浏览器中点击向前按钮相同
c.window.history.go(n)跳转的指定步数n的页面,n为负数后退、n为正数向前
2.body对象
clientWidth 网页可见区域宽
clientHeight 网页可见区域高
scrollHeight 网页正文全文高
scrollWidth 网页正文全文宽
scrollTop 页面被卷去的高
scrollLeft 页面被卷去的左
注:scrollTop一般同onscroll事件一起用,onscroll事件:页面滚动时触发。
window.οnlοad= function () {
var backtop = document.getElementsByClassName("backtop")[0];
var header=document.getElementsByClassName("header")[0];
window.onscroll = function () { //滚动页面时触发
var scroltop = document.body.scrollTop||document.documentElement.scrollTop;
//获取滚动高度
if (scroltop > 300) {
backtop.style.display = "block";
header.style.display="block"
} else {
backtop.style.display = "none";
header.style.display="none"
}
}
3.Location对象
(1)location对象属性
hash 设置或返回从#开始的url
host 设置或返回主机名和当前url的端口号
hostname 设置或返回当前url的主机名
href 设置或返回完整的url
pathname 设置自或返回当前url的路径部分
port 设置或返回当前url的端口号
protocol 设置或返回当前url的协议
search 设置或返回从?开始的url(查询部分)
window.onload = function(){
//弹出输入框
document.getElementById("mtBtn01").onclick = function(){
document.getElementById('textsContent').innerHTML = "地址:"+window.location
+ "</br>hash值是:" + window.location.hash
+ "</br>主机名和当前 URL 的端口号是:" + window.location.host
+ "</br>当前 URL 的主机名是:" + window.location.hostname
+ "</br>完整的 URL是:" + window.location.href
+ "</br>URL 的路径是:" + window.location.pathname
+ "</br>前 URL 的端口号是:" + window.location.port
+ "</br>URL 的协议是:" + window.location.protocol
+ "</br>查询部分是:" + window.location.search
}
}
(2)Location对象方法
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
window.onload = function(){
//重载页面
document.getElementById("mtBtn02").onclick = function(){
window.location.reload();
}
//下面三种方法都是替换成新的页面
//1 assign
document.getElementById("mtBtn01").onclick = function(){
window.location.assign("http://www.baidu.com");
}
//2 replace 替换,不产生历史记录
document.getElementById("mtBtn03").onclick = function(){
window.location.replace("http://www.baidu.com");
}
//3直接更改location
document.getElementById("mtBtn04").onclick = function(){
window.location = "http://www.baidu.com";
}
}
三、JSON
1. JSON作用:JSON是用于存储和传输数据的格式,JSON通常用于服务器端向页面传输数据。
2.JSON是什么:JSON全称 JavaScript Object Notation;JSON是一种轻量级的数据交换格式;JSON是独立的语言;JSON易于理解;JSON格式仅仅是一个文本,使用JavaScript语法,文本可以被任何编程语言读取作为数据格式传递。
3.JSON格式化后为JavaScript对象:JSON格式在语法上与创建JavaScript对象代码是相同的,由于他们很相似,所以JavaScript程序可以很容易将JSON数据转换为JavaScript对象。
4.JSON实例:
{"employees":[
{"firstName":"John","lastName":"Doe"},
{"firstName":"Anna","lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
5.JSON语法规则:数据为键/值对,数据由逗号分隔,大括号保存对象,方括号保存数组。
6.JSON数据:JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:"firstName":"John"
7.JSON对象:JSON 对象保存在大括号内。就像在 JavaScript 中, 对象可以保存多个 键/对:{"firstName":"John","lastName":"Doe"}
8.JSON数组:JSON 数组保存在中括号内。就像在 JavaScript 中, 数组可以包含对象:
"employees":[
{"firstName":"John","lastName":"Doe"},
{"firstName":"Anna","lastName":"Smith"},
{"firstName":"Peter","lastName":"Jones"}
]
9.JSON字符串转化为JavaScript对象:通常我们从服务器中读取 JSON 数据,并在网页中显示数据。
首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据,然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象: var obj = JSON.parse(text);
四、Cookies
1、什么是Cookies?
Cookies用于存储web页面的用户信息,Cookies 以名/值对形式存储,username=John Doe,当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
2.创建Cookie
document.Cookie="username=John Doe";
3.添加过期时间
document.Cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
4.Cookie路径
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
5.获取Cookie
alert(document.cookie);
6.删除cookie
设置有效期,时间过了cookie自动删除。
<script>
var times=new Date(); //获取当前系统时间
times.setTime(times.getTime()+1000);
//在当前日期上加上一个期限(即cookie过期时间)单位毫秒 并赋值给times
document.cookie="username=zhq;expires="+times.toGMTString(); //设置cookie
var btn=document.getElementsByTagName("button")[0];
btn.onclick= function () {
alert(document.cookie)
}
</script>