第三章 JavaScript操作BOM对象
一.window对象
浏览器对象模型（BOM）是javascript的组成之一，它提供了独立与浏览器窗口进行交换的对象，使用浏览器对象模型可以实现与HTML的交互。
他的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。
BOM是一个分层结构：
Window对象是整个BOM的核心，在浏览器中打开网页后，首先看到是浏览器窗口，即顶层的window对象；其次是网页内容，即document(文档)。
Window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象，如果文档定义了一个或多个框架，浏览器将为原始文档创建一个window对象，同时为每个框架另外创建一个window对象。
1. BOM的作用
1）.弹出的浏览器窗口。
2）.移动、关闭浏览器窗口及调整窗口的大小。
3）.在浏览器窗口中实现页面的前进、后退功能。
2.window常用的属性
|
名称 |
说明 |
|
history |
有关客户访问过的URL的信息 |
|
location |
有关当前的URL的信息 |
|
Screen |
只读属性，包含有关客户端显示屏幕的信息 |
语法： windoe.属性名=”属性值”；
例：window.location=”http//www.baidu.com”,表示跳转到百度的官方主页。
screen.height返回显示浏览器的屏幕的高度，单位为像素。
3.window常用的方法
|
名称 |
说明 |
|
prompt() |
显示一个可提示并且用户可以输入的对话框，取消返回null,确定返回用户输入的值 |
|
alert() |
显示一个带有提示信息和一个“确定”按钮的警示对话框,无返回值 |
|
confrim() |
显示一个带有提示信息、“确定”和“取消”按钮的对话框，返回true或false |
|
colse() |
关闭浏览器窗口 |
|
open() |
打开一个新的浏览器窗口，加载给定的URL所指定的稳定 |
|
setTimeout() |
在指定的毫秒数后调用函数或计算表达式 |
|
setInterval() |
按照指定的周期（单位毫秒）来调用函数或表达式 |
弹出窗口语法：
Window.open(“弹出窗口的URL”,”窗口的名称”,”窗口特征”);
1. 窗口的特征属性
|
名称 |
说明 |
|
height、width |
窗口文档显示区的高度、宽度、单位是像素 |
|
left、top |
窗口的x坐标、y坐标，单位是像素 |
|
toolbar=yes|no|1|0 |
是否显示浏览器的工具栏，默认是yes |
|
scrollbars=yes|no|1|0 |
是否显示滚动条，默认是yes |
|
loaction= yes|no|1|0 |
是否显示地址栏，默认是yes |
|
status= yes|no|1|0 |
是否添加状态栏，默认是yes |
|
menubar=yes|no|1|0 |
是否显示菜单栏，默认是yes |
|
resizable=yes|no|1|0 |
窗口是否可调节尺寸，默认是yes |
|
titlebar= yes|no|1|0 |
是否显示标题栏，默认是yes |
|
fullscreen=yes|no|1|0 |
是否全屏模式显示浏览器，默认是no |
二.history对象和location对象
1. history对象
history对象提供用户最近浏览过的URL列表，即浏览历史。出于隐私方面的考虑，history对象不再允许脚本访问已经访问过的实际URL
|
History对象的方法 |
|
|
名称 |
描述 |
|
back() |
加载history对象列表中的前一个URL |
|
forward() |
加载history对象列表中的后一个URL |
|
go() |
加载history对象列表中的某个位置的URL,参数为正负整数 |
go(n)方法中的n是一个具体的数字，当n>0时，进入历史列表中前进的第几个页面。
当n<0时，进入历史列表中后退的第几个页面。
A） history.go(1)代表前进一页，等价于forward()方法。
B） History.go(-1)代表后退一页，等价于back()方法。
2. location对象
laction对象提供当前页面的URL信息，并且可以重新装载当前页面（刷新）或装入新页面。
|
Location对象的属性 |
|
|
名称 |
描述 |
|
Host |
设置或返回主机名和当前URL的端口号 |
|
Hostname |
设置或返回当前URL的主机名 |
|
href |
设置或返回完整的URL |
|
loaction对象的方法 |
|
|
reload() |
重新加载(刷新)当前文档 |
|
replace() |
用新的文档替换当前文档 |
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<img src="flow.jpg" alt="鲜花"/><br/>
<!--跳转到鲜花页面-->
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页</a>
</body>
</html>
一.document对象
document对象即是window对象的一部分，又代表了整个HTML文档，可以用来访问页面中的所有元素。所以在使用document对象时，除了要适用于各个浏览器外，也要符合W3C的标准。
|
Document对象的常用属性 |
|
|
referrer |
返回当前文档的URL |
|
URL |
返回当前文档的URL |
1.referrer的语法格式如下：
document.referrer;
当前文档如果不是通过超连接访问的，则document.referrer的值为null
例：通过跳转地址判断用户是否从指定的页面登录的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var preUrl=document.referer;//载入跳转到当前文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖的登录页面进入，五秒后将自动跳入到领奖页面</h2>")
setTimeout("location.href='login.html'",3000);//使用setTimeout延迟5秒后跳转到领奖页面的登录页面
}else{
document.write("<h2>大奖赶快拿！笔记本！数码相机！</h2>")
}
</script>
</body>
</html>
2.URL的语法：
document.URL;
|
Document对象的常用方法 |
|
|
方法 |
描述 |
|
getElementByID() |
返回对拥有指定id的第一个对象的引用 |
|
getElementsByName() |
返回带有指定名称的对象的集合 |
|
getElementsByTagName() |
返回指定带有表签名的对象的集合 |
|
write() |
向文档写入文本，HTML表达式或JavaScript代码 |
二.javascript的内置对象
在javaScript中，系统的内置对象有Date对象、Array对象、String对象和Math对象等。
A） Date对象：用于操作日期和事件。
B） Array对象：用于在单独的变量名中存储一系列的值。
C） String对象：用于支持对字符串的处理。
D） Math对象：执行常用的数学任务，它包含了若干个数字常量和函数。
1.Date对象
语法：var 日期实例=new Date(参数)；
例：var today=new Date(); //将当前的时间存储在变量today中
var tdate=new
Date(“July 15,2013,16:10:12”);//以字符串格式传入值
|
Date对象的常用方法 |
|
|
方法 |
说明 |
|
getDate() |
返回Date对象中的一个月中每一天，值1~31 |
|
getDay() |
返回Date对象的行其中的每一天，值0~6 |
|
getHours() |
返回Date对象的小时数，值0~23 |
|
getMinutes() |
返回Date对象的分钟数，值0~59 |
|
getSeconds() |
返回Date对象的秒数，值0~59 |
|
getMonth() |
返回Date对象的月份，值0~11 |
|
getFullYear() |
返回Date对象中年份，其值为4位数 |
|
getTime() |
返回来自某一刻（1970年1月1日）以来的毫秒数 |
例：显示时间
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
function disptime(){
var today=new Date();//获得当前的时间
var hh=today.getHours();
var mm=today.getMinutes();
var ss=today.getSeconds();
//设置div的内容为当前时间
document.getElementById("myclock").innerHTML="现在是："+hh+":"+mm+":"+ss;
}
disptime();
</script>
</body>
</html>
2.Math对象
Math对象提供了许多与数学相关的功能，它是javaScript的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。
|
Math对象的常用方法 |
||
|
方法 |
说明 |
示例 |
|
ceil() |
对数进行上舍入（方向第一象限） |
Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
|
floor() |
对数进行下舍入（方向第三象限） |
Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
|
round() |
四舍五入 |
Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
|
random() |
返回0~1的随机数 |
Math.random(); |
三.定时函数
JavaScript中提供了两个定时函数setTimeout()和setInterval().
此外，还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。
1. setTimeout
setTimeout()用于在指定的毫秒后调用函数或计算表达式，语法：
setTimeout(“调用的函数名称”，等待的毫秒数)；
2. setInterval
按照指定的周期（单位毫秒）来调用函数或表达式。语法：
setInterval(“调用的函数名称”,周期性调用函数之间间隔的毫秒数)；
setInterval()会不停的调用函数，知道窗口关闭或被其他方法强制停止。
第三章 JavaScript操作BOM对象的更多相关文章
-
JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
-
JQuery制作网页—— 第二章 JavaScript操作BOM对象
1.window对象: 浏览器对象模型(BOM)是javascript的组成之一, 它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互. 它的作用是将相关的元素组织包装 ...
-
第三章 JavaScript操作Dom对象
常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...
-
第四章	JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
-
使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象
JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...
-
JavaScript操作BOM对象
1)windows对象 浏览器对象模型(BOM :Browser Object Model)是JavaScript的组成之一,它提供了独立于内容与浏览 器窗口进行交互的对象,使用浏览器对象模型可以 ...
-
accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...
-
第二章 javaScript操作BOM
什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管理窗口与窗 ...
-
第三章JavaScript 内置对象
1 Number 1.1 属性 MAX_VALUE JS可以表示的最大的数字 MIN_VALUE JS可以表示的最小的数字 1.2 方法 toFixed(length) 指定保留长度的小数 toExp ...
随机推荐
-
Ubuntu菜鸟入门（八）—— QQ安装
一.下载 http://www.ubuntukylin.com/application/show.php?lang=cn&id=279 二.安装流程 1.解压,到解压文件夹中运行 sudo d ...
-
从AutoCAD和.NET开始
引自并参考Kean's blog:http://through-the-interface.typepad.com/through_the_interface/2006/07/getting_star ...
-
WP8微信5.3开始内测 支持Cortana语音 两微破冰了?
WP版微信v5.3内测版昨发布了,进行了一些小幅升级,最意外的是原生支持WP8.1版Cortana语音命令操作.要知道微软的聊天机器人“小冰”在微信上存在不到4天,就被微信全面封杀退出,现在微信又内测 ...
-
[iOS翻译]《iOS7 by Tutorials》系列：在Xcode 5里使用单元测试（上）
简介: 单元测试是软件开发的一个重要方面.毕竟,单元测试可以帮你找到bug和崩溃原因,而程序崩溃是Apple在审查时拒绝app上架的首要原因. 单元测试不是万能的,但Apple把它作为开发工具包的一部 ...
-
关于SQL Server 数据库的备份
备份 第一 :选择数据库右键任务,然后直接选择分离,再选择删除和更新上打勾,之后到sqlsever安装目录下查看,会生成xx.mdf和xx.ldf两个文件(既有表结构又有数据). 第二:可以选择备份, ...
-
使用命令行的方式操作hdfs
必须要用打全路径,没有相对路径的概念,或者cd的概念 打印报告: 所有的命令显示出来: 以下的操作分别是创建创建文件夹,删除文件夹,显示文件夹,可见删除文件夹只能够使用-rmr . 从本地拷贝文件到h ...
-
SQL运行优化收藏
如何让你的SQL运行得更快(转贴) ---- 人们在使用SQL时往往会陷入一个误区,即太关注于所得的结果是否正确,而忽略了不同的实现方法之间可能存在的性能差异,这种性能差异在大型的或是复杂的数据库环境 ...
-
crm项目整理
crm项目整理 一.开发背景 由于公司人员的增多,原来通过excel表格存取方式过于繁琐,而且对于公司人员的调配和绩效考核等不能做到精确处理,所以开发crm系统,开始开发只是针对销售人员和客户,后 ...
-
Configuring the launch of the remote virtual machine to debug
Options need to be added to the standard launch of a virtual machine (VM) to enable the debugging ar ...
-
stark - 增、删、改
一.效果图 二.增.删.改 知识点: 1.解决代码重用 {% include 'form.html' %} 2.自定制配置modelform 每张表,就可自定义配置 labels , widges.. ...