15-BOM、16-client、offset、scroll系列、17-案例
15-BOM
BOM的介绍
JavaScript基础分为三个部分：
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
什么是BOM
BOM：Browser Object Model，浏览器对象模型。
BOM的结构图:
从上图也可以看出：
-
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
-
DOM是BOM的一部分。
window对象：
-
window对象是JavaScript中的顶级对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，可以省略window。
下面讲一下 BOM 的常见内置方法和内置对象。
弹出系统对话框
比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。
系统对话框有三种：
alert(); //不同浏览器中的外观是不一样的 confirm(); //兼容不好 prompt(); //不推荐使用
打开窗口、关闭窗口
1、打开窗口：
window.open(url,target)
参数解释：
-
url：要打开的地址。
-
target：新窗口的位置。可以是：
_blank、_self、_parent父框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
//open('https://www.baidu.com')
//打开空白页面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
}
</script>
</html>
location对象
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
location对象的属性
-
href：跳转
-
hash 返回url中#后面的内容，包含#
-
host 主机名，包括端口
-
hostname 主机名
-
pathname url中的路径部分
-
protocol 协议 一般是http、https
-
search 查询字符串
location.href属性举例：
举例1：点击盒子时，进行跳转。
<body> <div>smyhvae</div> <script> var div = document.getElementsByTagName("div")[0]; div.onclick = function () { location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接 // window.open("http://www.baidu.com","_blank"); //方式二 } </script> </body>
举例2：5秒后自动跳转到百度。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
location对象的方法
location.reload()：重新加载
setTimeout(function(){ //3秒之后让网页整个刷新 window.location.reload(); },3000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="./10-test.html">下一页</a>
<script>
//需求： 5秒之后打开百度
setTimeout(function() {
window.open('http://www.baidu.com','_self');
},5000);
console.log(window.location);
// window.location.href = 'http://www.baidu.com'; //跳转到百度界面
</script>
</body>
</html>
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
-
userAgent：系统，浏览器)
-
platform：浏览器支持的系统，win/mac/linux
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);
history对象
1、后退：
-
history.back()
-
history.go(-1)：0是刷新
2、前进：
-
history.forward()
-
history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：
案列：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id = 'btn'>上一页</button>
<script>
alert(1);
document.getElementById('btn').onclick = function () {
//后退
// history.go(-1);
// history.go(0);
// 尽量少用 可以做测试 全局刷新 、 局部刷新必须使用ajax（ajax）
window.location.reload();
}
</script>
</body>
</html>
16-client、offset、scroll系列
1、client系列
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; border: 10px solid red; /*margin: 10px 0px 0px 0px;*/ padding: 80px; } </style> </head> <body> <div class="box"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </div> </body> <script type="text/javascript"> /* * clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度 * clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度 * clientWidth 内容区域+左右padding 可视宽度 * clientHeight 内容区域+ 上下padding 可视高度 * */ var oBox = document.getElementsByClassName('box')[0]; console.log(oBox.clientTop); console.log(oBox.clientLeft); console.log(oBox.clientWidth); console.log(oBox.clientHeight)； </script> </html>
2.屏幕的可视区域
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> // 屏幕的可视区域 window.onload = function(){ // document.documentElement 获取的是html标签 console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); // 窗口大小发生变化时，会调用此方法 window.onresize = function(){ console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); } } </script> </html>
3.offset系列
代码如下，注释都挺清楚的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body style="height: 2000px"> <div> <div class="wrap" style=" width: 300px;height: 300px;background-color: green"> <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;"> </div> </div> </div> </body> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box') /* offsetWidth占位宽 内容+padding+border offsetHeight占位高 * offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值 * offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值 * */ console.log(box.offsetTop) console.log(box.offsetLeft) console.log(box.offsetWidth) console.log(box.offsetHeight) } </script> </html>
4.scroll系列
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} </style> </head> <body style="width: 2000px;height: 2000px;"> <div style="height: 200px;background-color: red;"></div> <div style="height: 200px;background-color: green;"></div> <div style="height: 200px;background-color: yellow;"></div> <div style="height: 200px;background-color: blue;"></div> <div style="height: 200px;background-color: gray;"></div> <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;"> <p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城 路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城 路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城 路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城 </p> </div> </body> <script type="text/javascript"> window.onload = function(){ //实施监听滚动事件 window.onscroll = function(){ // console.log(1111) // console.log('上'+document.documentElement.scrollTop) // console.log('左'+document.documentElement.scrollLeft) // console.log('宽'+document.documentElement.scrollWidth) // console.log('高'+document.documentElement.scrollHeight) } var s = document.getElementById('scroll'); s.onscroll = function(){ // scrollHeight : 内容的高度+padding 不包含边框 console.log('上'+s.scrollTop) console.log('左'+s.scrollLeft) console.log('宽'+s.scrollWidth) console.log('高'+s.scrollHeight) } } </script> </html>
17-案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
width: 100%;
height: 80px;
background-color: red;
}
.content{
width: 100%;
height: 1000px;
background-color: purple;
/*position: relative;*/
}
.fixTop{
width: 100%;
height: 100px;
background-color: green;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.input{
width: 400px;
height: 60px;
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -200px;
top: 150px;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="content">
<div class="input"></div>
</div>
<div class="fixTop" style="display: none;"></div>
<script>
window.onload = function() {
var fromTop = document.getElementsByClassName('input')[0].offsetTop;
var fixBox = document.getElementsByClassName('fixTop')[0];
console.log(fromTop);
var count = 0;
var timer = null;
window.onscroll = function() {
var htmlTop = document.documentElement.scrollTop;
console.log(htmlTop);
if (htmlTop >= fromTop) {
clearInterval(timer);
timer = setInterval(function () {
count+=10;
fixBox.style.display = 'block';
// fixBox.style.opacity = count; 透明度
fixBox.style.height = count+'px';
if (count == 100) {
clearInterval(timer);
}
},1)
}else{
fixBox.style.display = 'none';
}
}
}
</script>
</body>
</html>
模拟百度导航栏滚动监听
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: none;
}
body{
/*padding-top: 80px;*/
}
.header{
width: 100%;
height: 70px;
background-color: black;
/*display: none;*/
}
.w{
width: 1210px;
overflow: hidden;
margin: 0 auto;
}
.header ul li{
float: left;
width: 242px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: blue;
}
.header ul li a{
display: block;
width: 242px;
height: 70px;
color: #fff;
}
/*固定导航栏*/
.header-fix{
width: 100%;
height: 80px;
background-color: white;
box-shadow: 0 0 5px #888;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*margin-bottom: 10px;*/
}
.header-fix .logo{
float: left;
width: 117px;
height: 57px;
padding-top: 23px;
}
.header-fix .fm{
float: left;
width: 700px;
height: 80px;
margin-left: 100px;
}
.fm input[type='text']{
float: left;
width: 578px;
height: 50px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
margin-top: 15px;
padding-left: 20px;
font-size: 20px;
}
.fm input[type='submit']{
float: left;
width: 100px;
height: 52px;
background-color: #38f;
position: relative;
top: 15px;
color: #fff;
line-height: 52px;
font-size: 18px;
}
.box1{
width: 100%;
height: 200px;
background-color: red;
}
.box2{
width: 100%;
height: 300px;
background-color: green;
}
</style>
</head>
<body style="height: 2000px">
<div class="header">
<div class="w">
<ul>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">网站导航</a></li>
</ul>
</div>
</div>
<div class="header-fix">
<div class="w">
<div class="logo">
<img src="./logo_top.png" alt="">
</div>
<form class="fm">
<input type="text" name="">
<input type="submit" name="" value="百度一下">
</form>
</div>
</div>
<div class="box1"></div>
<div class="box2"></div>
<script type="text/javascript">
window.onload = function(){
var box2Height = document.getElementsByClassName('box2')[0];
var fixBox = document.getElementsByClassName('header-fix')[0];
var headerBox = document.getElementsByClassName('header')[0];
window.onscroll = function(){
console.log(box2Height.offsetTop);
if (document.documentElement.scrollTop >=box2Height.offsetTop) {
fixBox.style.display = 'block';
document.body.style.paddingTop = '80'+ 'px';
headerBox.style.display = 'none';
}else{
fixBox.style.display = 'none';
document.body.style.paddingTop = '0'+ 'px';
headerBox.style.display = 'block';
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号