文档章节

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

查封炉台
 查封炉台
发布于 2014/06/29 11:21
字数 1858
阅读 23
收藏 0
点赞 0
评论 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文档使用说明.



© 著作权归作者所有

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

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

奇葩界张三
06/29
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的BOM

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

JandenMa
07/08
0
0
第一章 JavaScript简介《JavaScript高级程序设计》

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

walala_Lee
2013/07/04
0
3
从零开始学 Web 之 JavaScript(一)JavaScript概述

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间...

fengdaoting
06/03
0
0
Javascript---Javascript简介

javascript 是一门面向对象的动态语言。虽然在字面中带有java的字样但是千万不能和java混淆。 javascript的主要运用在web开发中,做交互方面的开发让交互变得更加的有意思和人性化。 ————...

不起眼的过路Sir
2014/09/26
0
0
关于Javascript技术体系

Javascript技术体系主要包含了五个方面的内容: Javascript核心语言定义:每一种编程语言都有自已的核心语法,包括数据类型,变量,常量,运算符,语句等。 原生对象和内置对象:为方便程序员...

倪九林
2014/09/15
0
0
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
06/05
0
0
PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编
04/24
0
0
JavaScript零基础入门——(十三)JavaScript的事件

JavaScript零基础入门——(十三)JavaScript的事件 大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了...

JandenMa
07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Application Express安装

Application Express安装文档 数据库选择和安装 数据库选择 Oracle建议直接12.2.0.1.0及以上的版本,12.1存在20618595bug(具体可参见官方文档) Oracle 12c 中安装oracle application expr...

youfen
8分钟前
0
0
OpenMessaging概览

序 本文主要研究一下OpenMessaging 架构图 namespace,类似cgroup的namespace,用来进行安全隔离,每个namespace有自己的producer、consumer、topic、queue等 producer,消息生产者有两类,一...

go4it
13分钟前
0
0
MySQL索引类型

MySQL目前主要有以下几种索引类型: 1.普通索引 2.唯一索引 3.主键索引 4.组合索引 5.全文索引

灯下草虫鸣_
14分钟前
0
0
spring boot2.x设置quartz对一个job顺序执行

背景 使用quartz时,如果一个job的是1分钟,但是执行却要2分钟,quartz默认的是不会等job执行结束后,再执行下一次job,默认是会再开启一个线程执行该次job,这就可能导致一些重复执行的BUG...

EasyProgramming
19分钟前
0
0
iOS定向阴影的探讨

view.layer.shadowColor = [UIColor blackColor].CGColor; view.layer.shadowOpacity = 0.8f; view.layer.shadowRadius = 4.f; view.layer.shadowOffset = CGSizeMake(0,0); ......

RainOrz
30分钟前
0
0
oracle使用jdbc报错Locale not recognized解决方法

在开启数据库连接之前和之后添加时区参数:

源哥L
34分钟前
0
0
django2.0正则表达

re_path("userdetail-(?P<nid>\d+)/",views.user_detail), 解析时用re_path 否则出现not find page

南桥北木
37分钟前
0
0
Mac 安装jd-gui

安装brew 命令行输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 回车 安装jd-gui brew cask install jd-gui......

张欢19933
44分钟前
0
0
占坑

00000000000000000000000000000000000000000000000

钟元OSS
45分钟前
0
0
编程学习读书笔记之jQuery函数应用学习心得(图)

编程学习读书笔记之jQuery函数应用学习心得(图) jQuery.extend() 函数 用于将一个或多个对象的内容合并到目标对象。 1.当提供两个或多个对象给.extend(),对象的所有属性都添加到目标对象(...

原创小博客
47分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部