Unit04: BOM 概述 、 window 对象 、 window 常用子对象-1

回顾:

1. Form对象:

如何找到:document.forms[序号|name]

如何找到数据采集的元素:

document.forms[序号|name].elements[序号|name]

让元素获得或失去焦点:elem.focus()

elem.blur()

获得/失去焦点的事件:onfocus   onblur

获得当前正在获得焦点的元素:document.activeElement

事件:onsubmit 在表单正式提交前自动触发

对整个表单执行验证

form.onsubmit=function(){

只要任意一个验证未通过,

就*取消事件*:2步:

1. 获得event对象e:

var e=window.event||arguments[0];

if(e.preventDefault){

e.preventDefault() //DOM

}else{

e.returnValue=false //IE8

}

表单提交:2种:

- 直接点submit按钮;

- 如果当前form中任意元素获得焦点,可按回车自动提交;

只要自动表单提交前,都会先触发onsubmit,可做验证

【BOM】

BOM:操作浏览器窗口的对象;

1.window对象:2个角色;

- 充当全局对象;

- 所有BOM对象的上级;

属性:(只能获取,不能设置)

       - innerHeight;文档显示区的高度

       - innerWidth;

       - outerHeight;窗口高度;

       - outerWidth

       - pageYOffset;文档左上角到文档显示区左上角的距离;

       - pageXOffset;

打开连接:4种;

- 在当前窗口打开新连接,可后退;

html: target="_self";

js:[window.]open("url","_self")

- 在当前窗口打开新连接,禁止后退;

js:location.replace("新url");

- 在新窗口打开,可重复打开

html: target="_blank";

js:[window.]open("url","_blank")

- 在新窗口打开,不可重复打开

target-->目标窗口的名称

_self: 自动获得当前窗口名称

_blank: 创建一个新窗口,随机生成一个不重复的名字

*窗口名:内存中同一个窗口名只能打开一个;后打开的,会替换先打开的;

html: target="自定义窗口名";

js:[window.]open("url","自定义窗口名");

2.窗口大小与定位:

大小:

1. window.innerHeight/Width: 文档显示区宽高

outerHeight/Width: 整个窗口的宽高

2. screen.height/width: 桌面完整分辨率宽高

screen.availHeight/availWidth: 去掉任务栏后剩余分辨率的宽高

3. 调整大小:window.resizeTo(width,height)

调整到

resizeBy(变化的width,变化的height)

位置:

1. 左上角x坐标:window.screenLeft||window.screenX;

y坐标:window.screenTop||window.screenY;

2. 将窗口移动到指定坐标:window.moveTo(x,y)

3. 事件发生时,鼠标相对于整个屏幕的坐标:

event.screenX|screenY

3.定时器:动画;***   [4_1.html]

定时器:让浏览器按指定时间间隔反复执行同一任务

2种:

周期性定时器:让浏览器按指定时间间隔反复执行同一任务,如果不手动停止,则一直反复执行

一次性定时器:让浏览器等待一段时间间隔,执行一次任务,自动停止。

在一次性定时器的结尾,每次都重新启动一个一次性定时器

建议:尽量使用一次性定时器,代替周期性定时器

如何使用:周期性和一次性用法完全相同的

周期性:3件事:

1. 动画的每一步要执行的任务(函数对象)

function step(){

每一步要做的事情

}

2. 将一步的任务放入定时器,反复调用

timer=setInterval(step,间隔毫秒数)

3. 必须用全局变量,临时存储定时器的编号

clearInterval(timer)

一次性:3件事

1. 动画的每一步要执行的任务(函数对象)

function step(){

每一步要做的事情

/*根据条件判断是否有必要继续启动下一个定时器*/        }

2. 将一步的任务放入定时器,反复调用

timer=setTimeout(step,间隔毫秒数|等待毫秒数)

3. 必须用全局变量,临时存储定时器的编号

clearTimeout(timer)

停止正在等待的定时器

时间: 2024-10-12 20:00:09

Unit04: BOM 概述 、 window 对象 、 window 常用子对象-1的相关文章

JavaScript之DOM-6 BOM概述 、Window对象(Window对象概述、窗口与对话框、定时器)

一.BOM 概述 BOM 概述 - DHTML 对象模型回顾 BOM 概述 - BOM: Browser Object Model,浏览器对象模型,用来访问和操纵浏览器窗口,使 JavaScript 有能力与浏览器"对话" - 通过使用 BOM,可移动窗口.更改状态栏文本.执行其他不与页面内容发生直接联系的操作 - 没有相关标准,但被广泛支持 BOM 模型 - BOM 模型主要包括如下对象 二.Window 对象概述 Window 对象概述 - window 对象表示浏览器中打开的窗口

window对象的常用属性,常用方法

window对象的常用属性: window.self 返回当前窗口的引用 window.parent   返回当前窗体的父窗体对象 window.top 返回当前窗体最顶层的父窗体的引用 window.outerwidth       返回当前窗口的外部宽 window.outerheight  返回当前窗口的外部高 window.innerwidth       返回当前窗口的可显示区域宽 window.innerheight  返回当前窗口的可显示区域高 提示:通过直接在Chrome控制台中

jsWindow 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。 Window 对象集合 集合 描述 frames[] 返回窗口中所有命

一.JSX简介 JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 如下(JS写法) var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var

BOM的顶层对象window

BOM(Brower Object Model)浏览器对象模型 每打开一个浏览器,就会创建一个window对象(全局对象),所以BOM的顶层对象是window window可以直接使用var声明的全局变量和字面量的全局函数,即window.属性和window.方法. 全局属性(即变量)与window属性的异同: 相同:使用时没有区别,都可以用window.属性 不同:在进行删除时,可以成功删除window.属性创建的变量,但无法删除全局属性(即var声明的全局变量) var i=10; wind

JavaScript学习4:BOM之window对象

BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己的想法去扩展它,那么浏览器共有的对象就成了事实的标准,所以,BOM本身是没有标准的或者说是还没有哪个组织去为它制定标准. 本文我们主要来看BOM中的核心对象:Window对象 Window对象是BOM的核心对象,它表示浏览器的一个实例.Window对象处于JavaScript结构的最顶层(如下图所示),对于每个打开的窗口,系统都会自动为其定义window对象. 1 对象的属性和方法 Wi

09-js的window对象学习.html

<html> <head> <title>window对象学习</title> <meta charset="UTF-8"/> <!-- BOM浏览器对象模型:是规范浏览器对js语言的支持(js调用浏览器本身的功能). BOM的具体实现是window对象 window对象使用学习: 1.window对象不用new,直接进行使用即可,类似Math的使用方式,window关键字可以省略不写. 2.框体方法 alert:警告框

JavaScript函数和window对象

一.什么是函数 函数的含义:类似于Java中的方法,是完成特定任务的代码语句块 使用更简单:不用定义属于某个类,直接使用 二.常用系统函数 parseInt ("字符串")     将字符串转换为整型数字 如: parseInt ("86")将字符串“86”转换为整型值86 parseFloat("字符串") 将字符串转换为浮点型数字     如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.

window.undefined=window.undefined

在jquery中我们见到window.undefined=window.undefined的写法,今日又在ext中见到window["undefined"]=window["undefined"],对其写法非常不理解,将自身赋给自身有什么意义,在网上狂搜一番也没有明确的解释,后来看到ext注释写了这么一句:for old browsers,很明显是为了兼容老的浏览器,思虑半天,似乎有了些理解.   在较老的浏览器中,如IE5之前的浏览器,undefined并不是wi

JavaScript之DOM-7 Window常用子对象(navigator对象、location对象、history对象、screen对象)

一.navigator对象 navigator对象的作用 - navigator 对象包含有关浏览器的信息 - 常用于获取客户端浏览器和操作系统信息 常用属性和方法 二.location 对象 location 对象的作用 - location 对象包含有关当前 URL 的信息 - 常用于获取和改变当前浏览器的网址 常用属性和方法 三.history对象 history对象的作用 - history对象包含用户(在浏览器窗口中)访问过的URL的历史记录 常用属性和方法 四.screen对象 sc