一、jsBom简介
jsBom = javascript browser object model
BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器.
二、Bom输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bom输出</title>
</head>
<body>
</body>
<script type="text/javascript">
alert(123);
console.log('luffy');
var a = prompt('luffy city');
var b = prompt('luffy','hello world');
console.log(a);
console.log(b);
var c = confirm('学习 bom');
console.log(c); // true false
//调打印机
function printLuffy() {
print()
}
printLuffy();
//find
function findLuffy() {
var m = confirm('学习');
find(m)
}
findLuffy()
/*
* 总结：
* Bom输出
* 1.alert()
* 2.console.log()
* 3.prompt()
* 4.confirm()
*
* */
</script>
</html>
三、open close方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open close方法</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('http://www.baidu.com');
//打开空白页
// open('about:blank','_self');
open('about:blank','_target');
};
closeBtn.onclick = function () {
if(confirm('是否关闭')){
close();
}
};
/* 总结：
* open('https://www.baidu.com');//打开百度网页，winodow对象可以省略
//行间的js中的window不能省略
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
//打开空白页面
open('about:blank',"_self")
//关闭当前页面
close();
//行间js中的window还是不能省略
<button onclick="window.close()">关闭</button>
* */
</script>
</html>
四、其他的Bom对象和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他得Bom对象和方法</title>
</head>
<body>
</body>
<script type="text/javascript">
alert('刷新了');
//返回浏览器的用户设备信息 pc 移动端
console.log(window.navigator.userAgent);
//获取用户本地信息
console.log(window.location);
//经常使用的一个方法 跳转一个网址
window.location.href = 'https://luffycity.com';
// 全局刷新,尽量少用全局刷新 后面会学习ajax来实现局部刷新操作
window.location.reload();
setTimeout(function () {
window.location.reload();
},3000)
</script>
</html>
五、client系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client系列</title>
<style type="text/css">
.box{width: 200px;height: 200px;position: absolute;border: 20px solid red;
margin: 10px 0 0 0;padding: 10px;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop); // 20
console.log(oBox.clientLeft); // 20
console.log(oBox.clientWidth); // 220
console.log(oBox.clientHeight); // 220
/*总结：
* clientTop 内容区域到边框顶部的距离
* clientLeft 内容区域到边框左部的距离
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
*
* */
</script>
</html>
六、屏幕的可视区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕得可视区域</title>
</head>
<body>
</body>
<script type="text/javascript">
<!--屏幕得可视区域-->
window.onload = function () {
console.log(document.documentElement.clientTop); // 0
console.log(document.documentElement.clientLeft); // 0
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>
七、offset系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset系列</title>
</head>
<body>
<div style="position: relative">
<div id="box" style=" 200px;height: 200px;border: 1px solid red;
padding: 10px;margin: 10px;position: absolute;top: 20px;left: 30px;"></div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box.offsetTop); // 30
console.log(box.offsetLeft); // 40
console.log(box.offsetWidth); // 222
console.log(box.offsetHeight); // 222
/* 总结：
* offsetTop: 如果盒子没有设置定位，到浏览器顶部得距离,如果盒子设置了定位，那么以父盒子为基准得top值+margin；
* offsetLeft: 如果盒子没有设置定位，到浏览器左部得距离，如果盒子设置了定位，那么以父盒子为基准得left值+margin；
* offsetWidth: 内容+padding+border
* offsetHeight: 内容+padding+border
*
* */
</script>
</html>
八、scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll系列</title>
<style type="text/css">
*{ padding: 0; margin: 0;}
</style>
</head>
<body style=" 2000px; height: 2000px;">
<div style="height: 200px; background-color: red;"></div>
<div style="height: 200px; background-color: yellow;"></div>
<div style="height: 200px; background-color: green;"></div>
<div style="height: 200px; background-color: blue;"></div>
<div style="height: 200px; background-color: gray;"></div>
<div id="scroll" style=" 200px; height: 200px;border:1px solid red; overflow: auto;padding: 10px;margin: 20px;">
<p>
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
</p>
</div>
</body>
<script type="text/javascript">
//实时监听滚动事件
window.onscroll = function () {
console.log('上',document.documentElement.scrollTop); // 0 200 ...
console.log('左',document.documentElement.scrollLeft); // 0 200 ...
console.log('宽',document.documentElement.scrollWidth); // 2000
console.log('高',document.documentElement.scrollHeight); // 2000
};
var s = document.getElementById('scroll');
s.onscroll = function () {
console.log('上',s.scrollTop); // 0 100 ...
console.log('左',s.scrollLeft); // 0
console.log('宽',s.scrollWidth); // 203
console.log('高',s.scrollHeight); // 498 内容得高度 + padding 不包含margin
}
</script>
</html>