前言
本文将会总结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对象(属性,方法)进行了一些总结。下篇将会进行其他对象的总结。