bom

Posted susi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bom相关的知识,希望对你有一定的参考价值。

 
1、全局对象
var a=100;
function fun(){
a = true;
console.log(window.a);
}
window.fun();
全局变量 属于window这个对象的属性
只有全局对象才对他产生影响
window这个全局对象是js操作浏览器的句柄在<script>标签之间直接定义的这些变量和函数都属于window这个全局对象的属性和方法。
所以在使用这些变量或者调用这些函数的时候,可以加上 window. 可以也不加。
 
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
2、window的属性
 
 
<button onclick="linkOther()">跳转</button>
<button onclick="refresh()">刷新</button>
<button onclick="refresh2()">不带缓存的刷新</button>
<input type="text" name=""/>
window的六个官方制定的对象属性
console.log(window.document)html文档
console.log(window.frames)框架
console.log(window.location)地址栏 console.log(window.location.href)直接输出网址
console.log(window.history)历史记录
console.log(window.navigator)浏览器厂商信息
console.log(window.screen)用户设备分辨率
 
function linkOther(){
window.location.href="5.history.html";
href的值是相对路径
}
 
function refresh(){
reload()不传参数,带缓存的刷新
window.location.reload();
}
 
function refresh2(){
不带缓存的刷新
window.location.reload(true);
}
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
3、跳转页面
 
<button onclick="jump()">跳转</button>
<button onclick="goBack()">上一个</button>
<button onclick="goNext()">下一个</button>
<button onclick="goNum()">跳到第n个</button>
 
 
alert(window.history.length);
 
function jumo(){
通过修改location.href属性值来进行页面跳转会增加历史记录
window.location.href="5.history.html";
 
 
function goBack(){
回到记录中的上一条
window.history.back();
}
 
function goNest(){
回到记录中的下一条
window.history.forward();
 
function goNum(){
跳转的指定页面
window.history.go(-1);
}
 
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
4、查询当前浏览器
 
console.log( window.navigator );
console.log( window.navigator浏览器厂商信息.userAgent用户设备 );
document.write( window.navigator.userAgent );
 
if(window.navigator.userAgent.toLowerCase()小写.indexOf从开头("AppleWebKit")!=-1查找到时){
alert("谷歌浏览器");
}
if (window.navigator.userAgent.toLowerCase().indexOf("Gecko")!=-1) {
alert("火狐");
}
if (window.navigator.userAgent.toLowerCase().indexOf("Trident")!=-1) {
alert("IE");
}
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
5、常用方法
 
<button onclick="openNewWindow()">打开窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
 
打开窗口(弹出小窗口)
function openNewWindow(){
window.open(url,"","描述新窗口特性的字符串")
window.open("5.history.html","","width=50px;height:50px;left=300px,top=0");
}
 
关闭窗口
function openNewWindow(){
window.close():
}
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
6、加载事件
 
<div style="width:300px;height:400px;background:red"></div>
<script type="text/javascript">
alert(1);
</script>
<div style="width:300px;height:400px;background:yellowgreen"></div>
<script type="text/javascript">
alert(2);
</script>
<script type="text/javascript">
事件:浏览器的行为或者用户行为
事件处理程序:对事件的响应。
 
当事件触发时,如果要对该事件进行响应,会自动调用事件处理程序。
 
浏览器的行为:加载完成、卸载、滚动、缩放
事件 load 事件处理程序 onload
unload onunload(IE有效)
alert(3);
加载
window.onload = function(){
alert("页面加载完成!");
}
卸载
window.onunload = function(){
alert("大王,你真的要离开臣妾了吗?");
}
 
</script>
<script type="text/javascript">
alert(4);
</script>
 
现弹出1,在弹出第一个色块同时弹出2, 弹出3同时弹出第二个色块, 弹出4,最后弹出页面加载完成
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
7、滚动条事件
 
 
<body style="height:2000px">
我是顶部
<div id="box" onclick="goTop()">回到顶部</div>
<script type="text/javascript">
//scroll onscroll
// 当拖动滚动条时会反复的触发scroll事件,会一直调用onscroll事件处理程序
window.onscroll = function(){
console.log("滚");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
console.log( scrollTop );
}
 
function goTop(){
document.documentElement相当于HTML.scrollTop = 0; 滚动条距离置顶
document.body.scrollTop = 0;
}
</script>
 
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
8、可视窗口
 
 
window.onresize = function(){
console.log("我要变了");
获取可视窗口的宽
console.log( document.documentElement.clientWidth );
console.log( document.body.clientWidth );
console.log( window.innerWidth );
 
var w = document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
 
获取可视窗口的高度
console.log( document.documentElement.clientHeight );
console.log( document.body.clientHeight );
console.log( window.innerHeight );
 
var h = document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
 
}
 
 
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 
9、定时器
 
 
间歇定时器:每个固定时间调用一次
setInterval()
功能:创建一个间歇定时器
参数:参数1 函数名或者匿名函数 参数2时间
返回值:定时器的id. 可以根据该id停止定时器
var timer =setInterval(函数名/匿名函数,时间(毫秒))
 
clearInterval(id)
停止指定的定时器
 
 
<button onclick="stop()">吃药</button>
<button onclick="goon()">继续</button>
<button onclick="stopBoom()">拆除炸弹</button>
 
var timer = setInterval(fun,2000);
function fun(){
console.log("犯病!"); 间歇定时器
}
 
function stop(){
clearInterval( timer ); 停止指定的定时器
}
 
function goon(){
将返回的定时器的id赋值给timer这个全局变量
timer = setInterval(fun,2000); 重新启动定时器
}
 
 
js中只有创建定时器和停止定时器,没有继续定时器
 
 
 
延时定时器:过固定时间执行
setTimeout(函数名/匿名函数,时间)
功能:创建一个延时定时器。
参数:参数1 函数名或者匿名函数 参数2时间
返回值:定时器的id. 可以根据该id停止定时器
 
var timer2 = setTimeout(fun2,5000);
function fun2(){
console.log("爆炸!");
}
经过5s时间生效
 
function stopBoom(){
clearTimeout( timer2 );
}
停止延时定时器

以上是关于bom的主要内容,如果未能解决你的问题,请参考以下文章

php无bom和有bom的文件编码有啥区别

BOM管理体系

DOM和BOM

bom

BOM学习

U8 BOM数据结构