web_day06_JavaScript_BOM对象

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/82909527

BOM(浏览器对象模型)

通过BOM对象可以操作浏览器

Window(窗口)

属性

可以访问包括自身在内的其他四个对象

Window.history===history

方法

  • 提示框
    • alert() 提示框
    • confirm() 确认框
    • prompt() 提示输入框
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window方法之确认框</title>
		<script type="text/javascript">
			var value = window.confirm("您确定退出吗?");
			alert(value);//确定:true,取消:false
		</script>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window方法之输入框</title>
		<script type="text/javascript">
			var value = window.prompt("请输入用户名:");
			alert(value);//确定:输入的内容,取消:null
		</script>
	</head>
	<body>
	</body>
</html>
  • 定时器
    • 定时器:有id返回值
    • setInterVal(要执行的函数,间隔的毫秒值); 周期性定时器    反复执行
    • clearInterVal(周期性定时器的id)
    • setTimeOut(要执行的函数,间隔的毫秒值);执行一次的定时器
    • clearTimeOut(执行一次的定时器)
  • 打开和关闭
    • 打开:open()
    • 关闭:close()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打开A</title>
		<script type="text/javascript">
			function poenA(){
				window.open("a.html");
			}
		</script>
	</head>
	<body>
		<input type="button"  value="打开A页面" onclick="poenA()"/>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关闭A</title>
		<script type="text/javascript">
			function closeA(){
				window.close();
			}
		</script>
	</head>
	<body>
		我是A页面
		<input type="button" value="关闭A页面" onclick="closeA()"/>
	</body>
</html>

History(浏览历史)

forward() 前进

back()   后退

go(index)

go(1)

go(-1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history对象之go方法</title>
		<script type="text/javascript">
			function goTo(){
				history.go(1);
			}
		</script>
	</head>
	<body>
		<a href="02.html">去往第二个页面</a>
		<input type="button" value="去第二个页面" onclick="goTo()"/>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history对象之go方法</title>
		<script type="text/javascript">
			function goBack(){
				history.go(-1);
			}
		</script>
	</head>
	<body>
		我是第二个页面
		<input type="button" value="去第一个页面" onclick="goBack()"/>
	</body>
</html>

Location(定位URL)

属性:href

  • 获取当前页面的URL
    • location.href
  • 设置当前页面的URL
    • location.href=""
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location对象</title>
		<script type="text/javascript">
			function getUrl(){
				alert(location.href);
			}
			function setUrl(){
				location.href="https://www.baidu.com";
			}
		</script>
	</head>
	<body>
		<input type="button" value="获取URL" onclick="getUrl()"/>
		<input type="button" value="设置URL" onclick="setUrl()"/>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_35537301/article/details/82909527