文档章节

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

查封炉台
 查封炉台
发布于 2014/06/29 11:21
字数 1858
阅读 23
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

麒麟AI首席科学家现世

8月31日,华为发布了新一代顶级人工智能手机芯片麒麟980,成为全球首款7nm工艺手机芯片,AI方面也实现飞跃,支持人脸识别、物体识别、物体检测、图像分割、智能翻译等。 虽然如今人人都在热议...

问题终结者
昨天
1
0
告警系统主脚本、告警系统配置文件、告警系统监控项目

告警系统主脚本 main.sh内容 #!/bin/bash#Written by aming.# 是否发送邮件的开关export send=1# 过滤ip地址export addr=`/sbin/ifconfig |grep -A1 "ens33: "|awk '/inet/ {pr...

芬野de博客
昨天
2
0
MySQL autocommit探究

-- sessionA:tx_isolation=REPEATABLE-READmysql> select connection_id();+-----------------+| connection_id() |+-----------------+| 28 |+-----------------+......

安小乐
昨天
7
0
c++多线程锁 Mutex  自动判断死锁

c++多线程锁可以使用absl::Mutex std::mutex这两种,下面是demo代码。 使用absl:Mutex的时候打印: [mutex.cc : 1338] RAW: Cycle: [mutex.cc : 1352] RAW: mutex@0x683b68 stack: @ 0x43856......

青黑
昨天
3
0
Blockathon2018(成都站)比赛落幕,留给我们这些区块链应用思考

9月14日,HiBlock区块链社区主办的第二届Blockathon在成都菁融国际广场成功举行,30名参赛者分为5支队伍在48小时内完成区块链项目的创意、开发及路演,经过紧张的开发及现场评选,最终币托(...

HiBlock
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部