BOM模型(window对象)


前言

本文将会总结JavaScript中重要的知识点-----BOM模型(浏览器对象模型)。它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而减轻开发人员的工作量,提高设计Web页面的效率。实现功能:1.弹出新的浏览器,2.移动,关闭浏览器窗口以及调整窗口的大小,3.页面的前进,后退


提示:以下是本篇文章正文内容,下面案例可供参考

一、BOM模型对象–Window对象

1.window对象属性:

Window对象的常用属性
history(历史):有关客户访问过的URL的信息
location(当前):有关当前URL的信息
parent:返回父窗口
frames:返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架。
opener: 返回对创建此窗口的引用

注意 :opener和parent都可以给子窗口传递参数。
不同点:
opener用于超链接,而且打开的这个超链接必须要有父子关系,若不是通过超链接打开,向父窗口传参数时,将会传不过去。
parent用于iframe框架

代码如下:(对于parent属性和frames属性的应用【父子窗口传参】,opener属性)

		<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
		//父窗口
		<script>
		  function fun(){
			   //1. 获取文本框的内容
			   var v = document.getElementById("name").value ;
			   
			   //2. 获取子窗口的window对象
			   var w = window.frames[0];   //这里的window和self代表的意义相同,所以这里也可以写成self.frames[0]		  
			  //3. 获取父窗口中文本框对象
			  var input = w.document.getElementById("name") ;
			  
			  //4.设置文本框的内容
			  input.value = v ;
		   }
	  </script>
	<body>
		 <input id = "name" ><button onclick="fun()">传递参数到iframe中</button><br>
		 <iframe src = "b.html" width = 300 height = 400 ></iframe>  <!-- 在此页面上再显示一个b.html的窗口 -->
		 <!-- <a href = "b.html" target="_blank">b.html</a> -->  此语句是opener属性的应用
	</body>
</html>

	   <script>
	   //子窗口(通过iframe框架引入,显示在父窗口上)
		   function fun(){
			   //1. 获取文本框的内容
			   var v = document.getElementById("name").value ;
			   
			   //2. 获取父窗口的window对象
			   var w = window.parent ;
			  //var w = window.opener;	//opener属性用此语句		   

			  // console.log(w)
			  
			  //3. 获取父窗口中文本框对象
			  var input = w.document.getElementById("name") ;
			  
			  //4.设置文本框的内容
			  input.value = v ;
		   }
	   </script>
	<body>
		  <input id = "name"><button onclick = "fun()">传递数据到父窗口中</button>
	</body>

status属性:设置窗口状态栏的文本。
defaultstatus属性:设置或返回窗口状态栏中的默认文本
这两个属性在IE,火狐,chrome,和Safari默认配置是不能正常工作,要允许脚本来改变状态栏文本。

2.window对象方法:

1.内容:

方法描述
alert()消息框,只有一个确定按钮
confirm()确认框,有两个按钮,一个确定,一个取消,返回值是boolean
prompt()输入框, 弹出来的输入文本框
open(URL,name,specs,replace)打开一个新的浏览器窗口 ,可以设置此窗口的长宽等一些属性
moveTo()把窗口的左上角移动到一个指定的坐标
resizeBy()按照指定的像素调整窗口的大小
resizeTo()把窗口的大小调整到指定的宽度和高度
setTimeout()在指定的毫秒数后调用函数或者计算表达式
setInterval()在指定的周期(以毫秒计)后调用函数或者计算表达式
getComputedStyle()获取指定元素的 CSS 样式

alert() 消息框,只有一个确定按钮

     //window对象的方法,属性,可以省略window对象,用着两种方法都可以。
       window.alert("我是一个弹出消息框") ;
     //alert("你好") ;
		  

confirm(): 确认框,有两个按钮,一个确定,一个取消,返回值是boolean

//如果点确定,将会返回true;点取消,将会返回false
let f = confirm('确定要删除吗?');
alert(f);

prompt() :输入框, 弹出来的输入文本框

//如果有数值,此数值就是默认的账号
//let value = propt("请输入你的账号:",12345678)
let value = prompt("请输入你的账号:")
alert(value);

getComputedStyle() : 获取指定元素的 CSS 样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				background-color: darkgreen;
				font-size: 30px;
			}
		</style>
	</head>
	  <script>
		  function fun(){
			 var p = document.getElementById("p") ;
			 
			 //console.log(p.style.backgroundColor)   //获取不到此属性
			 
			 //获取到的是样式表的对象
			 let style = self.getComputedStyle(p) ;
			 
			 //获取样式表对象其中的一个属性的值
			 console.log(style.getPropertyValue("font-size"))
		  }
	  </script>
	<body>
		 <p id= "p">how are you?</p>
		 <button onclick="fun()">getComputedStyle方法</button>
	</body>
</html>

1.setTimeout: 我们在理解的时候可以把setTimeout理解为一块表,当调用此方法时,js引擎就产生了一块表,
开始计算,等指定的时间一到,js引擎会自动调用此方法指定的函数,同时此表自动销毁
有两个参数,第一个参数是要调用的函数,第二个参数是时间,单位是毫秒。
clearTimeout : 销毁
2.setInterval: 同样是一块表,不同的是此表不会自动销毁,必须我们手动销毁
clearInterval : 销毁

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	  <script>
		//setTimeout定时器
		 let t ;
		 function fun(){
			 //1.获取p标签对象
			 let p = document.getElementById('p') ;
			 
			 //2.获取p标签的主体文本
			 let txt = p.innerHTML ;
			 
			 //3.改变文本
			 txt = txt * 1 - 1 ;
			 
			 //4. 将改变后的文本设置为p标签的主体文本
			 document.getElementById('p') .innerHTML = txt ;
			 
			 //5. 每隔1秒调用1次
			 //t = setTimeout("fun()",2000) ; 
		 }
		 
		 
		 function fun1(){
			 clearTimeout(t) ;
		 }
		 //setInterval定时器
		 function func(){
			 //1.获取p标签对象
			 let p = document.getElementById('p') ;
			 
			 //2.获取p标签的主体文本
			 let txt = p.innerHTML ;
			 
			 //3.改变文本
			 txt = txt * 1 - 1 ;
			 
			 //4. 将改变后的文本设置为p标签的主体文本
			 document.getElementById('p') .innerHTML = txt ;
		 }
		 
		 function fun2(){
			 t = setInterval("func()",1000) ; 
		 }
		 
		 function fun3(){
			 clearInterval(t)
		 }
	  </script>
	  
	<body>
		 <p id= "p">30</p>
		 <button onclick="fun()">开始计时</button>
		 <button onclick="fun1()">停止计时</button>
		 <button onclick="fun2()">开始(setInterval)计时</button>
		 <button onclick="fun3()">停止(setInterval)计时</button>
	</body>
</html>

2.对定时器的简单应用(setTimeout()):

代码如下(示例):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		//这是对于图片样式的设置:背景色,宽高等
			#d{
				width:300px; 
				height: 300px;
				background-color: greenyellow;
				margin:50px auto ;
				padding:10px 10px ;
			}
			
			img{
				width:297px; 
				height: 297px;
			}
		</style>
	</head>
	
	  <script type="text/javascript">
		    let n = 0 ;
			function fun(){
				n++ ;    //n代表的是照片
				if(n ==5)
					n =1 ;
				//1.获取图片标签对象
				let  img = document.getElementById("img") ;
				
				//2.指定图片标签的src属性
				img.src = `img/${n}.jpg` 
				
				//3.每隔2秒调用一次此函数
				setTimeout("fun()",2000)
			}
	  </script>  
	<body>
		<div id = "d"><img src = "img/1.jpg" id = "img"></div>
		<button onclick="fun()">开始</button>
	</body>
</html>


二. 总结

本篇主要是对BOM模型中的window对象(属性,方法)进行了一些总结。下篇将会进行其他对象的总结。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值