JS入门到精通详解(6)
阿里云国际版折扣https://www.yundadi.com |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
BOM的概念和常用API
BOM
BOMBrowser Object Model 浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操作哪些内容
获取一些浏览器的相关信息窗口的大小
操作浏览器进行页面跳转
获取当前浏览器地址栏的信息
操作浏览器的滚动条
浏览器的信息浏览器的版本
让浏览器出现一个弹出框alert / confirm / prompt
...
BOM 的核心就是 window 对象
window 是浏览器内置的一个对象里面包含着操作浏览器的方法
innerHeight / innerWidth 获取浏览器窗口的尺寸
window.innerHeight 表示窗口内容区域浏览器窗口的高度包含滚动条的。
window.innerWidth: 表示窗口内容区域浏览器窗口的宽度包含滚动条的。
var windowHeight = window.innerHeight
console.log(windowHeight)
var windowWidth = window.innerWidth
console.log(windowWidth)
onload / onresize / onscroll 事件
onload : 加载事件
是在页面所有资源加载完毕后执行的
window.onload = function () {
console.log('页面已经加载完毕')
}
onscroll : 滚动事件
这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
或者鼠标滚轮滚动的时候触发
注 必须有滚动条时才可触发
window.onscroll = function () {
console.log('浏览器滚动了')
}
浏览器滚动的距离
浏览器内的内容即然可以滚动那么我们就可以获取到浏览器滚动的距离
思考一个问题
浏览器真的滚动了吗
其实我们的浏览器是没有滚动的是一直在那里
滚动的是什么是我们的页面
所以说其实浏览器没有动只不过是页面向上走了
所以这个已经不能单纯的算是浏览器的内容了而是我们页面的内容
所以不是在用 window 对象了而是使用 document 对象
浏览器卷去的尺寸 scrollTop / scrollLeft
scrollTop
获取的是页面向上滚动的距离
一共有两个获取方式
document.body.scrollTop
document.documentElement.scrollTop
window.onscroll = function () {
console.log(document.body.scrollTop)
console.log(document.documentElement.scrollTop)
}
两个都是获取页面向上滚动的距离
区别
IE 浏览器
没有 DOCTYPE 声明的时候用这两个都行
有 DOCTYPE 声明的时候只能用 document.documentElement.scrollTop
Chrome 和 FireFox
没有 DOCTYPE 声明的时候用 document.body.scrollTop
有 DOCTYPE 声明的时候用 document.documentElement.scrollTop
scrollLeft
获取页面向左滚动的距离
也是两个方法
document.body.scrollLeft
document.documentElementLeft
window.onscroll = function () {
console.log(document.body.scrollLeft)
console.log(document.documentElement.scrollLeft)
}
两个之间的区别和之前的 scrollTop 一样
练习
回到顶部
顶部悬浮
alert / confirm / prompt 弹出层
alert() : 在浏览器中弹出一个警告框。
confirm() : 在浏览器中弹出一个选择框。
prompt() : 在浏览器中弹出一个输入框。
练习面试题
在界面上弹出一个带输入的提示框,只能输入数字,如果输入的数字大于10,点击确定以后弹出提示框,提示我们是否进行输入的数 + 10, confirm("是否进行输入的数 + 10")
<1>如果点击确定,输出表达式和结果,
<2>如果点击取消,重新弹出带输入的提示框重复上述操作
如果输入的数小于10,直接弹出警告框,无法运算
点击取消,就不进行后面操作。直接退出循环
location / history
location 对象
页面跳转
window.location
location.href
location.assign()
window.location = 'http://www.taobao.com'
location.href = 'http://jd.com';
location.assign('http://www.sina.com.cn');
刷新页面 基本用不到
location.reload([true]) true: 不经过浏览器缓存从远程服务器加载数据。 false(默认值):从本地缓存中加载数据。
history 对象
页面刷新 : history.go(0)
后退 history.back()
前进history.forword()
window.scrollTo()
语法
window.scrollTo(options)
参数
x : 文档中的横轴坐标
y : 文档中的纵轴坐标
options : 一个包含三个属性的对象
top : 等同于 y
left : 等同于 x
behavior 类型 String表示滚动行为支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
window.open / window.close
open() : 打开新窗口
close : 关闭当前窗口
本地存储 localStorage / sessionStorage的基本使用
localStorage : 本地存储
理论上没有大小限制实际上浏览器限制大小在5M
数量没有限制
有效期长期有效
不可在浏览器的隐私模式下查看安全
sessionStorage : 会话存储
理论上没有大小限制实际上浏览器限制大小在5M
数量没有限制
会话结束时即关闭浏览器退出页面时数据消失
不可在浏览器的隐私模式下查看安全
如何在本地存储或会话存储中添加数据
window.localStorage.key = value
window.sessionStorage.key = value
window.localStorage['key'] = value
window.sessionStorage['key'] = value
window.localStorage.setItem(key,value)
window.sessionStorage.setItem(key,value)
如何获取本地存储或会话存储中的数据
window.localStorage.key
window.sessionStorage.key
window.localStorage['key']
window.sessionStorage['key']
window.localStorage.getItem(key)
window.sessionStorage.getItme(key)
如何删除本地存储或会话存储中的数据
window.localStorage.removeItem(属性名)
window.sessionStorage.removeItem(key)
清空
window.localStorage.clear()
window.sessionStorage.clear()
获取所有的信息
key() : 获取key
length : 长度
for(let i = 0,len = window.localStorage.length;i <len ;i ++){
let key = window.localStorage.key下标(i); //获取所有的key
let value = window.localStorage.getItem(key); //获取所有的value
}
DOM的基本概念及操作
获取元素
document.getElementById('id') : 通过id获取元素对象
document.getElementsByTagName('标签名') : 通过标签名获取元素对象的集合返回伪数组。
document.getElementsByName('name属性') : 通过name属性获取元素对象的集合返回伪数组。
document.getElementsByClassName('class名') : 通过class属性获取元素对象的集合返回伪数组 (IE9以下不兼容)
布局一般用id细节用class
//byClassName的兼容
function byClassName(obj,className){
if(obj.getElementsByClassName){
//支持
return obj.getElementsByClassName(className);
}else{
//不支持
//1. 获取所有节点对象
var eles = obj.getElementsByTagName('*');
//创建一个空数组
var arr = [];
//遍历所有对象
for(var i = 0,len = eles.length;i < len;i ++){
//检测
if(eles[i].className === className){
arr.push(eles[i]);
}
}
return arr;
}
}
document.querySelector('选择器') : 通过选择器获取元素对象。 IE8以下不兼容
document.querySelectorAll('选择器') : 获取选择器获取元素对象的集合返回伪数组。IE8以下不兼容
document.documentElement 获取html