js当中的BOM对象

最新推荐文章于 2024-04-08 20:36:59 发布

1997海彬

最新推荐文章于 2024-04-08 20:36:59 发布

阅读量346

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/zhang19971022095/article/details/79857477

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

在前面我们说过，js是由三部分组成的：

EMCAScript :它定义了基本的语法和语句

BOM :浏览器对象模型

DOM:文档对象模型

前面那么多都是在将EMCAScript，现在开始接触BOM对象模型。

一：

navigator：封装了一些浏览器的基本信息。掌握userAgent 返回由客户机发送服务器的 user-agent 头部的值。

screen: 获取屏幕信息的对象。重点掌握width和height

案例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>navigator和screen</title>
 </head>
 <body>
	<script type="text/javascript">
		var s1=navigator.appVersion;//打印app的版本
		document.write(s1+"<br/>");
		var s2=navigator.userAgent;//返回由客户机发送服务器的 user-agent 头部的值
		document.write(s2+"</br>");
		var height=screen.height;//height是获取高度
		var width=screen.width;//width是获取宽度
		document.write("height:"+height+"===width:"+width);
	</script>
 </body>
</html>

5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; rv:11.0) like Gecko
Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; rv:11.0) like Gecko
height:768===width:1366

history：封装了浏览历史：

方法： back();

forward()

go( )参数如果是正数，相当于forward方法。参数是负数，相当于back方法。

案例：实现a,b,c页面的跳转

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>history的a页面</title>
  <style type="text/css">
	font{
		font-size:20px;
		color:red
	}

  </style>
 </head>
 <body>
		<font> AAAAAAAA</font><br/>
		<a href="history的b页面.html" >跳转到b页面</a>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>history的b页面</title>
  <style type="text/css">
		font{
			color:#c3ffff;
			font-size:30px;
		}
  </style>
 </head>
 <body>
	<font>BBBBBBBBBBBBBBBB</font><br/>
	<a href="history的c页面.html">点击到c页面</a>
	<input type="button" value="跳转到下一个页面" οnclick="nextFun();"/>
	<input type="button" value="跳转到上一个页面" οnclick="backFun();"/>
	<script type="text/javascript">
			function nextFun(){
				history.forward();
			}
			function backFun(){
				history.back();
			}
	</script>
 </body>
</html>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>history的c页面</title>
  <style type="text/css">
	font{
		color:#as45ff;
		font-size:30px;
	}
  </style>
 </head>
 <body>
	<font>CCCCCCCCCCCC</font><br/>
	<a href="history的a页面.html">点击到a页面</a>
	<input type="button" value="点击下一个页面" οnclick="nextFun();">
	<input type="button" value="点击上一个页面" οnclick="backFun();"/>
	<script type="text/javascript">
		function nextFun(){
			history.go(1);
		}
		function backFun(){
			history.go(-1);
		}
	</script>
 </body>
</html>

Location ：封装了URL信息。
href: 属性：
作用：获取URL的信息。 location.href;

设置URL的值。

Window: Window 对象是 JavaScript 层级中的顶层对象。
方法： alert();
confirm("param"); 带有确定按钮和取消按钮的报警框。 param是提示信息。方法具有返回值。
当点击确定返回true。取消返回false。
prompt(" param1","param2");参数一：脚本的提示信息，参数二：输入框的输入信息
具有返回值，返回值是一个string类型，值为param2
open("","","'样式'");打开一个新的窗口。参数一：打开窗口的地址。参数二： "" ,参数三：打开新窗口的样式设置。
close()方法。

和定时器相关的方法：
设置定时器：

setInterval("js代码",执行的毫秒值)；具有返回值，返回的是当前定时器的唯一的id的值

var id1=window.setInterval("alert('haha')", 5000); //指定5S执行响应的代码。

setTimeout("js代码"，经过的毫秒值)；在指定的时间执行js代码

window.setTimeout("alert('heihei')", 5000);// 在指定的时间运行响应的js代码。

clearInterval(“id1”); 取消定义器。参数传递一个定时器的id值。

clearTimeout()；取消由 setTimeout() 方法设置的 timeout。