BOM模型

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

BOM可实现功能

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

window对象

常用属性

属性名称	说明
history	有关客户访问过的URL信息
location	有关当前URL的信息

//window.属性名= "属性值"
window.location="http://www.baidu.com" ;

常用方法

方法名称	说明
prompt()	显示可提示用户输入的对话框
alter()	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计）来调用函数或者表达式

confirm()

confirm()：将弹出一个确认对话框

<script type="text/javascript">var flag=confirm("确认要删除此条信息吗？");if(flag==true)alert("删除成功！");elsealert("你取消了删除");
</script>

confirm()与alert ()、 prompt()区别

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

open()

window.open("弹出窗口的url","窗口名称","窗口特征”)

案例：制作提示消息
需求说明
1.单击“半闭”按钮时，关闭当前页面购物车页面
2.单击“移入收藏”弹出收藏提示
3.单击“删除”弹出确认删除提示
4.单击“结算”按钮，弹出结算信息页面窗口

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>test</title><link href="index.css" type="text/css" rel="stylesheet">
</head>
<body><script>function closes(){window.close();}function love(){alert("成功加入收藏！");}function deletes(){var flag=confirm("确定要删除宝贝吗？");if(flag){alert("删除成功！");}}function account(){var flag=confirm("您本次购买商品总计：35.00元；\n请确认以上信息是否有误！！！");if(flag){alert("您的订单已提交");}}</script><input type="button" name="clo" value="关闭" onclick="closes()"/><input type="button" name="shou" value="移入收藏" onclick="love()"/><input type="button" name="delete" value="删除" onclick="deletes()"/><input type="button" name="account" value="结算" onclick="account()"/>
</body>
</html>

history对象和location对象

history对象

注意：

//浏览器中的“后退”，两者等价
history.back();
history.go(-1);//浏览器中的“前进”，两者等价
history.forward();
history.go(1);

location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL端口号
hostname	设置或返回当前URL主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

示例：主页面使用href实现跳转和刷新本页
main.html：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8">
<title>主页面</title>
<style type="text/css">
body{margin: 0px auto;text-align:center;
}
</style>
</head><body>
<a href="javascript:location.href='flower.html'">查看详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
</html>

flower.html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8">
<title>鲜花详情页面</title>
<style type="text/css">
body{font-size:12px;line-height:20px;margin: 0px 10px;
}
p{font-size:14px;font-weight:bold;
}
</style>
</head><body>
<img src="data:images/flow.jpg" />
<p style="text-align:right;"><a href="javascript:history.back()">返回主页面</a></p>
<p>服务提示：</p>非节日期间，可指定时间段送达；并且允许指定送达收货人的最快时间为两小时；节日期间，只保证当日送达。<br />
配送范围：<br />鲜花配送范围：北京、上海、深圳、天津、广州、重庆等各大中城市。<br />蛋糕、果篮配送范围：全国大中城市。<br />绿植配送范围：仅限于直辖市，省会城市市区。<br />更多详细的配送区域与相应配送费率请点击这里！<br />
配送方式：<br />专业鲜花、蛋糕礼品速递机构，送货上门。 <br />
服务时间：<br />全年365天，节假日不休息，24小时接单； 每日送花时间：8:00-20：00。<br />其它时间送花酌情加收10-30服务费用。 <br />
替换原则：<br />由于地域或季节的限制，需要更换主花材时，我们将电话向订货人提出更换建议，假如在有效配送时间内得不到订货人的确认，我们将采用同等价值或相同寓意的花材代替。实际送花以图片为参考，以商品规格文字说明为主。鲜花为手工做品，实际花束可能会与图示有些出入，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致。<br />
</body>
</html>

Document对象

常用属性

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

document.referrer
document.URL

Document对象应用
判断页面是否是链接进入
自动跳转到登录页面

var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){ document.write("<h2>您不是从领奖页面进入，5秒后将自动 跳转到登录页面</h2>");setTimeout("javascript:location.href='login.html'",5000);
}

常用方法

示例：Document对象访问页面元素

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>使用document对象操作页面</title><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>
</head>
<body>
<div class="content"><img src="data: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>
<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+"&nbsp;&nbsp;";}document.getElementById("replace").innerHTML=sStr;}function s_input(){var aInput=document.getElementsByName("season");var sStr="";for(var i=0;i<aInput.length;i++){sStr+=aInput[i].value+"&nbsp;&nbsp;";}document.getElementById("replace").innerHTML=sStr;}function clearAll(){document.write("");}
</script>
</body>
</html>

JavaScript内置对象

Array

用于在单独的变量名中存储一系列的值

String

用于支持对字符串的处理

Date

用于操作日期和时间

/*
var 日期对象=new Date(参数)
参数格式：MM  DD,YYYY,hh:mm:ss (M：月，D：日，Y：年)
*/
var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");

常用方法

示例：使用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();

Math

用于执行常用的数学任务，它包含了若干个数字常量和函数

如何实现返回的整数范围为2~99？

var iNum=Math.floor(Math.random()*98+2);

定时函数

setTimeout()

//setTimeout("调用的函数",等待的毫秒数)
var  myTime＝setTimeout("disptime() ", 1000 );<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){var t=setTimeout("alert('3 seconds')",3000);
}

setInterval()

//setInterval("调用的函数",间隔的毫秒数)
var  myTime＝setInterval("disptime() ", 1000 );

注意：如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

clearTimeout()

//clearTimeout(setTimeOut()返回的ID值)
var  myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime);

clearInterval ()

//clearInterval(setInterval()返回的ID值)
var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime);

总结

JavaScript学习笔记2——JavaScript操作BOM对象相关推荐

JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
文章目录什么是BOM(浏览器对象模型) BOM中的window对象(顶级对象) window对象常见事件窗口加载事件 window.onload(等待文档内容全部加载完成才会触发,这样可以把js代 ...
JavaScript 学习笔记 - 12 JavaScript 应用示例
目录 12.1 使用可折叠菜单 12.2 添加下拉菜单 12.3 改进下拉菜单 12.4 带说明的幻灯片 12.5 一个娱乐姓名生成器 12.6 柱状图生成器 12.7 样式表切换器 12.1 使用可 ...
JavaScript学习笔记：JavaScript获取元素：id,标签名，类名，querySelector,querySelectorall,获取body,html
1.根据ID获取元素 ● 语法:document.getElementById(id) ● 作用:根据ID获取元素对象 ● 参数:id值,区分大小写的字符串 ● 返回值:元素对象或 null 案例代 ...
JavaScript学习笔记(8)——JavaScript语法之运算符
一. 算术运算符: 运算符描述例子结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记03【基础——对象（RegExp、Global）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

JavaScript学习笔记2——JavaScript操作BOM对象

BOM模型

BOM可实现功能

window对象

常用属性

常用方法

confirm()

open()

history对象和location对象

history对象

location对象

常用属性

常用方法

Document对象

常用属性

常用方法

JavaScript内置对象

Array

String

Date

常用方法

Math

定时函数

setTimeout()

setInterval()

clearTimeout()

clearInterval ()

总结

JavaScript学习笔记2——JavaScript操作BOM对象相关推荐

最新文章

热门文章