文档章节

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

查封炉台
 查封炉台
发布于 2014/06/29 11:21
字数 1858
阅读 25
收藏 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程序的展现却日渐丰富。当时在没有...

奇葩界张三
2018/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
浅谈零基础新手学HTML5前端开发学习路线

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

Java编程语言基础入门博客
2017/04/04
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
2018/07/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

利用神器BTrace 追踪线上 Spring Boot应用运行时信息

概述 生产环境中的服务可能会出现各种问题,但总不能让服务下线来专门排查错误,这时候最好有一些手段来获取程序运行时信息,比如 接口方法参数/返回值、外部调用情况 以及 函数执行时间等信...

CodeSheep
42分钟前
3
0
OSChina 周四乱弹 —— 我想过年请假提前回家两天

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy :#每日一歌# 分享王力宏的单曲《爱错》 《爱错》- 王力宏 手机党少年们想听歌,请使劲儿戳(这里) @Caremorele :这几天起床有点...

小小编辑
今天
84
5
Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
3
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部