BOM:浏览器对象模型
BOM的核心就是Window对象
window是浏览器内置的一个对象,里面包含着操作浏览器的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//特殊的特质:
//无处不在
//全局变量全部和window有关
// var a = 10;
// //用一个特殊的形式 给window添加了一个属性a 赋值为10
// window.a=10;
// console.log(a);
//
//
// console.log(window.a);
//
//所有的 不带有前缀全局变量的时候,前面都可以带有window,JavaScript默认吧window.这个代码给省略了
// function foo(){
//
// }
//
// window.foo();
//伪全局变量和全局变量有啥区别
//伪全局变量是可以删除的
//全局变量不可以被删除
// a = 10;
// delete window.a;
//
// console.log(a);
//this => window
//this的指向规则就是函数的调用者
// function foo(){
// console.log(this);
// }
//
// foo();
</script>
</head>
<body>
</body>
</html>
BOM的相关操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//这三个方法都会阻塞代码执行
alert("hello world");
//一下两个有返回值
confirm("hello world");
prompt("hello world");
</script>
</head>
<body>
</body>
</html>
window身上的常用子对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
console.log(location);
//href:整个连接;取值;赋值
console.log(location.href);
//错误示范:
//location.href = "www.baidu.com";
//location.href 如果在使用的时候不添加对应的协议只会更改一级(文件名)的字符串
//加上协议:
//fill://
//http:// https://
// document.onclick = function(){
// location.href = "https://www.baidu.com";
// }
//reload();刷新
//reload(true);底层刷新
location.reload();
</script>
</head>
<body>
</body>
</html>
浏览器的历史记录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//历史记录:前进后退的一个历史
document.onclick = function(){
history.go(-1);
}
back.onclick=function(){
history.go(-1);
}
forward.onclick = function(){
history.go(1);
}
//history.length 查看当前浏览器一共多少条记录
</script>
</head>
<body>
<button id="back">后退一步</button>
<button id="forword">前进一步</button>
</body>
</html>
window事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.onload => 当浏览器加载结束之后:包括图片的加载,文档资源的加载,必须全部结束之后才能执行
//加载没有完成直接就获取了,回到
//console.log=function (){}
onload = function(){
console.log(img.length,img.height);
}
</script>
</head>
<body>
<img id="img" src="image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=image&step_word=&hs=2&pn=0&spn=0&di=35530&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2104351895%2C3299575660&os=622034002%2C1393103566&simid=3152243996%2C3920695690&adpicid=0&lpn=0&ln=1828&fr=&fmq=1592813094975_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined©right=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimages6.fanpop.com%2Fimage%2Fphotos%2F40500000%2Fnewclubimage-despicable-me-minions-40532353-5038-4325.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fzi_z%26e3Buwgr5r_z%26e3Bv54AzdH3Fvs7kfAzdH3F1jfrtvwksj-4j-4tgt5gfAzdH3Ft4w2jfAzdH3F9acndncnAzdH3FptpsjAzdH3Fgjovs7kt4w2j&gsm=1&rpstart=0&rpnum=0&islist=&querylist=&force=undefined
"/>
</body>
</html>
页面信息的获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#jingubang{
height: 3000px;
}
</style>
</head>
<body>
<img id="img" src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt="">
<div id="jingubang"></div>
<script>
// scrollTop
// 1. 浏览器窗口;
// 2. 文档;
// 页面卷动的时候监测一下 scrollTop 的值;
window.onscroll = function(){
// 打印scrollTop;
// 获取scrollTop 的方式 ;
// document.body; => 获取body元素;
// document.documentElement => 获取html元素;
// console.log(document.body,document.documentElement);
// 对于失败的获取 => scrollTop 会取值为 0 ;
// 对于成功的获取 => scrollTop 会为非0;
// document.body || document.documentElement
// 0 => false || document.documentElement
// 非0 => true || document.documentElement;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(scrollTop);
}
</script>
</body>
</html>
吸顶菜单效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 80px;
background: #ddd;
}
.banner{
margin: 10px auto;
height: 400px;
width: 1130px;
background: yellowgreen;
}
.nav{
height: 100px;
background: #f99;
}
.nav-back{
position: relative;
height: 100px;
z-index: -1;
display: none;
}
.content{
height: 3000px;
background: antiquewhite;
font-size: 40px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="nav" id="nav"></div>
<div class="nav-back" id="nav_back"></div>
<div class="content">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</div>
<script>
// 在合适的时候,改变nav 的样式,让它吸顶;
// 在合适的时候, 改回nav 的样式,让它还原;
// 在合适的时候 ? 通过计算得知,这个高度是 500;
// scrollTop;
// var nav_top_height = 500;
// // 当前nav的状态; normal | fixed;
// var nav_status = "normal";
// window.onscroll = function(){
// // 在事件之中进行监测监测是否是合适的时候;
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// if(scrollTop >= nav_top_height && nav_status === "normal"){
// console.log("让 nav 固定定位");
// // 改变元素的状态;
// nav_status ="fixed";
// }
// if(scrollTop < nav_top_height && nav_status === "fixed"){
// console.log("让 nav 还原");
// nav_status ="normal";
// }
// }
// 前提 : 我们要改变的就是元素的样式 ;
// 更改元素样式会对页面性能造成巨大的伤害;
// 1. 回流 ; 让页面重新排列;
// 2. 重绘 ; 让某个元素宽高背景色发生改变;
// var nav_top_height = 500;
// // 当前nav的状态; normal | fixed;
// var nav_status = "normal";
// window.onscroll = function(){
// // 在事件之中进行监测监测是否是合适的时候;
// var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// if(scrollTop >= nav_top_height && nav_status === "normal"){
// // console.log("让 nav 固定定位");
// // 改变元素的状态;
// nav_status = "fixed";
// }
// if(scrollTop < nav_top_height && nav_status === "fixed"){
// // console.log("让 nav 还原");
// nav_status = "normal";
// }
// }
// 改变元素样式;
var nav_top_height = 500;
// 当前nav的状态; normal | fixed;
var nav_status = "normal";
window.onscroll = function(){
// 在事件之中进行监测监测是否是合适的时候;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if(scrollTop >= nav_top_height && nav_status === "normal"){
// console.log("让 nav 固定定位");
// 改变元素的状态;
nav_status = "fixed";
nav.style.cssText = "position:fixed;width:100%;top:0";
// 让占位元素显示出来;
nav_back.style.cssText = "display:block";
}
if(scrollTop < nav_top_height && nav_status === "fixed"){
// console.log("让 nav 还原");
nav_status = "normal";
nav.style.cssText = "";
// 隐藏占位元素;
nav_back.style.cssText = "display:none";
}
}
</script>
</body>
</html>
回到顶部功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
height: 80px;
background: #ddd;
}
.banner{
margin: 10px auto;
height: 400px;
width: 1130px;
background: yellowgreen;
}
.nav{
height: 100px;
background: #f99;
}
.nav-back{
position: relative;
height: 100px;
z-index: -1;
display: none;
}
.content{
height: 3000px;
background: antiquewhite;
font-size: 40px;
}
#go_back{
width: 40px;
padding: 5px;
height: 100px;
position: fixed;
right: 5%;
bottom: 5%;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="nav" id="nav"></div>
<div class="nav-back" id="nav_back"></div>
<div class="content">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</div>
<button id="go_back">回到顶部</button>
<script>
// scrollTo; 这个API是属于浏览的规范的;
// 推荐使用;
// scrollTo(x,y)
// go_back.onclick = function(){
// scrollTo(0,0);
// }
// scrollTo( { left : , top : , beavhiver})
// go_back.onclick = function(){
// scrollTo({
// top : 0,
// // 运动的形式;
// // behavior : "smooth"
// });
// }
// go_back.onclick = function(){
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
</script>
</body>
</html>