BOM
一、预解析程序：
第一步、<script> </script>
第二步、解析代码的运行环境（确定并划分作用域：全局/局部变量）
第三步、对var（定义变量） function（函数）进行解析（针对变量，只读变量的声明，没有读值）
第四步、如果还有<script>块，按照上面顺序执行预解析。
二、BOM
1、操作窗口边距
针对：IE chrom 浏览器
//针对 IE、chrom 获取浏览器距离屏幕左侧的边距
alert(window.screenLeft);
//针对 IE、chrom 获取浏览器距离屏幕顶部的边距
alert(window.screenTop);
alert((window.screenLeft) +","+(window.screenTop));
针对：firefox(FF)
// 针对 firefox 获取浏览器距离屏幕左侧的边距
alert(window.screenX);
//针对 firefox 获取浏览器距离屏幕顶部的边距
alert(window.screenY);
alert((window.screenX) +","+(window.screenY));
IE chrom firefox(FF) 浏览器都可用的方法：
//针对浏览器兼容问题的处理办法
alert((window.screenLeft || window.screenX) + " "+ (window.screenTop || window.screenY));
2、浏览器尺寸属性
针对：firefox(FF) chrom 浏览器
//针对 firefox、chrom 获取浏览器的宽度
alert(window.innerWidth);
//针对 firefox、chrom 获取浏览器的高度
alert(window.innerHeight);
alert(window.innerWidth+" "+window.innerHeight);
针对：IE 浏览器
//针对 firefox、chrom 获取浏览器的宽度
alert(document.documentElement.clientWidth);
//针对 firefox、chrom 获取浏览器的高度
alert(document.documentElement.clientHeight);
alert(document.documentElement.clientWidth + " " + document.documentElement.clientHeight);
IE chrom firefox(FF) 浏览器都可用的方法：
//针对浏览器兼容问题的处理办法
alert((window.innerWidth || document.documentElement.clientWidth) + " "+ (window.innerHeight || document.documentElement.clientHeight));
3、窗口移动 moveBy/moveTo和改变尺寸 resizeBy / resizeTo 方法（只针对IE有效）
a、相对于当前位置移动：window.moveBy(100,100)
b、相对于屏幕移动：window.moveTo(200,200)
示例：
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
window.moveBy(100,100);
};
button2.onclick=function(){
window.moveTo(200,200);
};
</script>
<body>
<input id="button1" type="button" value="相对于当前移动"/>
<input id="button2" type="button" value="相对于屏幕移动"/>
</body>
c、在本身的尺寸上增加:window.resizeBy(100,100);
d、固定尺寸:window.resizeTo(300,300);
示例：
<head>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
window.resizeBy(100,100);
};
button2.onclick=function(){
window.resizeTo(200,200);
};
</script>
</head>
<body>
<input id="button1" type="button" value="在本身的尺寸上增加"/>
<input id="button2" type="button" value="固定尺寸"/>
</body>
4、滚动条控制 （**）
当前滚动条位置相对于当前改变位置：scrollBy(100,100)
当前窗口的宽度和高度:scrollTo(0,500)
示例：
<head>
<script>
window.onload=function(){
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
scrollBy(100,100);
};
button2.onclick=function(){
scrollTo(0,500);
};
};
</script>
<style>
*{
margin: 0;
padding: 0;
}
input#button1{
position: fixed;
top:50px;
left: 100px;
}
input#button2{
position: fixed;
top:50px;
left: 300px;
}
</style>
</head>
<body>
<div style="width: 2000px;height: 2000px">
<input id="button1" type="button" value="滚动条位置相对于当前改变"/>
<input id="button2" type="button" value="当前窗口的宽度和高度"/>
</div>
</body>
5、打开新窗口（**）window.open()
示例:
父窗口代码:
<head>
<script>
window.onload=function(){
var open;
var button = document.getElementById("button");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
open = window.open("./fuction2zj.html","","width=200px,height=200px,top=100px,left=100px");
};
button2.onclick=function(){
open.window.close();
};
};
</script>
</head>
<body>
<div style="width: 2000px;height: 2000px">
<input id="button" type="text"/>
<input id="button1" type="button" value="打开新的窗口"/>
<input id="button2" type="button" value="关闭新的窗口"/>
</div>
</body>
第一步、<script> </script>
第二步、解析代码的运行环境（确定并划分作用域：全局/局部变量）
第三步、对var（定义变量） function（函数）进行解析（针对变量，只读变量的声明，没有读值）
第四步、如果还有<script>块，按照上面顺序执行预解析。
二、BOM
1、操作窗口边距
针对：IE chrom 浏览器
//针对 IE、chrom 获取浏览器距离屏幕左侧的边距
alert(window.screenLeft);
//针对 IE、chrom 获取浏览器距离屏幕顶部的边距
alert(window.screenTop);
alert((window.screenLeft) +","+(window.screenTop));
针对：firefox(FF)
// 针对 firefox 获取浏览器距离屏幕左侧的边距
alert(window.screenX);
//针对 firefox 获取浏览器距离屏幕顶部的边距
alert(window.screenY);
alert((window.screenX) +","+(window.screenY));
IE chrom firefox(FF) 浏览器都可用的方法：
//针对浏览器兼容问题的处理办法
alert((window.screenLeft || window.screenX) + " "+ (window.screenTop || window.screenY));
2、浏览器尺寸属性
针对：firefox(FF) chrom 浏览器
//针对 firefox、chrom 获取浏览器的宽度
alert(window.innerWidth);
//针对 firefox、chrom 获取浏览器的高度
alert(window.innerHeight);
alert(window.innerWidth+" "+window.innerHeight);
针对：IE 浏览器
//针对 firefox、chrom 获取浏览器的宽度
alert(document.documentElement.clientWidth);
//针对 firefox、chrom 获取浏览器的高度
alert(document.documentElement.clientHeight);
alert(document.documentElement.clientWidth + " " + document.documentElement.clientHeight);
IE chrom firefox(FF) 浏览器都可用的方法：
//针对浏览器兼容问题的处理办法
alert((window.innerWidth || document.documentElement.clientWidth) + " "+ (window.innerHeight || document.documentElement.clientHeight));
3、窗口移动 moveBy/moveTo和改变尺寸 resizeBy / resizeTo 方法（只针对IE有效）
a、相对于当前位置移动：window.moveBy(100,100)
b、相对于屏幕移动：window.moveTo(200,200)
示例：
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
window.moveBy(100,100);
};
button2.onclick=function(){
window.moveTo(200,200);
};
</script>
<body>
<input id="button1" type="button" value="相对于当前移动"/>
<input id="button2" type="button" value="相对于屏幕移动"/>
</body>
c、在本身的尺寸上增加:window.resizeBy(100,100);
d、固定尺寸:window.resizeTo(300,300);
示例：
<head>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
window.resizeBy(100,100);
};
button2.onclick=function(){
window.resizeTo(200,200);
};
</script>
</head>
<body>
<input id="button1" type="button" value="在本身的尺寸上增加"/>
<input id="button2" type="button" value="固定尺寸"/>
</body>
4、滚动条控制 （**）
当前滚动条位置相对于当前改变位置：scrollBy(100,100)
当前窗口的宽度和高度:scrollTo(0,500)
示例：
<head>
<script>
window.onload=function(){
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
scrollBy(100,100);
};
button2.onclick=function(){
scrollTo(0,500);
};
};
</script>
<style>
*{
margin: 0;
padding: 0;
}
input#button1{
position: fixed;
top:50px;
left: 100px;
}
input#button2{
position: fixed;
top:50px;
left: 300px;
}
</style>
</head>
<body>
<div style="width: 2000px;height: 2000px">
<input id="button1" type="button" value="滚动条位置相对于当前改变"/>
<input id="button2" type="button" value="当前窗口的宽度和高度"/>
</div>
</body>
5、打开新窗口（**）window.open()
示例:
父窗口代码:
<head>
<script>
window.onload=function(){
var open;
var button = document.getElementById("button");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick=function(){
open = window.open("./fuction2zj.html","","width=200px,height=200px,top=100px,left=100px");
};
button2.onclick=function(){
open.window.close();
};
};
</script>
</head>
<body>
<div style="width: 2000px;height: 2000px">
<input id="button" type="text"/>
<input id="button1" type="button" value="打开新的窗口"/>
<input id="button2" type="button" value="关闭新的窗口"/>
</div>
</body>
子窗口代码:
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var ul = document.getElementsByTagName("li");
for(i=0;i<ul.length;i++){
ul[i].onclick=function(){
top.opener.button.value = this.innerHTML;
}
}
}
</script>
</head>
<body>
<ul>
<li>成都</li>
<li>重庆</li>
<li>北京</li>
<li>天津</li>
<li>其他</li>
</ul>
<input type="button" value="关闭窗口" onclick="window.close()"/>
</body>
6、时间间隔和暂停:
window.setInterval(function(){},1000);
window.clearInterval(times);
注:times = window.setInterval(function(){},1000);))
示例:
<head>
<script>
window.onload=function(){
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var times;
button1.onclick=function(){
times = window.setInterval(function(){scrollBy(0,100);},500);
};
button2.onclick=function(){
window.clearInterval(times);
}
}
</script>
</head>
<body>
<div style="width: 2000px;height: 2000px">
<input id="button1" type="button" value="滚动条开始移动"/>
<input id="button2" type="button" value="暂停"/>
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
input#button1{
position: fixed;
top:50px;
left: 100px;
}
input#button2{
position: fixed;
top:50px;
left: 300px;
}
</style>
其他示例:显示倒计时并弹出其他窗口
<script>
window.onload=function(){
var div = document.getElementById("number");
var i = 5;
window.setInterval(function(){
if(i == 0){
window.open("fuction2zj.html")
}else{
--i;
div.innerHTML=i;
}
},1000);
}
</script>
<div id="number">5</div>
7 history 访问历史页面 length/go()/forward()/back()
属性:
length 表已防问的页面个数
示例:
alert(window.history.length);
方法:
go()方法 注:当值为正数,向前进相应的数,当为0,即刷新
forward()方法 表返回
back()方法 表返回
示例:
window.onload=function(){
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
button1.onclick=function(){
//访问历史页面 history 的go()方法 注:当值为正数,向前进相应的数,当为0,即刷新
window.history.go(1);
};
button2.onclick=function(){
//访问历史页面 history 的forward()方法 表返回
window.history.forward();
};
button3.onclick=function(){
//访问历史页面 history 的back()方法 表返回
window.history.back();
};
8 locationhref/search/assign()/replace()/reload()
属性:
href属性 (设置/返回一个完整的URL)
示例:
//location 的href属性(返回一个完整的URL)
alert(window.location.href);
alert(1);
//location 的href属性(设置一个完整的URL)
window.location.href="dom2.html";
search属性 (获取URL后面的查询数据)
示例:
//location 的search属性(获取URL后面的查询数据)
alert(window.location.search);
方法: assign方法:页面跳转
location 的assign()方法:页面跳转
window.location.assign("dom2.html");
location 的replace()方法:页面跳转(无历史记录)
location 的reload()方法:页面刷新
示例:
var button = document.getElementById("button");
button.onclick=function(){
window.location.reload();
}
9 screen:客户端显示屏幕信息 availHeight/availWidth/height/windth
screen 的 availHeight属性:返回显示屏幕的高度(除任务栏)
alert(window.screen.availHeight);
screen 的 availWidth属性:返回显示屏幕的宽度
alert(window.screen.availWidth);
screen 的 Height属性:包含任务栏的高度
alert(window.screen.availHeight);
screen 的 Width属性:包含任务栏的宽度
alert(window.screen.availWidth);
