JavaScript进阶知识(BOM)-快速入门篇
Posted Henrik-Yao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript进阶知识(BOM)-快速入门篇相关的知识，希望对你有一定的参考价值。
BOM
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
1.Window：窗口对象
Window：窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<img id="demo" src="images/d.png">
<script>
//弹窗
alert("hello window")
//弹窗带确认和取消
confirm("您确定要退出吗")
//弹窗带输入框
let str = prompt("请输入用户名")
//获取输入框内容并且弹出
alert(str)
</script>
</body>
</html>
效果
与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input id="open" type="button" value="打开百度">
<input id="close" type="button" value="关闭百度">
<script>
//通过id获取按钮元素
let demo = document.getElementById("open")
//定义新弹窗对象
var newWindow
//绑定单击事件
demo.onclick=function (){
//单击事件对应的操作
newWindow=open("https://www.baidu.com/")
}
//通过id获取关闭按钮元素
let demo2 = document.getElementById("close")
//绑定单击事件
demo2.onclick=function (){
//关闭新窗口
newWindow.close()
}
</script>
</body>
</html>
效果
与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script>
//一次性定时器
let id1=setTimeout("fun()",3000)
//定义定时器对应函数
function fun(){
alert("boom~~")
}
//取消定时器
//clearTimeout(id1)
//循环定时器
let id2=setInterval(fun,2000)
//取消定时器
clearInterval(id2)
</script>
</body>
</html>
效果
属性
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
注意
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略。 方法名();
2.Location地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="btn2" value="我的博客">
<script>
//reload刷新页面
let btn = document.getElementById("btn")
//给btn绑定单击事件
btn.onclick=function (){
//刷新页面
location.reload()
}
//获取href
let href = location.href
//弹出获取的内容
alert(href)
//跳转
let btn2 = document.getElementById("btn2")
//给btn2绑定单击事件
btn2.onclick=function (){
//跳转链接
location.href="https://blog.csdn.net/qq_50216270"
}
</script>
</body>
</html>
效果
自动跳转demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
//设置样式
<style>
//设置p标签样式
p{
text-align: center;
}
//设置span标签样式
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页。。。
</p>
<script>
//设置倒计时秒数
var second=5
//设置倒计时函数
function showTime(){
//每次进入函数都将时间减1s
second--;
//当时间减完后自动跳转
if(second<=0){
location.href="https://www.baidu.com/"
}
//根据id获取span标签内容
let time=document.getElementById("time")
//用innerHTML更改span内容
time.innerHTML=second+""
}
//绑定循环函数，每1s调用一遍函数
setInterval(showTime,1000)
</script>
</body>
</html>
3.History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录">
<input type="button" id="forward" value="前进">
<input type="button" id="back" value="后退">
<script>
//通过id获取按钮元素
let btn = document.getElementById("btn")
//绑定单击事件的同时获取历史记录长度
let length=btn.onclick=history.length
//弹出历史记录长度
alert(length)
//根据id获取前进按钮元素
let forward = document.getElementById("forward")
//绑定单击事件
forward.onclick=function (){
//调用前进函数
history.forward()
//这里和go函数里面传参数1的用法是一样的
//==history.go(1)
}
//根据id获取back按钮元素
let back = document.getElementById("back")
//绑定单击事件
back.onclick=function (){
//调用回退函数
history.back()
//这里和go函数里面传参数-1的用法是一样的
//==history.go(-1)
}
</script>
</body>
</html>
效果
以上是关于JavaScript进阶知识(BOM)-快速入门篇的主要内容，如果未能解决你的问题，请参考以下文章