javascript组成之BOM对象总结

在这里插入图片描述
BOM 对象：浏览器对象模型(操作与浏览器相关的内容)

Window 对象(掌握)

 Window 对象表示浏览器中打开的窗口。
 Window对象方法

window对象方法 setInterval():它有一个返回值，主要是提供给 clearInterval 使用。
setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。
clearInterval():该方法只能清除由 setInterval 设置的定时操作。
clearTimeout():该方法只能清除由 setTimeout 设置的定时操作。
setInterval()函数和setTimeout()区别：前面的是周期性的（可以循环调用），后面定时调用一次。
alert()、confirm()、prompt()函数代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//警告框
			window.alert("aaa");
			//确认按钮
		   	window.confirm("你确定删除吗?");
		   	//提示输入框
		   	window.prompt();
		</script>
	</head>
	<body>
	
	</body>
</html>

页面展示效

警告框展示
确认按钮
提示输入框

Location 对象(掌握)

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
在这里插入图片描述
href:该属性可以完成通过 JS 代码控制页面的跳转。
href属性代码演示
代码实现一:内部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function tiaozhuan(){
				window.location.href="http://www.baidu.com";
			}
		</script>
	</head>
	<body>
		<a href="#" οnclick="tiaozhuan()">百度一下</a>
	</body>
</html>

代码实现二:行内引入(前期是javascript代码不能太长,太长不建议使用行内引入)
行内引入首先要声明是javascript代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="#" οnclick="javascript:window.location.href='http://www.baidu.com'">百度一下</a>
	</body>
</html>

History 对象(掌握)

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
在这里插入图片描述
back():返回上一页
forward():下一页
go(参数):参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历
史记录页面。go()方法可以实现back()和forward()的功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//返回上一页
			window.history.go(-1);
			//返回上一页
			//window.history.back();
		</script>
	</head>
	<body>
		<a href="返回上一页.html"> 点我!</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="上一页" οnclick="javascript:history.back()"/><br/>
		<input type="button" value="下一页" οnclick="javascript:history.forward()"/><br/>
		<a href="#" οnclick="javascript:window.location.href='http://www.baidu.com'">百度一下</a>
	</body>
</html>

页面展示效果
实现下一页和上一页的过程
先点击点我，然后到页面二，点击百度一下，就到了下一页百度首页，在手动返回到页面二，在点击上一页就回到了页面一，在手动回到页面页面一，点击下一页，就到了百度首页，上面的意思，就是你要先访问上一页和下一页，代码才知道那个是上一页和下一页。
页面一：
在这里插入图片描述
页面二：

让按钮点击失效：
οnclick=”javascript:volid(0)”