JavaScript BOM学习笔记

sweetbaybe

贡献于2012-08-16

字数:0 关键词: JavaScript开发 Java JavaScript

JavaScript BOM学习笔记 作者: wawlian http://wawlian.iteye.com JavaScript BOM学习笔记,主要是《JavaScript高级编程》的抄书笔记。备忘。 http://www.iteye.com - 做最棒的软件开发交流社区 第 1 / 21 页 本书由ITeye提供的电子书DIY功能自动生成于 2011-10-26 目 录 1. JavaScript 1.1 JavaScript BOM学习笔记——window对象1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.2 JavaScript BOM学习笔记——window对象2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.3 JavaScript BOM学习笔记——window对象3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.4 JavaScript BOM学习笔记——window对象4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 1.5 JavaScript BOM学习笔记——window对象5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 1.6 JavaScript BOM学习笔记6——document对象 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 1.7 JavaScript BOM学习笔记7——location对象 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 1.8 JavaScript BOM学习笔记8——navigator对象和screen对象 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21 http://wawlian.iteye.com 第 2 / 21 页 1.1 JavaScript BOM学习笔记——window对象1 发表时间: 2011-10-19 BOM:Browser Object Model,浏览器对象模型。BOM是由一系列的对象组成的。其结构如下图所示。 可以看出,window对象是整个BOM的核心,因此,先讨论window对象。 (1)使用框架集的情况下 使用框架集合的情况下,每个框架都由他自身的window对象表示,存放在frames集合中。可以通过数字 或者名字对框架进行索引。看例子: http://wawlian.iteye.com 1.1 JavaScript BOM学习笔记——window对象1 第 3 / 21 页 我们可以通过window.frames[0]或者window.frames["topFrame"]引用顶层的框架。由于window对象是整 个BOM的核心,因此再写上面的代码时,可以忽略window对象不写,直接写frames[0]或者 frames["topFrame"]即可。 在框架中使用window对象,代表的是该框架本身。因此,还引入了top对象。该对象指向的是对顶层的框 架,也就是浏览器窗口。 此外,还有一个parent对象。顾名思义,parent指向该框架的父框架。看例子。 其中,anotherframeset.html的代码如下: http://wawlian.iteye.com 1.1 JavaScript BOM学习笔记——window对象1 第 4 / 21 页 如果在red.html或者blue.html中,parent指向parent.html中的rightFrame。如果代码写在parent.html中的 topFrame中,那么parent指向top对象,也就是浏览器窗口。还有一个指针self,它总是等于window。 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.1 JavaScript BOM学习笔记——window对象1 第 5 / 21 页 1.2 JavaScript BOM学习笔记——window对象2 发表时间: 2011-10-19 1.窗口操作: window对象对于操作浏览器窗口非常有用,开发人员可以利用window对象移动或者调整浏览器窗口大 小。主要操作有: New Document 如果需要知道浏览器的位置以及大小,由于各个浏览器实现的标准不同意,产生了一些问题: (1)IE提供了window.screenLeft和window.screenTop来判断窗口的位置,但是没有提供任何判断窗口大小 的方法。但是可以通过document.body.offsetWidth和document.body.offsetHeight来判断浏览器视口的大 小。 http://wawlian.iteye.com 1.2 JavaScript BOM学习笔记——window对象2 第 6 / 21 页 (2)Mozilla window.screenX和window.screenY来判断窗口的位置,使用window.innerWidth和 window.innerHeight判断视口大小,通过提供window.outerWidth和window.outerHeight判断浏览器大小; New Document 上面的例子,在IE8中的结果与上面的解释不一致。我怀疑上面的解释是针对早期版本的。 New Document http://wawlian.iteye.com 1.2 JavaScript BOM学习笔记——window对象2 第 7 / 21 页 这个例子在Firefox上倒是正常的。 尽管移动窗口和调整浏览器的位置是一件很酷的事情,但是应该尽量少用,这些会对用户的操作产生影响。 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.2 JavaScript BOM学习笔记——window对象2 第 8 / 21 页 1.3 JavaScript BOM学习笔记——window对象3 发表时间: 2011-10-20 1.导航和打开新窗口 window.open()方法可以打开新的窗口。该方法有四个参数: (1)新窗口url; (2)新窗口名称; (3)特性字符串 (4)新页面是否替换当前页面(Boolean值)只在调用该方法但不打开新窗口时有用 一般情况下会用到前面三个参数。 window.open("http://www.wrox.com","topFrame");这一行代码的效果类似用户点击链 接http://www.wrox.com,而其target="topFrame"。当然,专用的框架名_self,_parent,_top,_blank也是有效 的。 如果声明的第二个参数是无效的,则该窗口的特性由第三个参数决定。如果第三个参数省略,则类似于点 击链接target="_blank"。这意味着新窗口的设置,与默认的浏览器的设置完全一样。特性字符串使用逗号隔开 的设置列表。 window.open()方法的返回值是新产生窗口对象。可以利用该对象进行操作。示例: 被打开的窗口中,通过opener属性保存对打开该窗口的窗口的引用(呵呵,有点向绕口令)。上面的例 子中, alert(newWnd.opener==window)会显示true。 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.3 JavaScript BOM学习笔记——window对象3 第 10 / 21 页 1.4 JavaScript BOM学习笔记——window对象4 发表时间: 2011-10-20 1.系统对话框:window.alert(),window.confirm(),window.prompt() (1).window.alert(); 这个可能是写Javascript程序中最常见的用的最多的方法了。这个用来产生警示框,提示用户。 (2).window.confirm(); 例如window.confirm("确定吗?")。该对话框基本上与上面那个相似,只是除了OK按钮之外,还会出现 一个Cancel按钮。可以判断用户选择的结果。例子: http://wawlian.iteye.com 1.4 JavaScript BOM学习笔记——window对象4 第 11 / 21 页 (3)window.prompt(); 该方法提示用户输入一些信息。prompt方法接收两个参数:提示信息和文本框中的默认文本。例子 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.4 JavaScript BOM学习笔记——window对象4 第 12 / 21 页 1.5 JavaScript BOM学习笔记——window对象5 发表时间: 2011-10-24 1.浏览器状态栏 可以通过window对象的status和defaultStatus属性设置浏览器地址栏。前者可以使浏览器地址栏文本暂时改变,后者可 以在用户离开该页面前一直改变该文本。 可以在第一次载入页面时,使用默认的状态栏消息: window.defaultStatus = "You are surfing www.wrox.com"; 还可以用来显示链接的信息。(这一点在使用JavaScript URL时很有用,可以用来隐藏链接的实现细节) Books 2.时间间隔和暂停 可以通过window.setTimeout()方法设置暂停。该方法接收两个参数:要执行的代码和要等待的时间。第一个参数可以是 代码字符串,也可以是函数指针,下面的例子展示了三种写法。 window.setTimeout()方法会创建一个数字暂停ID,类似于OS中的进程ID。暂停ID本质上是要延迟的进程 ID。调用了setTimeout之后,就不再执行它的代码。如果要取消暂停,则可以使用clearTimeout()方法,并且 将暂停ID传给它。 设置时间间隔和设置暂停类似。只是它会无限次的每隔指定时间就执行指定的代码。设置时间间隔的函数是 setInterval()。在语法上,时间间隔和暂停几乎没有区别。 3. 浏览器历史 通过window.history的相关方法可以实现访问浏览器历史。 window.history.go():该方法接受一个参数,即前进或者后退的页数。正数代表前进,负数代表后退 http://wawlian.iteye.com 1.5 JavaScript BOM学习笔记——window对象5 第 15 / 21 页 window.history.back():后退 window.history.forward():前进 可以通过history.length属性查看到历史中的页面数 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.5 JavaScript BOM学习笔记——window对象5 第 16 / 21 页 1.6 JavaScript BOM学习笔记6——document对象 发表时间: 2011-10-25 document对象实际上是window对象的属性。因此alert(window.document==document)将返回true。 document对象的独特之处在于它既是BOM对象又是DOM对象。由于BOM没有可以指导实现的标准,因 此每个浏览器实现的document都有不同。 document对象有许多集合,提供对载入的页面的各个部位的访问,具体如下: 集合 说明 anchors 页面中所有锚的集合表示 applets 页面中所有applet集合 embeds页面中所有嵌入对象集合表示 forms 页面所有表单集合 images 页面所有图像集合 links 页面所有链接集合表示 可以通过数字(数组下标)或者名字引用document对象的每个集合。document.images[0]与 document.images["imagename"]都是合法的。见下面的例子:

Welcome to my Homeaway from home

此外,document对象还有write()和writeln()方法,接收一个参数,即要写入文档的字符串。这两个方法都会 将文本插入调用它们的地方。 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.6 JavaScript BOM学习笔记6——document对象 第 18 / 21 页 1.7 JavaScript BOM学习笔记7——location对象 发表时间: 2011-10-26 location对象既是window对象的属性,又是document对象的属性。它表示当前载入窗口的URL,此外,它还可以解析 URL: 解析项目 解释 举例 hash 若URL包含#,该方法将返回#之后的内容 http://www.a.com/index#selection1的hash就是 #selection1 host 服务器名 www.wrox.com hostname 通常等于host,有时省略www href 当前载入页面的url pathnameURL中主机后面的部分 http://a.com/pics/index.html的pathname是/pics/ index.html port 请求端口 默认情况下,大多数都没有端口信息,因此一般该属性 为空白。 http://www.a.com:8080的port为8080 protocol 协议 http、ftp等 search 执行GET请求的?之后的部分,也就是查询 字符串 ?username=aaa location.href可以用来获取或者设置窗口的URL,与document.URL类似。此外还可以使用location.assign()方 法。 如果不想让包含脚本的页面能从浏览器历史中被访问,那么可以使用location.replace()方法。 <!-- Insert your title here --> http://wawlian.iteye.com 1.7 JavaScript BOM学习笔记7——location对象 第 19 / 21 页 上面这段代码,当页面转到www.wrox.com之后,你再点击后退按钮是无效的。也就是说浏览器历史中已经没 有转向前的那个页面了。这一点需要注意。 location对象还有一个reload()。这个方法接受一个布尔值。false则表示从缓存中重新加载,true则表示从服 务器重新加载。默认为false。 location还有一个toString()方法,该方法返回location的href属性 最后再说一次,window.location 和 document.location是等价的,可以互相使用 参考书: 《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。 http://wawlian.iteye.com 1.7 JavaScript BOM学习笔记7——location对象 第 20 / 21 页 1.8 JavaScript BOM学习笔记8——navigator对象和screen对象 发表时间: 2011-10-26 1.navigator对象 navigator对象是window对象的属性,封装了很多与浏览器相关的信息。该对象主要用来检测用户使用的是 什么浏览器。各个浏览器对这个对象的支持差别很大。具体用到检测浏览器时可以上网搜。 2.screen对象 screen对象表示用户的屏幕。screen主要属性如下: 属性 解释 availWidth 屏幕可以使用的宽度 availHeight屏幕可以使用的高度 colorDepth 屏幕颜色位数,一般是32 width 屏幕宽度 height 屏幕高度 常见的screen用法: window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); 至此,JavaScript BOM的基本内容学习完了。 http://wawlian.iteye.com 1.8 JavaScript BOM学习笔记8——navigator对象和screen对象 第 21 / 21 页

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享文档获得金币 ] 4 人已下载

下载文档

相关文档