文档章节

2014-06-29 Web-Front的学习(4)-----JavaScript中BOM基础及事件

查封炉台
 查封炉台
发布于 2014/06/29 11:21
字数 1858
阅读 24
收藏 0

1.BOM基本概述

BOM(Browser Object Model),浏览器对象模型,使JavaScript可以与浏览器之间对话,交流.还没有正式的标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性.

  •       Window 对象

  •       Navigator 对象

  •       Screen 对象

  •       History 对象

  •       Location 对象

2.Window 对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的window对象。
相关方法和属性:
    window.frames 返回窗口中所有命名的框架
    parent是父窗口(如果窗口是顶级窗口,那么parent==self==top)
    top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)
    self是当前窗口(等价window)
    opener是用open方法打开当前窗口的那个窗口
注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

示例:实现父子窗口信息通信
父窗口代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>window对象 </title>
  <meta http-uqive="content-type" content="text/html;charset=UTF-8">
  <style>
     div{
	    width:200px;
		height:100px;
		border:1px solid red;
	 }
  </style>
  <script>
     function getParentValue(){
		 var parentValue = document.getElementById("parentValue").value;
		// self.frames[0].document.getElementsByName("childText")[0].value=parentValue; //通过下表访问
		//通过名字访问.
		self.frames["02child"].document.getElementsByName("childText")[0].value=parentValue;
	 }
	 function openWin(){
		 window.open("02opener.html","","");
	 }
  </script>
 </head>
 <body>
  <div id="display"></div><br/>
  <input type="text" id="parentValue"/><input type="button" value="父窗口传值到子窗口" onclick="getParentValue()"/><input type="button" value="opener" onclick="openWin()" /><hr/>
  <iframe src="02子窗口.html" name="02child"></ifream><br/>
 </body>
</html>
子窗口代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Opener</title>
	<script>
	   alert(self.opener.document.getElementById("parentValue").value);
	</script>
 </head>
 <body>
 </body>
</html>

实现模式对话框:
模式对话框主页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>js模式对话框</title>
  <script>
    function getDialogValue(){
	   var cval = window.showModalDialog("01modal.html");
	   document.getElementById("city").value=cval;
	}
  </script>
 </head>
 <body>
    <input type="text" id="city" name="city"/>
	<input type="button" value="请选择城市" onclick="getDialogValue()"/>
 </body>
</html>

模式对话框弹出页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>模式对话框</title>
  <script type="text/javascript">
     function getValue(obj){
		 window.returnValue = obj.value;
		 window.close();
	 }
  </script>
 </head>
 <body>
    <input type="radio" name="city" onclick="getValue(this)" value="北京"/>北京</input>
	<input type="radio" name="city" onclick="getValue(this)" value="武汉"/>武汉</input>
	<input type="radio" name="city" onclick="getValue(this)" value="广州"/>广州</input>
	<input type="radio" name="city" onclick="getValue(this)" value="上海"/>上海</input>
 </body>
</html>

Window对象中comfirm(),prompt(),location()等方法的使用,可以查询W3C官方文档.在HTML DOM下可以查询到BOM多个对象的属性和方法.

1.setInterval(code,millisec[,"lang"])
    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭
2.setTimeout(code,millisec) 
    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

3.History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
History中的方法使用:
    back()  加载 history 列表中的前一个 URL 
    forward()  加载 history 列表中的下一个 URL 
    go()  加载 history 列表中的某个具体页面

4.Location 对象

Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 
属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 
属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 
location.href。
不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 
对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 
URL 所指的文档装载进来,并显示出来。
除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 
对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 
属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 
属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。
除了 URL 属性外,Location 对象的 reload() 
方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档

5.Screen对象

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 
程序将利用这些信息来优化它们的输出,以达到用户的显示要求。例如,一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,它还可以根据显示器的颜色深度选择使用 
16 位色还是使用 8 位色的图形。另外,JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

6.Navigator对象

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是Netscape的Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象.
Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。

7.JavaScript常用事件

  • 鼠标移动事件(mousemove/mouseout/mouseover)

  • 鼠标点击事件(click/dblclick/mousedown/mouseup)

  • 加载与卸载事件(load/unload)

  • 聚焦与离焦事件(focus/blur)

  • 键盘事件(keydown/keyup/keypress)

  • 提交与重置事件(submit/reset)

  • 选择与改变事件(select/change)


更多的Js事件概述和使用,请查看W3C文档使用说明.



© 著作权归作者所有

共有 人打赏支持
查封炉台
粉丝 50
博文 56
码字总数 138491
作品 0
景德镇
程序员
私信 提问
由浅入深JavaScript——JavaScript的诞生背景

JavaScript的诞生背景 在上世纪90年代,欧美各国的web程序日益流行,但是当时用户上网还都在使用电话拨号上网,通过 调制解调器,网速仅仅只有28kb/s。而web程序的展现却日渐丰富。当时在没有...

奇葩界张三
06/29
0
0
浅谈零基础新手学HTML5前端开发学习路线

  浅谈HTML5前端开发学习路线。学习HTML5开发先学学HTML、CSS3、JS这些基本的知识,HTML5学习入门的内容基本差不多,但是学习的成果却千差万别,这就是所谓的基础,所谓万丈高楼平地起,地...

Java编程语言基础入门博客
2017/04/04
0
0
JavaScript 学习(2)

参考: http://www.w3cschool.cc/js/js-window.html 四、浏览器 BOM 浏览器对象模型(BOM)使JavaScript有能力与浏览器“对话”。 (1)Window 浏览器对象模型(Browser Object Model),尚无...

明天以后
2014/10/01
0
0
第一章 JavaScript简介《JavaScript高级程序设计》

本系列文章是《JavaScript高级程序设计》(第二版) 中文 的缩水版,希望通过对书籍内容的转述,一方面能加深自己对于JavaScript的理解,另一方面也能让其他人学习了解JavaScript这门语言。如有...

walala_Lee
2013/07/04
0
3
JavaScript零基础入门——(十四)JavaScript的BOM

JavaScript零基础入门——(十四)JavaScript的BOM 大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们了解了JavaScript的事件,这一节课,我们以JavaScript的BOM,来结束JavaScrip...

JandenMa
07/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小白带你认识netty(三)之NioEventLoop的线程(或者reactor线程)启动(一)

在第一章中,我们看关于NioEventLoopGroup的初始化,我们知道了NioEventLoopGroup对象中有一组EventLoop数组,并且数组中的每个EventLoop对象都对应一个线程FastThreadLocalThread,那么这个...

天空小小
50分钟前
0
0
PHP动态扩展Redis模块

查看已有模块 [root@test-a ~]# /usr/local/php/bin/php -m[PHP Modules]bz2Core...zlib[Zend Modules] 下载包,解压,生成configure文件 [root@test-a ~]# cd /usr/local/src/[ro......

野雪球
今天
1
0
在Ignite中使用线性回归算法

在本系列前面的文章中,简单介绍了一下Ignite的机器学习网格,下面会趁热打铁,结合一些示例,深入介绍Ignite支持的一些机器学习算法。 如果要找合适的数据集,会发现可用的有很多,但是对于...

李玉珏
今天
2
0
Mybatis应用学习——简单使用示例

1. 传统JDBC程序中存在的问题 1. 一个简单的JDBC程序示例: public class JDBCDemo {public static void main(String[] args) {Connection con=null;PreparedStatement statemen...

江左煤郎
今天
2
0
使用JavaScript编写iOS应用业务逻辑

JSAUIKitCocoa使你可以使用JavaScript编写对性能要求不高但可能变动性很大的iOS应用的业务逻辑部分,View组件、需要多线程支持的Model等则直接使用原生对象。 编写方式与React Native相似,但...

neal01
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部