JavaScript BOM 操作
BOM 操作
BOM
含义: Brower Object Model 浏览器对象模型
window.open()
window.close() 关闭网页
confirm('是否关闭网页!') 弹出确认框
location对象
setInterval(function(){
//页面全局刷新 不建议 使用 可以用它调试
//更希望的是 局部刷新（ajax技术 与后端交互的核心技术）
location.reload();
},2000)
<body>
<!--行间的js中的open() window不能省略 第二个参数的默认值 _blank-->
<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','_self')
//打开空白页面
// open('about:blank',"_self")
};
closeBtn.onclick = function(){
// 弹出对话 选项框 同意为 true 不同意为 false
if(confirm("是否关闭？")){
close();
}
}
</script>
打开新网址的三种方式
<a href='http://www.luffycity.com/' target = '_self'>路飞</a>
window.location.open('http://www.luffycity.com/','_blank');
window.location.href = 'http://www.luffycity.com/'; //在当前网页打开网址
window.open('about:blank', "_self") // 打开一个新页面 _self 在本页面 打开 _blank 另一个页面
pathname
search
href
前后端交互的方式
client,offset,scroll系列的内容
client
/*
clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度
clientWidth 内容区域+左右padding 可视宽度 不包含border
clientHeight 内容区域+ 上下padding 可视高度
*/
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);
document.documentElement 获取的是html标签
-
屏幕的可视区域
// 屏幕的可视区域
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);
}
}
offset
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)
}
scroll
window.onload = function () {
//实施监听滚动事件
window.onscroll = function () {
// console.log(1111);
// 页面卷起的高度
console.log('上' + document.documentElement.scrollTop);
console.log('左' + document.documentElement.scrollLeft);
console.log('宽' + document.documentElement.scrollWidth); //width+padding+border
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);
}
}
滚动页面导航栏 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 40px;
background-color: rgba(0,0,0,.5);
}
#search{
width: 100%;
height: 1000px;
position: absolute;
top: 300px;
left: 500px;
}
.fixed{
width: 100%;
height: 100px;
background-color: red;
position: fixed;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body style="height: 2000px;">
<div class="header">
</div>
<div id="search">
<form action="">
<input type="text">
<input type="submit">
</form>
</div>
<div class="fixed">
</div>
<script>
var searchDiv = document.getElementById('search');
var fixedDiv = document.getElementsByClassName('fixed')[0];
var offsettop = searchDiv.offsetTop;
console.log(offsettop);
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop;
// console.log(document.documentElement.scrollTop);
if (scrollTop >= offsettop){
fixedDiv.style.display = 'block';
}else{
fixedDiv.style.display = 'none';
}
}
</script>
</body>
</html>
