Javascript 基础 BOM

purple_lumpy

于 2018-01-22 15:58:06 发布

阅读量177

点赞数

分类专栏：前端之Javascript

本文链接：https://blog.csdn.net/purple_lumpy/article/details/79128969

版权

前端之Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

BOM (Browser Object Model) 浏览器对象模型

BOM 提供的对象：（用于访问浏览器的功能）

- window

- navigator

- screen

- history

- location

- document

- event

(1) window 对象

window 是浏览器的一个示例，在浏览器中，window 对象有双重角色。它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

Global 对象：

	<script type="text/javascript">
		var name = "Tome" //等价与 window.name = "Tome"
	</script>

Javascript 访问浏览器的接口：

window 对象的 alert 方法。警告框。

window 对象的 confirm 方法。带有指定消息、ok按钮、取消按钮的提示框。

window 对象的 prompt 方法。输入框。

window 对象的 open 方法和close 方法。

window 对象的 setTimeout 方法（定时器）

window 对象的 setInterval 方法（定时器）

- 关于confirm 方法：

语法： window.confirm("message")

返回值：如果用户点击确定按钮，则confirm（）返回 true；如果用户点击取消按钮，则confirm（）返回 false。

<body>

	<div id="box">
		<span>iphone7</span>
		<input type="button" id="btn" name="" value="删除">
	</div>
	<script type="text/javascript">

		var btn = document.getElementById("btn")
		btn.onclick = function(){

			var  judge = confirm("确认删除吗？")

			if(judge == true){
				document.getElementsByTagName("span")[0].style.display = "none";
			}
		}
	</script>

</body>

- 关于prompt 方法：

语法：window.prompt("text,defaultText") [text：要在对话框中显示的纯文本，defaultText：默认的输入文本]

返回值：如果用户单击提示框的取消按钮，则返回 null；如果用户单击提示框的确认按钮，则返回输入字段当前显示的文本。

	<script type="text/javascript">
		// var msg1 = "111"
		var msg1 = prompt("请输入星座","水瓶座")
		document.write(msg1)
	</script>

- 关于 open 方法

语法：window.open(pagURL, name, parameter)

功能：打开一个新的浏览器窗口或查找一个已命名的窗口

参数：pagURL 为子窗口路径；name 为子窗口句柄；parameter 为窗口参数（各参数用逗号分隔）。

其中，parameter 可以有：width 窗口宽度，height 窗口高度，left 窗口X轴坐标，top 窗口Y轴坐标，

toolbar是否显示浏览器的工具栏, menubar 是否显示菜单栏 , scrollbars 是否显示滚动条, location 是否

显示地址字段, status 是否添加状态栏.

	<script type="text/javascript">
		// 打开子窗口
		open("opened.html","newwindow","width = 200,height = 200,left = 0,top = 0,toolbar = no,menubar = no,scrollbars = no,location = no,status = no");
		// window.open("opened.html","newwindow");

	</script>

- 关于 close 方法

	<script type="text/javascript">
		// 打开子窗口
		open("opened.html","newwindow","width = 200,height = 200,left = 0,top = 0,toolbar = no,menubar = no,scrollbars = no,location = no,status = no");
		// window.open("opened.html","newwindow");

		var btn = document.getElementById("eexit")
		btn.onclick = function(){
			window.close()
		}
	</script>

- 关于 setTimeout 方法

超时调用；间歇调用。

Javascript 是单线程语言，其所执行的代码必须是按顺序执行。但可以通过超时调用、间歇调用，使代码按照另一种顺序执行。

语法： setTimeout(code,millisec)

功能：在指定的毫秒数后调用函数或计算表达式

参数：code 要调用的函数或要执行的JS代码段，millisec 在执行代码前需等待的毫秒数。

返回值：返回一个 ID 值。可以通过它，取消超时调用。

取消超时调用：

语法： clearTimeout(id_of_settimeout)

	<script type="text/javascript">

		var fnCall = function(){
			alert("world");
		}
		setTimeout(fnCall,5000)

		var id = varsetTimeout(function(){
			alert("first")
		},3000)

		// 取消超时调用
		clearTimeout(id)
		// setTimeout("alert('hello')",3000);

	</script>

- 关于 setInterval 方法

间歇调用

语法：setInterval(code, millisec)

功能：每隔指定的时间执行一次代码

参数： code 要执行的JS代码，millisec 间隔时间

返回值：返回一个 ID 值。可以通过它，取消间隔调用。

取消超时调用：

语法： clearInterval(id_of_setinterval)

	<script type="text/javascript">

		var onefun = function(){
			console.log("hello");
		}

		var id = setInterval(onefun,1000);

		// 5秒后取消间隔打印
		setTimeout(function(){
			clearInterval(id);
		},5000);
	</script>

(2) location 对象

location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。

location 对象的常用属性

- location.href

功能：返回当前加载页面的完整 URL

说明： location.href 与 window.location.href 等价

	<script type="text/javascript">
		setTimeout(function(){
			// 跳转页面
			location.href = "twentyeight.html";
		},3000);
	</script>

- location.replace() 方法

语法：location.replace(url)

功能：重新定向URL

说明：不会在历史记录中生成新记录，不可后退到之前的页面。

	<script type="text/javascript">
		setTimeout(function(){
			// 跳转页面
			location.replace("twentyeight.html");
		},3000);
	</script>

- location.reload() 方法

功能：重新加载当前显示的页面

说明：location.reload()可能是从浏览器的缓存中加载；location.reload(true)从服务器重新加载。

- location.hash

功能：返回 URL 中的 hash (# 后面跟零或多个字符)，如果不包含则返回空字符串。

<!DOCTYPE html>
<html>
<head>
	<title>JSTest</title>
	<meta charset="utf-8">
	<style type="text/css">
		.box1{height: 400px;background: #cccccc;}
		.box2{height: 600px;background: #666;}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" name="" id="btn" value="返回顶部">
	<script type="text/javascript">

		document.write(location.href);
		document.write("<br />")
		document.write(location.hash);

		var btn = document.getElementById("btn");
		btn.onclick = function(){
			// 跳到页首
			location.hash = "#top";
		}
	</script>

</body>
</html>

- location.host

功能：返回服务器名称和端口号（如果有）

- location.hostname

功能：返回不带端口号的服务器名称

- location.pathname

功能：返回URL中的目录和（或）文件名

- location.port

功能：返回URL中指定的端口号，如果没有返回空字符串

- location.protocol

功能：返回页面使用的协议

- location.search

功能：返回URL的查询字符串，这个字符串以问号开头。

（3） history 对象

history 对象保存了用户在浏览器中访问页面的历史记录。

- history.back() 方法

功能：回到历史记录的上一步

说明：相当于使用了history.go(-1)

- history.forward() 方法

功能：回到历史记录的下一步

说明：相当于使用了history.go(1)

（3） screen 对象

screen 对象包含有关客户端显示屏幕的信息。

- screen.availWidth

说明：返回可用的屏幕宽度

- screen.availHeight

说明：返回可用的屏幕高度

（4） navigator 对象

提供了浏览器以及操作系统的信息。

- navigator.userAgent 属性

可以判断浏览器的类型（浏览器名称、版本、引擎）、设备的终端是移动端还是PC

浏览器种类：

	<script type="text/javascript">

		// 检测浏览器类型
		function getBrowser(){
			var explorer = navigator.userAgent.toLowerCase(),browser;
			if(explorer.indexOf("msie") > -1){
				browser = "IE"
			}
			else if(explorer.indexOf("chrome") > -1){
				browser = "chrome"
			}
			else if(explorer.indexOf("opera") > -1){
				browser = "opera"
			}
			else if(explorer.indexOf("safari") > -1){
				browser = "safari"
			}
			return browser;
		}
		
		var explorer = getBrowser()

		alert("浏览器是 "+explorer)
	</script>

- navigator.appCodeName 属性

- navigator.appName 属性