一、BOM模型
-
BOM:浏览器对象模型（Browser Object Model）
- BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能
-
弹出新的浏览器窗口
-
移动、关闭浏览器窗口及调整窗口的大小
-
页面的前进、后退
二、window对象
在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算
1.常用的属性
| 属性名称 | 说明 |
|---|---|
| history | 有关客户访问过的URL信息 |
| location | 有关当前URL的信息 |
//语法
window.属性名="属性值"
//示例
window.location="http://www.ss-vet.com";//表示跳转道盛邦升华首页
2.常用的方法
| 方法名称 | 说明 |
|---|---|
| prompt() | 显示可提示用户输入的对话框 |
| alert() | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm() | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口，加载给定URL所指定的文档 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或表达式 |
2.1 confirm()方法
浏览器可以通过调用系统对话框，向用户显示信息。系统提供了3个函数，可以完成系统对话框操作。分别是alert() prompt() confirm().
【注意】window下的函数，都可以省略window直接去调用
confirm() 将弹出一个确认对话框
语法：confirm("对话框中显示的纯文本")
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true){
alert("删除成功！");
} else{
alert("你取消了删除");
}
</script>
confirm()与alert ()、 prompt()区别
1.alert( )：警告框。一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
2.prompt( )：提示框。两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
【参数】第一个参数：要在提示框上显示的内容；第二个参数：输入框内默认的值
3.confirm( )：确认对话框。一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
2.2open()方法
打开一个新窗口
window.open() 等价于 open()
语法：window.open("弹出窗口的url","窗口名称","窗口特征”)
参数详情： 1.要加载URL 2.窗口的名称或窗口的目标 3.一串具有特殊意义的字符串
案例：点击按钮，弹出页面
<input type="button" value="按钮" id="btn">
<script>
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
open("http://www.baidu.com");
/*
【注意】如果只有第一个参数，调用open方法会打开新窗口，加载url
*/
open("http://www.baidu.com","百度");
/*
【注意】第二个参数，是给打开的新窗口起一个名字，以后再去加载url，就在
这个已经起好名字的目标窗口加载url
*/
open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200");
/*
【注意】第三个参数，是给打开的新窗口起一个名字，以后再去加载url，就在
这个已经起好名字的目标窗口加载url
*/
}
</script>
练习1需求：有两个页面，父页面sup.html设置黄色，子页面sub.html设置紫色。
父窗口点击按钮跳转到子页面，子页面点击按钮打开父窗口
//父窗口
<html>
<head>
<meta charset="utf-8">
<title>父窗口</title>
<style type="text/css">
body{
background: #FFFF00;
}
</style>
</head>
<body>
<input type="button" value="打开子窗口" id="btn">
<script>
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
open("sub.html","子窗口","width=400,height=400,top=200,left=200")
}
</script>
</body>
</html>
//子窗口
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: blueviolet;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
/* opener:打开当前窗口的父窗口的window对象
注意：IE不支持该对象
*/
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(opener); //window object 不确定是不是父级，用下行代码测试
opener.document.write("子窗口让我输出的");
}
</script>
</body>
</html>
三、history对象
history是window对象的属性，它保存这个用户上网的记录。
1.history属性(了解)
history.length 返回当前history对象中记录数：历史记录条数
//html
<input type="button" value="记录" id="btn">
//js
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(history.length);
}
/*
手动在链接后添加 #1按回车 #2按回车 #3按回车
再点击记录按钮，会发现展示四条记录
*/
2.history属性（重点）
| 名称 | 说明 |
|---|---|
| back() | 加载history对象列表中的前一个url |
| forward() | 加载history对象列表中的下一个url |
| go() | 加载history对象列表中的某个具体url |
history方法
history.back() 返回上一条历史记录，类似于后退
history.forward() 前进到下一条历史记录，类似前进
history.go()
参数 0 重载当前页面
正数 前进对应数量的记录
负数 后退对应数量的记录
*/
//html:创建3个按钮
<input type="button" value="前进" id="forward">
<input type="button" value="后退" id="back">
<input type="button" value="go" id="go">
//js:控制url前进还是后退
var oBtn1=document.getElementById("forward");
oBtn1.onclick=function(){
history.forward();
}
var oBtn2=document.getElementById("btn");
oBtn2.onclick=function(){
history.back();
}
var oBtn3=document.getElementById("btn");
oBtn3.onclick=function(){
history.go(0);
history.go(2);
history.go(-2);
}
四、location对象
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性；所以window.loction和document.location等效。
-
alert(window.location); //获取当前的URL
-
alert(location); //window可以省略
-
alert(window.document.location);
可以看出以上三种方式弹出结果相等。alert(window.location===window.document.location);//true
//案例1：查看location结果
alert(window.location);
alert(location);
alert(window.document.location);
alert(window.location===window.document.location);//true
**location 我们浏览器上的地址栏输入框**
1.常用属性
| 名称 | 说明 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置返回当前URL的主机名 |
| href | 设置和返回完整的URL |
/*
location 中属性
url：统一资源定位符（快递包上一个地址）
1.location.hash 锚点 #1 实现页面内跳转
*/
alert(location.hash);
window.onload=function(){
document.onclick=function(){
location.hash="#1";
}
}
/*
2.host 主机名：端口号 浏览器的端口号默认 8080
IP 通过IP我们可以在全球范围内，找到我这台电脑所使用的网络的端口号
正在使用网络的软件，在当前电脑内唯一的标识。
IP:端口号
*/
/*
3.hostname 主机名 域名/IP
【注意】域名其实就是给IP起一个好记的名字
*/
alert(location.hostname); //需要将此页面部署到服务器上
/*
4.href 整个url
*/
alert(location.href);
/*
5.pathname 路径名
*/
alert(location.pathname);
/*
6.protocal 协议
http:网络协议
file：本地文件协议
*/
alert(location.protocol);
/*
7.search 查询字符串
跟在?后面的部分
?username=XXX&age=18
*/
alert(location.search);
window.onload=function(){
document.onclick=function(){
location.search="?xxx=yyy&age=18";
}
}
/*
url统一资源定位符
protocol(协议)：host(主机名):port(端口号)/pathname(路径)?username=xxx&age=18#1
*/
2.常用方法
| 名称 | 说明 |
|---|---|
| reload | 重新加载当前文档 |
| replace | 新的文档替换当前文档 |
| assign | 跳转到指定的URL |
/*
assign() 跳转到指定的url
reload()重载当前的url
如果传参，参数为true的时候，强制加载，从服务器源头重新加载
replace() 用新的url替换当前页面，可以避免跳转前的历史记录
*/
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
location.assign("http://www.baidu.com");
//location.reload(); //缓存
//location.reload(true);
location.replace("http://www.baidu.com");
}
五、Document对象
常用属性
| 名称 | 说明 |
|---|---|
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
//语法：
doctument.referrer
document.URL
案例：判断页面来源并跳转（3个页面）
//1.html页面
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.prize{text-align: center;}
</style>
<div class="prize">
<img src="images/d1.jpg" alt="中奖" />
<h1><a href="praise.html">马上去领奖啦！</a></h1>
</div>
//2.praise页面
//判断页面是否是链接进入
//自动跳转到登录页面
<script type="text/javascript">
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");
setTimeout("location.href='login.html'",5000);//使用setTimeout延迟5秒后自动跳转
}
else{
document.write("<h2>大奖赶快拿啦！笔记本！数码相机！</h2>");
}
</script>
//3.login页面
<div>登录页面</div
六、Document对象的常用方法
| 名称 | 说明 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象的集合 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
案例：选择颜色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择颜色</title>
<style type="text/css">
#color{font-family: "微软雅黑";
font-size: 16px;
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<div>
本次选择的颜色是：<span id="color"></span>
<input type="button" value="选择颜色" onclick="selColor();">
</div>
<script type="text/javascript">
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
</script>
</body>
</html>
案例：document对象的应用
<style type="text/css">
body,input,div,p,{margin: 0;padding: 0;}
body{font-size: 14px; font-family: "微软雅黑"; line-height: 25px;}
.content{width: 550px; margin: 0 auto;}
.content img{ float: left; width: 150px;}
.r{float: left; width: 400px;}
input[name="changeBook"]{
width: 100px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px; font-family: "微软雅黑";
margin: 10px 0 10px 0;
}
input[name="season"]{
width: 50px; text-align: center;
}
</style>
//html代码
<div class="content">
<img src="images/book.jpg" alt="岛上书店"/>
<div class="r">
<div id="book">书名：岛上书店</div>
<input name="changeBook" value="换换名称" type="button" onclick="alterBook();" /><br>
四季名称：
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input内容" onclick= "all_input()" />
<input name="b3" type="button" value="四季名称" onclick="s_input()" />
<input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
<p id="replace"></p>
</div>
</div>
//js代码
<script type="text/javascript">
//动态改变层、标签中的内容
function alterBook(){
document.getElementById("book").innerHTML="现象级全球畅销书";
}
//访问相同标签的元素
function all_input(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
//访问相同name的元素
function s_input(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" ";
}
document.getElementById("replace").innerHTML=sStr;
}
function clearAll(){
document.write("");
}
</script>
七、定时函数
//使用Date对象的方法显示当前时间的小时、分钟和秒
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();
1.setTimeout()
//语法
setTimeout("调用的函数",等待的毫秒数)
//示例
var myTime＝setTimeout("disptime() ", 1000 ); //1秒(1000毫秒)之后执行函数disptime()一次
2.setInterval()
//语法
setInterval("调用的函数",间隔的毫秒数)
//示例
var myTime＝setInterval("disptime() ", 1000 ); //每隔1秒(1000毫秒)执行函数disptime()一次
如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
两个定时函数的区别；
- setTimeout()在等待指定时间后执行函数，且只执行一次；
- setInterval()是每指导间也不是时间后执行一次函数，循 环执行，所以时钟例子使用setInterval();
3.clearTimeout()
//语法
clearTimeout(setTimeOut()返回的ID值)
//示例
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
4.clearInterval()
//语法
clearInterval(setInterval()返回的ID值)
//示例
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
两者之间的区别；
- clearTimeout()清除由setTimeout()设置的定时；
- clearInterval()清除由setInterval()设置的定时；
网友评论