04_JS_事件BOM&DOM
JavaScript+jQuery开发实战-JavaScript中的BOM操作

会使用定时函数和Date对象制作时钟特效
BOM模型2-1
BOM:浏览器对象模型(Browser Object Model)
整个BOM的核心
BOM提供了独立于内容的、可以与浏览器窗口进行互 动的对象结构
BOM模型2-2
BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小 页面的前进、后退
共性问题集中讲解
history对象
常用方法
名称
back() forward() go()
说
明
加载 history 对象列表中的前一个URL 加载 history 对象列表中的下一个URL 加载 history 对象列表中的某个具体URL
等价
history.back()
等价
history.go(-1) history.go(1)
演示示例2:window对象操作窗口
学员操作—制作当当购物车页面
练习
需求说明 单击“半闭”按钮时,关闭当前页面购物车页面 单击“移入收藏”弹出收藏提示 单击“删除”弹出确认删除提示 单击“结算”按钮,弹出结算信息页面窗口
完成时间:20分钟
共性问题集中讲解
常见问题及解决办法 代码规范问题 调试技巧
说
明
location和history对象的应用
主页面使用href实现跳转和刷新本页
示例
<a href="javascript:location.href='flower.html'">查看鲜花详情</a> <a href="javascript:location.reload()">刷新本页</a> <a href="javascript:history.back()">返回主页面</a>
javascript中的BOM与DOM、JS核心

JavaScript的核心是基于ECMAScript的,ECMAScript是与运行环境无关的语言,浏览器是ECMAScript的一个众所周知的运行环境,出了浏览器,js还可以运行在ps等等中。
javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document 属性就可以访问、检索、修改XHTML文档内容与结构。
因为document对象又是DOM (Document Object Model)模型的根节点。
可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。
其中DOM包含:windowWindow对象包含属性:document、location、navigator、screen、history、framesDocument根节点包含子节点:forms、location、anchors、images、links简记BOM:[wdlnshf]我到了你随后发简记DOM:[flail]服了爱了这些对象提供了一系列属性和方法,通过操作这些属性和使用这些方法,就可以实现操作浏览器窗体以及操作浏览器中载入的xhtml文档。
所以,使用javascript,主要就是使用js的基本语句以及BOM和DOM提供的对象的属性和方法,来操作各个BOM对象的属性以及各个DOM节点的属性甚至是结构,从而控制浏览器窗口行为和文档内容及其展示。
------------------------JavaScript这个东西,一开始上手觉得没什么,主要用来美化页面而已;但是随着对Web 开发的理解更加深入,尤其是对Web 2.0下开发的接触渐多,便会发现JavaScript其实是个十分有用的语言。
JS中的BOM

BOM1.什么是BOM?a)BOM Browers Object Model 浏览器对象模型2.为什么要学习BOM?a)因为BOM是浏览器提供给JS操作的一个对象模型,实现了JS可以通过操作BOM来实现浏览器的各种行为。
起到了桥梁和接口的作用,类似于空调的控制面板。
BOM的对象。
window对象在JS中是Global对象,window的对象是浏览器中的BOM对象,window中包含两部分:JS语法中的函数和浏览器中的对象。
window对象的子对象:document 子对象DOM的对象文档对象模型frames子对象浏览器框架集合对象history子对象浏览器历史信息对象location子对象浏览器位置信息对象navigator子对象浏览器导航对象,存放浏览器的信息screen子对象浏览器屏幕对象frames子对象:window的frame框架访问方式访问方式大概分为2种:frames[下标] 访问第N个框架页面的window对象frame[name名称] 访问框架页面中name属性为指定值的页面的window对象。
window的关系属性:window 表示当前页面的window对象也就是当前页面的BOM this 表示当前页面的window对象self 表示当前页面的window对象,在其他语言中self表示类,而JS中没有类所有this和self指向都是对象parent 如果在顶级页面,parent表示当前页面的window对象,如果在深层次的页面则表示上一层页面的window对象。
top 如果在顶级页面,top表示当前页面的window对象,如果在其他层次页面,则表示顶级页面的window对象。
opener 打开者后面窗口位置属性非火狐浏览器screenLeft 浏览器窗口距离屏幕左上角的水平距离screenTop 浏览器窗口距离屏幕左上角的垂直距离火狐浏览器screenX 浏览器窗口距离屏幕左上角的水平距离screenY 浏览器窗口距离屏幕左上角的垂直距离注意;IE浏览器从页面的内容区域(视窗)开始计算距离,而火狐和chrome则从浏览器本身开始计算窗口位置方法moveTo(横坐标,纵坐标)将浏览器窗口移动到指定的位置moveBy(长度,高度)将浏览器窗口在当前的位置上移动指定的长度和高度注意:两个参数都有可以为负数。
js bom函数

JavaScript的BOM函数详解在JavaScript中,BOM(浏览器对象模型)提供了许多用于与浏览器交互的对象和函数。
这些对象和函数使得JavaScript可以获取浏览器信息,操作浏览器窗口和标签页,以及处理浏览器事件等。
下面是一些常用的BOM函数:1.window.open():打开一个新的浏览器窗口或标签页。
这个函数可以接受多个参数,包括要打开的URL、窗口名称、窗口大小等。
2.window.close():关闭当前窗口或标签页。
需要注意的是,这个函数只能关闭由window.open()打开的窗口或标签页。
3.window.location:用于获取或设置当前窗口的URL。
这个对象包含了许多属性,例如href(完整的URL)、pathname(URL中的路径名)等。
4.window.alert()、window.confirm()、window.prompt():这些函数用于显示对话框,分别用于显示警告框、确认框和提示框。
这些对话框可以包含文本和输入字段,用户可以在其中输入文本或选择选项。
5.window.setTimeout()、window.setInterval():这些函数用于在指定的时间间隔后执行函数或指定的代码块。
setTimeout()只执行一次,而setInterval()则会每隔指定的时间间隔重复执行。
6.window.scrollTo()、window.scrollBy():这些函数用于滚动窗口到指定的位置或按指定的距离滚动。
这些函数可以接受坐标参数,例如x坐标和y坐标。
7.window.resizeTo()、window.resizeBy():这些函数用于改变窗口的大小。
resizeTo()接受一个表示新大小的参数,而resizeBy()则接受一个表示相对于当前大小的增加量或减少量的参数。
以上是BOM中常用的一些函数,它们为JavaScript提供了丰富的浏览器交互功能,使得JavaScript在网页开发中更加灵活和强大。
PHP基础教程_C13_javascript05

对象。Document对象这个分支又称为文档对象模型(Document Object Model,DOM)。
n通过DOM对象,程序员可以很方便地引用HTML文档中的各个对象。 n如下图:
parent、self、top、 Window对象
事件与this运算符
由于事件通常会调用一个函数,因此在函数体中处理数据时, 常常需要用到一些与对象相关的参数,此时就可以通过this运 算符来传递参数,this运算符代表的是对象本身。
<input type=‘button’ onclick=“myfun(this)” /> <script> function myfun(obj){ alert(obj); } </script>
5. Window对象
Window对象是一个全局对象、是所有对象的顶级对象。Window对象代表 的是打开的浏览器窗口。 Window对象的使用方法: Window对象、Document对象、Location对象、History对象、Screen对象 等都属于客户端的对象,这些对象不需要实例化,即不需要使用new运算 符来创建的对象。 在现实运用中,JavaScript允许使用一个字符串来给窗口命名,也可以使 用一些关键字来代替某些特定的窗口。例如,使用“self”代表当前窗口、 “parent”代表父级窗口等。对于这种情况,可以用这些字符串来代表 “window”。
事件处理程序的返回值
在JavaScript中并不要求处理程序有返回值。如果事件处理 程序没有返回值,浏览器就会以默认情况进行处理。但是, 在很多情况下程序都要求事件处理程序要有一个返回值,通 过该返回值来判断事件处理程序是否正确处理,或者通过该 返回值来判断是否进行下一步操作。在这种情况下,事件处 理程序返回值都为布尔值,如果为false则阻止浏览器的下一 步操作,如果为true则进行默认的操作。
JavaScript学习-BOM知识点小计

BOM知识点小计1. BOM概述1.1什么是BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性BOM缺乏标准,JavaScript语法标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分1.2DOM和BOM的区别DOM:●文档对象模型●DOM就是把[文档]当作一个[对象]来看待●DOM的顶级对象是document●DOM主要学习的是操作页面元素●DOM是W3C的标准规范BOM:●浏览器对象模型●把[浏览器]当做一个[对象]来看待●BOM的顶级对象是window●BOM学习的是浏览器窗口交互的一些对象●BOM是浏览器厂商在各自浏览器上定义的,兼容性较差1.3BOM的构成BOM比DOM更大,它包含DOMwindow对象是浏览器的顶级对象,它具有双重角色:1)、它是JS访问浏览器窗口的一个接口2)、它是一个全局对象。
定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert()、prompt()等注意:window下的一个特殊属性 2. window对象的常见事件2.1窗口加载事件Window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用处理函数注意:1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数2.Window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准3.如果使用addEventListener则没有限制DOMContentLoaded事件触发时,仅当DOM加载文档,不包括样式表,图片,flash 等。
JS中BOM和DOM常用的事件

JS中BOM和DOM常⽤的事件总结:window对象● window.innerHeight - 浏览器窗⼝的内部⾼度● window.innerWidth - 浏览器窗⼝的内部宽度● window.open() - 打开新窗⼝● window.close() - 关闭当前窗⼝navigator对象navigator.appName // web浏览器全称navigator.appVersion // web浏览器⼚商和版本的详细字符串erAgent // 客户端绝⼤部分信息navigator.platform // 浏览器运⾏所在的操作系统screen对象screen.availWiddth // 可⽤的屏幕宽度screen.avaliWidth // 可⽤的屏幕⾼度history对象window.history对象包含浏览器历史history.forward() //前进⼀页history.back() // 后退⼀页location对象window.location 对象⽤于获取当前页⾯的地址URL,并把浏览器重新定向到新的页⾯。
location.herf // 获取URllocation.herf="URL" // 跳转到指定页⾯location.reload() // 重新加载页⾯计时相关:setTimeout() // var t = setTimeout("js语句",毫秒)clearTimeout() // clearTimeout(setTimeout_variable)setInterval()clearInterval()DOM查找标签:直接查找document.getElementById // 根据Id获取⼀个标签document.getElementsByClassName // 根据class属性获取document.getElementsByTagName // 根据标签名称获取标签合集间接查找parentElement // ⽗节点标签元素children // 所有⼦标签firstElementChild // 第⼀个⼦标签元素lastElementChild // 最后⼀个⼦元素元素nextElementSibling // 下⼀个兄弟标签元素previousElementSibling // 上⼀个兄弟标签元素节点操作:创建节点:document.createElement(“标签名”)添加节点:追加⼀个⼦节点(作为最后的⼦节点)somenode.appendChild(newnode)把新增的节点放到某个节点的前边:somenode.insertBefore(newnode,某个节点)删除节点:获取要删除的元素,通过⽗元素调⽤该⽅法删除somenode.removeChild("要删除的节点")替换节点:some.node.replateChild(newnode,某个节点)属性节点:innerTextinnerHTMLsetAttributegetAttributeremoveAttribute⾃带属性可以直接.属性名获取和设置获取值操作:elementNode.value 适⽤于 input select textareacalss的操作:classList.remove(cls) 删除指定类classList.add(cls) 添加类classList.contains(cls) 存在返回true,否则返回falsecalssList.toggle(cls) 存在就删除,否则添加指定css操作:obj.style.对于没有中划线的css属性⼀般直接使⽤style.属性名即可对于有中划线的css属性⼀般将中划线后的第⼀个字母换成⼤写事件:HTML中的事件出发浏览器的actiononclick // 点击ondblclick // 双击onfocus // 获得焦点onblur // 失去焦点onchange // 域的内容被改变onkeydown // 键盘按键被按下onkeypress // 键盘按键被按下并且松开onkeyup // 键盘按键被松开onload // 完成加载onmousedown // ⿏标按下onmousemove // ⿏标被移动onmouseout // ⿏标从某元素移开onmouseover // ⿏标在某元素之上onselect // ⽂本框中的元素被选中onsubmit // 确认按钮被点击参考链接:。
JS操作BOM(一)

JS操作BOM(⼀)1.什么是BOMBOM:Document Object Model(⽂档对象模型)2.BOM分为:1.BOM Core2.HTML-BOM3.CSS-BOM3.节点和节点关系(结构排序之后像家族谱⼀样判断关系)⽂档:dpcument根节点:<html>(⽗节点)<html> (⽗节点)<body>(⼦节点)<title> (⼦节点) <img> <h1> <p>4.使⽤getElement⽅法访问指定节点、根据层次关系访问节点1.getElementById()2.getElementsByName()3.getElementsByTagName()5.节点的属性有:(使⽤getElement⽅法调⽤)1.parentNode2.chileNodes3.firstChlid (第⼀个⼦节点)stChild (最后⼀个⼦节点)5.nextSibling (下⼀个)6.previousSibling (上⼀个)6.根据层次关系访问节点1.firstElementChildstElementChild3.nextElementSibling4.previousElementSibling⽰例:document.getElementById("").firstElementChild.innerHTML || document.getElementById("").fristChild.innerHTML;7.节点信息1.nodeName 节点名称2.nodeValue 节点值3.nodeType 节点类型8.操作节点1.操作节点的属性⽰例:getAttribute("属性名");setAttribute("属性名","属性值");2.创建和插⼊节点createElement(aa) 创建⼀个标签名为aa的新元素节点A.appendChild(B) 把B节点追加⾄A节点的末尾insertBefore(A,B) 把A节点插⼊到B节点之前cloneNode(deep) 复制某个指定的节点3.删除和替换节点removeChild(node) 删除指定的节点replaceChild(newNode,oldNode) ⽤其他节点替换指定的节点⽰例:var aa = document.getElementByld("first");delNode.parentNode.removeChild(delNode);4.操作节点样式5.获取元素的样式。
javascript bom编程

一、简介JavaScript是一种广泛应用于网页交互的脚本语言,其最初设计用于在客户端(浏览器)中动态交互,操作DOM和BOM。
BOM (Browser Object Model)指代的是浏览器对象模型,它提供了一系列的对象和方法,使得JavaScript可以与浏览器进行交互。
二、BOM对象BOM由多个对象组成,这些对象都是JavaScript的内置对象,它们提供了一系列的方法和属性,用以控制浏览器的行为。
1. window对象window对象是BOM的核心对象,它代表了浏览器的一个窗口或一个框架,通过该对象可以访问和控制浏览器窗口的各种属性和方法,比如打开新窗口、关闭窗口、修改窗口尺寸等等。
2. navigator对象navigator对象提供了关于浏览器的信息,比如浏览器的类型、版本、操作系统等信息。
开发者可以利用这些信息来编写更加兼容不同浏览器的代码。
3. screen对象screen对象提供了关于用户屏幕的信息,比如屏幕的尺寸、分辨率等,开发者可以利用这些信息来进行不同设备的适配。
4. location对象location对象代表了浏览器的位置区域栏,可以通过该对象来获取当前页面的URL信息,或者进行页面的重定向等操作。
5. history对象history对象可以用来访问浏览器的历史记录,比如在历史记录中前进或后退。
6. document对象document对象代表了整个HTML文档,开发者可以通过该对象来获取和修改页面中的元素内容,实现动态页面交互。
三、BOM编程应用通过JavaScript与BOM的交互,开发者可以实现丰富的应用,比如通过window对象的方法打开新窗口,展示更多的内容;通过navigator对象的信息进行浏览器兼容性的处理;通过screen对象来进行不同设备的适配;通过location对象进行URL的跳转等等。
1. 弹出新窗口```javascriptwindow.open('网络协议xxx '_blank', 'width=500, height=500'); ```可以使用window对象的open方法来弹出一个新的浏览器窗口,参数分别代表要打开的URL、窗口名称、窗口的宽高等。
JS中的BOM操作

JS中的BOM操作1.获取浏览器的窗⼝尺⼨ window.innerWidth//获取窗⼝宽度 window.innerHeight//获取窗⼝的⾼度2.浏览器的弹出层 提⽰框:window.alert('提⽰信息') 询问框:window.confirm('提⽰信息') 输⼊框:window.prompt('提⽰信息')3.开启和关闭标签 开启:window.open('地址') 关闭:window.close()4.浏览器的常⽤事件 资源加载完毕:window.onload=function(){} 可视尺⼨改变:window.onresize=function(){} 滚动条位置改变:window.onscroll=function(){}5.浏览器的历史记录操作 回退页⾯:window.history.back() 前进页⾯:window.history.forward()6.浏览器卷去的尺⼨ 获取卷去⾼度: document.documentElement.scrollTop //页⾯包含<!DOCTYPEhtml> 获取卷去⾼度: document.body.scrollTop //页⾯不包含<!DOCTYPEhtml> 兼容写法: var height =document.documentElement.scrollTop||document.body.scrollTop 卷去的宽度:document.documentElement.scrollLeft //规则同上 卷去的宽度: document.body.scrollLeft7.浏览器滚动到 滚动到:window.scrollTo() 参数⽅式1:window.scrollTo(left,top) //瞬间到指定位置 left:卷去的宽度 top:卷去的⾼度 参数⽅式2:window.scrollTo({ left:xx, //卷去的宽度 top:xx, //卷去的⾼度 behavior:'smooth' //behavior表⽰定位⽅式:平滑滚动 })。
JS中的BOMDOM和事件

JS中的BOMDOM和事件概述: js包含ECMAScript、DOM、BOM。
BOM(browser object model)浏览器对象模型,使js获得了操纵浏览器的能⼒。
DOM(document object model)⽂档对象模型,使js获得了可以获取html内元素的能⼒。
BOM: window对象: window对象是客户端javascript的最⾼层对象之⼀,所有的浏览器都⽀持window对象,也可以粗暴的认为打开⼀个浏览器窗⼝或页⾯就是⽣成了⼀个window对象。
所有js全局对象,函数以及变量均为windows的对象的组成元素。
全局变量是window对象的属性,全局函数是window对象的⽅法,可以想想成python中的类,类中有静态属性和动态属性。
window⼦对象: 弹出框: 计时相关: js中我们可以设定⼀个时间间隔来执⾏代码,⽽不是在函数在调⽤之后⽴即执⾏,我们称为计时时间setTimeout()var t=setTimeout(“alert(123)”,1000) 等待1秒后执⾏,并且有返回值相当于计时事件的idsetInterval()var t=setTimeout(“alert(123)”,5000) 每5秒执⾏⼀次函数,并且有返回值相当于计时事件的idclearTimeout()clearTimeout(t)取消setTimeout设置clearInterval()clearInterval(t)参数必须是setInterval的返回值 以下是定时器的例⼦:<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>计时器</title></head><body><label for="i1">显⽰⽇期</label><input type="text" id="i1"><input type="button" value="开始" id="start_button"><input type="button" value="结束" id="stop_button"><script>var t;var startEle=document.getElementById("start_button");var stopEle=document.getElementById("stop_button");function foo_time() {var new_time=new Date();var str_time=new_time.toLocaleString();var i1Ele=document.getElementById("i1");i1Ele.value=str_time;};startEle.onclick=function () {if (t===undefined) {foo_time();t= setInterval(foo_time,1000);}};stopEle.onclick=function () {clearTimeout(t);console.log('cleartimeout',t);t=undefined;}</script></body></html>DOM: dom使js拥有了操纵html标签的能⼒。
JS中BOM相关知识点总结(必看篇)

JS 中BOM 相关知识点总结(必看篇)ECMAScript 是JavaScript 的核⼼,但是如果要在web 中使⽤javascript ,那么BOM(浏览器对象模型)才是真正的核⼼。
BOM 提供了很多对象,⽤于访问浏览器的功能,这些功能与任何⽹页内容⽆关。
window 对象:BOM 的核⼼对象是window ,它表⽰浏览器的⼀个实例。
在浏览器中,window 对象有双重⾓⾊,它既是通过javascript 访问浏览器窗⼝的⼀个接⼝,⼜是ECMAScript 规定的Global 对象。
因此,所有全局作⽤域中声明的变量、函数都会变成window 对象的属性和⽅法。
123456789101112131415<script type="text/javascript">var age=26;//这⾥定义的全局变量和全局函数被⾃动归在了window 对象名下function sayAge(){console.log(this.age);} console.log(window.age);//26 sayAge();//26 相当于window.sayAge() window.sayAge();//26//全局变量和在window 对象上直接定义属性的唯⼀区别:全局变量不能够通过delete 操作符删除,⽽直接在window 对象上定义的属性可以 window.color='red'; delete window.age; deletewindow.color; console.log(window.age);//26 console.log(window.color);//undefined </script>12345678<script type="text/javascript"> /* 还要注意:尝试访问未声明的变量会抛出错误,但是通过查询window 对象,可以知道某个可能未经声明的变量是否存在 *///这会抛出错误,因为oldValue 未定义var newValue=oldValue;//这不会抛出错误,因为是⼀次属性查询 var newValue=window.oldValue; </script>如果页⾯中包含框架,则每个框架都拥有⾃⼰的window 对象,并且保存在frames 集合中。
JavaScript深入理解之Bom对象详解

JavaScript深⼊理解之Bom对象详解写在前⾯当我们在 Web 中使⽤ JavaScript 的时候,BOM 对象——浏览器对象模型起着⾄关重要的作⽤。
BOM 提供了很多对象,⽤于访问浏览器的功能。
熟悉了解 BOM 对象对我们 WEB 开发有着重要的帮助,下⾯是我的⼀些理解和总结。
BOM 对象定义BOM是指浏览器对象模型,它是对⼀系列在浏览器环境中使⽤对象的统称,这些对象提供了访问浏览器的功能。
在BOM对象中,window对象是最顶层对象,在浏览器环境中它是⼀个Global全局对象,其它对象(如:DOM对象)对是这个对象的属性(⼦对象)。
BOM对象是与内容⽆关,主要⽤于管理浏览器窗⼝及窗⼝之间的通讯。
下⾯是BOM对象的组成结构:window 对象window 对象表⽰⼀个浏览器窗⼝或者⼀个 frame 框架,它处于对象层次的最顶端。
在浏览器中 window 对象有双重⾓⾊。
它既是通过JavaScript 访问浏览器窗⼝的⼀个接⼝,提供处理浏览器窗⼝的⽅法和属性。
⼜是 ECMAScript 中规定的 Global 对象,因此在全局作⽤域中声明的变量和函数都会成为 window 对象的属性和⽅法。
举个例⼦var age = 29;console.log(window.age); // 29简单来说,Global 对象只是作为 window 对象的⼀部分来实现的,window 对象相对于 Global 对象扩展了处理浏览器窗⼝的⽅法和属性。
DOM(document)相关对象DOM 可以认为是 BOM 的⼀个⼦集,DOM 中⽂档操作相关对象,如:Node、Document、Element 等 DOM 节点类型对象,都是做为window对象的⼦属性出现的。
document 是 window 对象的⼦属性,它是⼀个 Document 对象实例,表⽰当前窗⼝中⽂档对象。
通过该对象,可以对⽂档和⽂档中元素、节点等进⾏操作。
js之BOM操作

js之BOM操作js之BOM操作什么是BOMBOM:Browser Object Model 是浏览器对象模型,它使 JavaScript 有能⼒与浏览器进⾏“对话”。
浏览器对象模型提供了独⽴与内容的、可以与浏览器窗⼝进⾏互动的对象结构,BOM由多个对象构成,其中代表浏览器窗⼝的window对象是BOM的顶层对象,其他对象都是该对象的⼦对象。
window对象所有浏览器都⽀持 window 对象。
它表⽰浏览器窗⼝。
*如果⽂档包含框架(frame 或 iframe 标签),浏览器会为 HTML ⽂档创建⼀个 window 对象,并为每个框架创建⼀个额外的 window 对象。
*没有应⽤于 window 对象的公开标准,不过所有浏览器都⽀持该对象。
所有 JavaScript 全局对象、函数以及变量均⾃动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的⽅法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之⼀。
⼀些常⽤的Window⽅法:window.innerHeight - 浏览器窗⼝的内部⾼度window.innerWidth - 浏览器窗⼝的内部宽度window.open() - 打开新窗⼝window.close() - 关闭当前窗⼝navigator对象navigator对象表⽰浏览器的信息window.navigator.appName:浏览器名称;window.navigator.appVersion:浏览器版本;nguage:浏览器设置的语⾔;window.navigator.platform:操作系统类型;erAgent:浏览器设定的User-Agent字符串。
注意:来⾃ navigator 对象的信息具有误导性,不应该被⽤于检测浏览器版本,这是因为:1、navigator 数据可被浏览器使⽤者更改2、浏览器⽆法报告晚于浏览器发布的新操作系统screen对象screen对象表⽰屏幕的信息screen.width:屏幕宽度,以像素为单位;screen.availWidth:屏幕的可⽤宽度,以像素为单位screen.height:屏幕⾼度,以像素为单位;screen.availHeight:屏幕的可⽤⾼度,以像素为单位screen.colorDepth:返回颜⾊位数,如8、16、24。
JS总结之BOM

JS总结之BOMDOM的顶级对象是document,BOM的顶级对象是window,BOM包含DOM。
1.window对象的常见事件:onload事件DOMContentLoaded事件onload是等所有资源加载完毕触发,⽽DOMContentLoaded仅当DOM加载完成触发,不包括样式表、图⽚、flash等等,所以当两个事件同时出现时,DOMContentLoaded更快执⾏。
(DOMContentLoaded有兼容性,IE9以上⽀持)onresize事件调整窗⼝⼤⼩加载事件。
只要窗⼝⼤⼩发⽣变化,就会触发该事件,可以利⽤这个事件完成响应式布局。
当窗⼝宽度⼩于600px时隐藏div:<style type="text/css">#div{background-color: #0000FF;width:200px;height:200px;}</style><body><div id="div"></div><script type="text/javascript">var div=document.getElementById('div');window.addEventListener('resize',function(){if(window.innerWidth<=600){div.style.display='none'}})</script></body>setTimeout()和setInterval()window.setTimeout(回调函数,[延迟的毫秒数]);设置⼀个定时器,该定时器在到期之后执⾏回调函数。
延迟省略默认是0。
停⽌定时器:window.clearTimeout(timeoutID);window.setInterval(回调函数,[延迟的毫秒数]);setInterval()⽅法与setTimeout的区别是,setInterval每隔⼀段时间,就调⽤⼀次回调函数,⽽setTimeout只执⾏⼀次回调函数。
JS中的BOM应用

JS中的BOM应⽤我们曾经讲过JS由三部分组成,其中⼀个部分就是BOM,⽤于对浏览器进⾏操作。
这节课我们主要就来介绍BOM。
BOM基础我们先来看⼀个BOM的最基础功能:打开、关闭窗⼝:<html><head><meta charset="utf-8"><title>⽆标题⽂档</title></head><body><input type="button" value="打开窗⼝" onclick="window.open('/');" /></body></html>open⽅法⽤于打开⼀个窗⼝,相对的close⽅法⽤于关闭⼀个窗⼝。
这⾥我们可以⽤open⽅法实现⼀个应⽤:运⾏代码。
在这之前,我们要给⼤家补充⼀个关于document.write的⼩知识。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>⽆标题⽂档</title></head><body><input type="button" value="write" onclick="document.write('abc')" /></body></html>打开源码可以发现,当我们点击了按钮后,整个页⾯的源码就只剩下了“abc”——也就是说,如果document.write如果放在事件⾥⾯使⽤,会先将页⾯完全清空再重写。
可以看到,我们的运⾏代码案例,使⽤document.write⽅法是⾮常合适的:<html><head><meta charset="utf-8"><title>⽆标题⽂档</title><script>window.onload=function (){var oTxt=document.getElementById('txt1');var oBtn=document.getElementById('btn1');oBtn.onclick=function (){var oNewWin=window.open('about:blank', '_blank');oNewWin.document.write(oTxt.value);};};</script></head><body><textarea id="txt1" rows="10" cols="40"></textarea><br><input id="btn1" type="button" value="运⾏" /></body></html>其中_blank代表新打开⼀个窗⼝(在本窗⼝打开⽤_self),about:blank代表打开的是⼀个空⽩窗⼝,然后我们使⽤document.write向新窗⼝写⼊html,就可以在新窗⼝运⾏html代码了。
Javascript之BOM(window对象)

Javascript之BOM(window对象)摘⾃Rocky Ren分享到ECMAScript是JavaScript的核⼼,但在web使⽤JavaScript,那么BOM(浏览器对象模型)才是真正的核⼼。
BOM的核⼼对象是window,它表⽰浏览器的⼀个实例。
在浏览器中,window对象既是JavaScript访问浏览器窗⼝的⼀个接⼝,⼜是ECMAScript规定的Global对象。
也就是说,在⽹页中定义的任何⼀个变量、对象和函数以window作为其Global对象。
1.全局作⽤域既然window对象扮演着Global对象,那么所有在全局作⽤域中声明的对象、变量和函数都会变成window的属性和⽅法。
定义全局变量和在window对象上定义属性还是有差别的:全局变量不能通过delete删除,⽽在window对象上定义的属性则可以。
1 2 3 4 5 6 7 8 9var age=28;window.color="red";//在IE<9是抛出错误,在其他浏览器中都返回false delete window.age;//在IE<9是抛出错误,在其他浏览器中都返回true delete window.color; //return truealert(window.age); //28alert(window.color); //undefined在使⽤var语句添加window属性时,有⼀个名为[[Configurable]]的特性,这个特性的值被设置为false,因此这样定义的属性不可以通过delete删除。
在尝试访问未声明的变量会抛出错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在。
1 2 3 4//这⾥抛出错误,因为oldValue未声明var newValue=oldValue;//这⾥不会抛出错误,因为这是⼀次属性查询var newValue=window.oldValue // alert(newValue); //undefined其实很多全局JavaScript对象如localtion和navigator实际上都是window对象的属性。
js中的BOM和DOM

js中的BOM和DOM1.BOM(browser object model)浏览器对象模型由于BOM主要⽤于管理窗⼝与窗⼝之间的通讯,因此其核⼼对象是window;BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的⼀部分。
BOM由⼀系列相关的对象构成,并且每个对象都提供了很多⽅法与属性; document(⽂档对象) event(事件对象) location(地址对象) history(历史记录) navigator(浏览器对象) screen(屏幕对象)2.window对象window对象的属性和⽅法在调⽤时可以省略 window.页⾯加载事件:window.onload = function(){ // onload 中代码:需要等到页⾯的所有内容全部加载完成后才执⾏ // onload 只能有⼀个}所有的全局变量和全局函数都可以是window对象的属性和⽅法window对象的⽅法:①三个对话框:alert() 弹出框prompt("⽂字描述","默认值") 点击确定返回输⼊的值点击取消返回nullconfirm() 确认框点击确定返回true 点击取消返回false②两个定时器:a.setInterval(function(){ 要执⾏的任务},间隔时间) //连续执⾏的定时器clearInterval(定时器的名字) 清除定时器b.setTimeout(function(){ 要执⾏的任务},间隔时间) //⼀次性定时器表⽰延时多长时间后执⾏clearTimeout( 定时器名称 ) 停⽌定时器③window.open("新窗⼝路径","_blank","新窗⼝外观") 返回弹出的⼦窗⼝,可以不写_blank,默认是就是_blank 外观参数: width height left top eg:window.open("list.html","_blank","width=200,height=200");④console;最常⽤的就是console.log() 浏览器控制台打印3.DOM (document object Model)⽂档对象模型DOM是W3C标准,DOM的最根本对象是document(window.document)也就是可以说BOM包含了DOM;它的作⽤是将⽹页转化为⼀个Javascript对象,从⽽⽤Javascript进⾏各种操作(⽐如增删元素等)。
Javascript之BOM(History对象)

Javascript之BOM(History对象)
History 对象
History 对象包含⽤户(在浏览器窗⼝中)访问过的 URL。
History 对象是 window 对象的⼀部分,可通过 window.history 属性对其进⾏访问。
注释:没有应⽤于 History 对象的公开标准,不过所有浏览器都⽀持该对象。
IE: Internet Explorer, F: Firefox, O: Opera.
History 对象属性
属性描述IE F O
返回浏览器历史列表中的 URL 数量。
419
History 对象⽅法
⽅法描述IE F O
加载 history 列表中的前⼀个 URL。
419
加载 history 列表中的下⼀个 URL。
419
加载 history 列表中的某个具体页⾯。
419
History 对象描述
History 对象最初设计来表⽰窗⼝的浏览历史。
但出于隐私⽅⾯的原因,History 对象不再允许脚本访问已经访问过
的实际 URL。
唯⼀保持使⽤的功能只有、和⽅法。
例⼦
下⾯⼀⾏代码执⾏的操作与单击后退按钮执⾏的操作⼀样:
history.back()
下⾯⼀⾏代码执⾏的操作与单击两次后退按钮执⾏的操作⼀样:
history.go(-2)
来源: <>。
js bom案例

js bom案例摘要:1.BOM 的定义与作用2.JavaScript 中的BOM3.BOM 案例:简易计算器4.BOM 的优缺点5.BOM 的未来发展正文:1.BOM 的定义与作用BOM(Bill of Materials)即物料清单,是一种记录产品组成部件和原材料的清单,通常用于制造业、工程项目等领域。
在软件开发领域,BOM 也被广泛应用,用于描述软件的依赖关系、功能模块等。
2.JavaScript 中的BOM在JavaScript 中,BOM 是一个用于描述JavaScript 项目的依赖关系和模块结构的规范。
通过BOM,开发者可以清晰地了解项目的组成部分,方便团队协作和项目维护。
3.BOM 案例:简易计算器假设我们要开发一个简易计算器,可以使用BOM 来描述项目的结构和依赖关系。
BOM 可能如下所示:```json{"name": "简易计算器","version": "1.0.0","description": "一个简单的计算器","main": "index.js","dependencies": ["./lib/calculator.js","./lib/ui.js"],"devDependencies": ["./test/test.js"]}```在这个例子中,我们的项目包含三个模块:`calculator.js`用于实现计算器的逻辑,`ui.js`负责界面展示,`index.js`是项目的入口文件。
同时,我们还有一个测试文件`test.js`,用于对项目进行测试。
4.BOM 的优缺点BOM 的优点在于它可以帮助开发者清晰地了解项目的结构,方便团队协作和项目维护。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
事件处理实现方式一
• 事件处理实现方式常用的有两种,以例来 讲解
– 让用户在浏览器窗口中单击鼠标右键时不弹出 <html> 上下文菜单。
<head> • 实现原理:更改document对象上的oncontextmenu事 <script language="javascript"> 件的处理方式。 function hideCtxMenu(){ = false; } </script> </head> <body oncontextmenu=" hideCtxMenu()"> </body> </html>
window对象常用属性
名称 status 属性 screen对象 history 对象 event对象 location对象 对象 document对象 对象 说明 设置和返回窗口状态栏中当前正显示的文本内容 有关客户端的屏幕和显示性能的信息。 有关客户访问过的URL的信息 的信息 有关客户访问过的 有关当前事件的信息 有关当前 URL 的信息 表示浏览器窗口中的HTML文档,功能较多 表示浏览器窗口中的 文档, 文档
事件分类
• DOM标准定义了以下事件:
– 鼠标事件:用户使用鼠标进行选定操作时触发。 – 键盘事件:用户在键盘上敲击、输入时触发。 – HTML事件:窗口发生变动或者发生特定的客户端 -服务器交互时触发。
• DOM对事件的引用句柄是onxxx (xxx代表事件 名)
– 如:click事件,在HTML文档元素中引用时: onclick=“doClick()"
键盘事件
• 键盘事件由用户对键盘的动作引发:
– keydown-用户在键盘按下某个按键时发生。 注,一直按住不会触发 – keypress-用户按下某个按键并产生一个字符时 发生。注,一直按住,会持续发生 – keyup-释放某个按键时发生。
• 键盘事件的属性
<input type="text" name="txt" onkeydown="alert(event.keyCode)"/>
– 窗口的特征如下,可以任意组合(用逗号分隔,不能有空格):
– 发生键盘事件会给event对象的以下属性填入值
• keyCode属性 • srcElement属性
HTML事件
• 主要有:
– – – – – – load事件 事件-当HTML页面加载完后发生。在<body>上触发。 事件 unload事件-当HTML页面卸载完后发生。在<body>上触发。 abort事件-用户停止下载过程时,如果对象还未完全加载,就在其上触发。 error事件-JavaScript脚本出错时触发。在window上和图像上都有。 select事件 事件-用户选择了文本框的一个或多个字符时触发。 事件 change事件 事件
– 它是window对象和document对象的属性。location对象表示载入窗口的URL,此外它还 可以解析URI.
• navigator对象:
– navigator包含大量Web浏览器相关的信息。各种浏览器支持该对象的属性和方法不尽 相同。
• screen对象:
– 通过其可以获取用户屏幕相关的信息
• 鼠标事件的属性
– 每个鼠标事件都会给event对象的以下属性填入值:
• • • • 坐标属性 clientX,clientY type属性 srcElement属性 button属性
示例
//换图片的功能 this在这表示事件源对象 <img src="images/btn1.png" onmouseout="this.src='images/btn1.png'" onmouseover="this.src='images/btn2.png'"/> <img src="images/btn1.png" onmouseout="alert(event.clientX +','+event.clientY)" onmouseover=“alert(event.type)"/>
浏览器对象的分层结构
window 窗口对象
location 地址对象
document 文档对象
window.document.myform.text1 form 表单对象
BOM
• window对象:
– 是整个BOM的核心,window对象表示整个浏览器窗口,但不必表示其中包含的内容。
close ( ) showModalDialog("url“[,arg][, "窗口特征 "]) showModelessDialog() iTimerID =setTimeout(“代码或方法",毫秒 数)
window.open()说明
• window.open("打开窗口的url", "窗口名", "窗口特征")
• 当事件源上发生某个事件时,浏览器会包装一 个事件对象(event)的实例作为唯一的参数传给 事件处理方法,并开始逐一执行事件处理方法 的代码。
event对象
• event对象:代表事件状态,如事件发生的元素,键盘状态,鼠标位置 和鼠标按钮状态。常用属性:
– – – – – – type 事件的名称 altKey 事件发生时Alt键是否被按下,true代表按下 ctrlKey 事件发生时ctrl键是否被按下 shiftKey 事件发生时shift键是否被按下 clientX、clientY 设置或返回鼠标相对窗口客户区顶点的x、y坐标。 returnValue 设置或返回事件的返回值,以便浏览器判断是否继续对当前 事件按默认方式处理。一般设置为false时,将取器消当前事件的默认处理。 – srcElement 设置或返回事件源对象。 – keyCode 设置或返回键盘按下或弹起时的那个按键的unicode码。 – button 用于检索鼠标移动、按下、弹起时用的是哪个鼠标按键。
鼠标事件
• 由鼠标触发
– – – – – – – click-用户点击鼠标左键时发生。 dbclick-用户双击鼠标左键时发生。 mousedown-用户鼠标任一按钮按下时发生。 mouseup-用户松开鼠标任一按钮时发生。 mouseover-鼠标进入某个元素时发生。 mouseout-鼠标移出某个元素时发生。 mousemove-鼠标移动时发生。
• 文本框(域)失去焦点或内容改变时触发。 • 用户改变选择下拉列表的选项时触发。
– – – – – –
submit事件 事件-提交表单时,在<form/>上触发 事件 reset事件-重置表单时,在<form/>上触发 resize事件-窗口改变大小时触发。 在window上触发。 focus事件 事件-任何元素获得焦点时触发 事件 blur事件 事件-任何元素失去焦点时触发 事件 scroll事件-滚动条滚动时触发
document.oncontextmenu = hideCtxMenu; function hideCtxMenu(){ window.event.returnValue = false; } /* document.oncontextmenu = function(){ window.event.returnValue = false; } */ </script> </head> <body> </body> </html>
• 方式一:在事件源对象所对应的HTML标签 上增加一个要处理的事件属性,属性值等 于处理事件的函数名或程序代码。
实现方式二
• 直接在JS代码中,设置元素对象的事件属性, <html> 让事件属性值等于处理该事件的方法名或 <head> <script language="javascript"> 程序代码。
window对象
• window对象代表浏览器的整个窗口,可以 利用window对象控制浏览器窗口的各个方 面,如,改变状态栏上的显示文字、弹出 对话框、移动窗口的位置等。 • 在JS中,对window对象的属性和方法的引 用,可以省略“window”前缀。
– 如:window.alert("hello");可写成alert("hello");
Java高端培训
/qjyong
目标
事件处理模型
Java高端培训
BOM
– window对象等
DOM
– document对象 – form对象
常用表单验证 级联菜单
/qjyong
BOM
• 浏览器对象模型:它提供了独立于内容 , 而能与浏览器进行交互的对象。 • BOM体系结构:
• document对象:
– 这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看, document对象由一系列集合构成,这些集合可以访问文档的各个部分。
• frames属性:页面的框架的数组 • history对象:
– 存储有关客户访问过的URL的信息
• location对象:
JS出错时示例
<script language="javascript"> window.onerror = function(msg,url,line){ var str = "发生错误了:\n" + "行:" + line; str +="\nURL:" + url + "\n消息:" + msg; alert(str); //隐藏浏览器的错误信息提示 return true; } </script> <body onload="nonExistFunc()"> ... </body>