BOM 操作
浏览器对象模型
可以操作浏览器的方法
所谓的操作浏览器的方法,是各个浏览器厂商提供给我们的
浏览器厂商允许我们操作浏览器,我们才可以操作,如果不允许,就不能操作
各个浏览器厂商,都有自己的特点,因此,BOM操作,有兼容性需要考虑
浏览器三大弹窗操作
1. 提示框 / 警告框
window.alert('弹出内容\n警告内容');
转义符:类似于 HTML中的 字符实体 是为了解决 输入内容和JavaScript代码的冲突.
例如,要在弹框中,实现换行
\n 换行
\' 单引号
\" 双引号
\r 回车
\t 横向跳格 (Ctrl-I)
\\ 反斜杠
\f 纵向的间隔
注意:各个浏览器对转移符的支持效果不同,执行效果也不一样
我们只要记住前三个就可以了
2. 输入框
作用: window.prompt(‘提示内容’);
弹出一个输入框,可以输入数据,()中定义的内容,作为输入数据的提示内容
输入框执行结果,可以使用变量来存储
存储的内容,是数据的数据内容
问题: 输入的数据,存储的方式是,字符串类型
如果是输入数值,需要计算,必须把数据类型转化为数值
var userName = window.prompt('请输入账号');
var userPwd = window.prompt('请输入密码');
console.log(userName,userPwd);
将 纯数字的 字符串 转化为数值类型方法
(1) 方法1 : parseInt() 获取整数部分
var res1 = parseInt(window.prompt('请输入密码'));
console.log(res1);
(2) 方法2 : 执行非 加法的 不影响数值的 运算
var res2 = window.prompt('请输入密码') - 0 ;
var res2 = window.prompt('请输入密码') * 1 ;
var res2 = window.prompt('请输入密码') / 1 ;
console.log(res2);
(3) 方法3 : 在数值前,添加 + 正号 / - 符号
获取 正数 的部分
但是要注意,正数和负数的问题
+ 正号 : 正数获取的正数结果 负数获取的是负数结果
- 符号 : 正数获取的负数结果 负数获取的是正数结果
var res2 = -window.prompt('请输入密码');
console.log(res2);
3. 确认框
作用: window.confirm(‘提示内容’);
点击确定按钮,window.confirm()执行结果,返回值是 true
点击取消按钮,window.confirm()执行结果,返回值是 false
可以根据,返回值,执行不同的操作
var res = window.confirm('请问您是否确定删除这个邮件');
console.log(res);
bom操作 获取浏览器滚动条高度
获取 浏览器滚动条高度
获取浏览器滚动条,分为宽度和高度两个属性
获取浏览器滚动条的高度,宽度
获取高度的兼容性
有没有 文档类型声明 < ! DOCTYPE html >
有 : document.documentElement.scrollTop ;
没有 : document.body.scrollTop;
如果获取方式错误,程序不会报错,只是获取的结果是0
实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明
做 兼容处理
var 变量 = 方式1 || 方式2 ;
当方式1有结果时,数值会转化为 true , 方式2,就不会执行
变量中存储的是方式1,获取的结果
当方式1结果是0时,数值会转化为 false , 方式2会执行
变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果
最终的效果,就是确保变量中,始终有数值存储,
<style>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
var height1 = document.documentElement.scrollTop;
var height2 = document.body.scrollTop;
console.log(height1 , height2);
// 实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明
// 做 兼容处理
// var 变量 = 方式1 || 方式2 ;
// 当方式1有结果时,数值会转化为 true , 方式2,就不会执行
// 变量中存储的是方式1,获取的结果
// 当方式1结果是0时,数值会转化为 false , 方式2会执行
// 变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果
// 最终的效果,就是确保变量中,始终有数值存储,
// console.log(document.documentElement.scrollTop);
// console.log(document.body.scrollTop);
// 浏览器上卷的高度
// var height = document.documentElement.scrollTop || document.body.scrollTop
// 浏览器移动的宽度
// var width = document.documentElement.scrollLeft || document.body.scrollLeft;
// console.log(height , width);
// 还可以利用属性来设定
// 设定滚动条,移动的宽度和高度
// 直接设定数值就可以,不要加PX
document.documentElement.scrollTop = 500;
document.documentElement.scrollLeft = 500;
浏览器滚动条操作demo
<head>
<style>
* {margin: 0;padding: 0;}
body {height: 5000px;}
.box {width: 100%;
position: fixed;
top: 0;
display: none;}
.top {width: 800px;
margin: 0 auto;
line-height: 100px;}
img { height: 50px;
vertical-align: middle;
margin-right: 30px;}
input {height: 70px;
width: 500px;}
button {height: 70px;
width: 100px;}
.sidebar {
width: 30px;
font-size: 30px;
position: fixed;
right: 100px;
top: 400px;
display: none;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="top" id="top">
<img src="./1.png" alt=""><input type="text"><button>百度一下</button>
</div>
</div>
<div class="sidebar" id="sidebar">
侧边栏内容
</div>
<script>
// 通过id属性值,来获取标签对象
// oDiv,就是id属性值是top的标签
// 之间是通过id属性值,直接操作标签
// 现在直接放在事件中,不能使用,必须要先获取标签对象
// 语法: document.getElementById('标签id属性值');
// 一般使用class来定义样式
// 一般使用id来获取标签对象
var oDiv1 = document.getElementById('box');
var oDiv2 = document.getElementById('sidebar');
// console.log(oDiv1 , oDiv2);
// 通过事件来实现效果
// window.onscroll 页面滚动条事件
// 当页面滚动条发生改变时,会触发需要执行的程序
window.onscroll = function () {
// 当滚动条,也就是页面位置,发生改变时,会触发执行的程序
// 获取当前浏览器上卷的高度
var height = document.documentElement.scrollTop || document.body.scrollTop;
// 如果浏览器上卷的高度,大于 500 时 , 执行程序
if (height > 500) {
// 设定 div 的显示属性为 block ,就可以显示了
oDiv1.style.display = 'block';
oDiv2.style.display = 'block';
} else {
// 设定 高度 <= 500 是,让div消失隐藏
oDiv1.style.display = 'none';
oDiv2.style.display = 'none';
}
}
// 后续将jQuery时,会讲动画效果
// 当前使用css也是可以实现,不过执行效果不如jQuery