1.Dom对象的层次关系图
window
| -- location
| -- frames
| -- history
| -- navigator
| -- event
| -- screen
| -- document
| -- links | -- location
| -- images
| -- anchors
| -- filters
| -- forms
| -- applets
| -- embeds
| -- plugins
| -- frames
| -- scripts
| -- all
| -- selection
| -- styleSheets
| -- body
例子: 禁止右键弹出事件
function hideContextMenu(){
return window.event.returnValue=false;
}
<body onLoad="hideContextMenu()">
or
<body onLoad="return false">
效果一样
============= 2_1.window 对象 ============= window.alert("hello world");
-------------
window.confirm("hello world");
对话框
例子:
if(window.confirm("hello")==true){
alert("yes");
}else{
alert("no");
}
-------------
window.prompt()
可输入值的对话框
例子:
alert(window.prompt("年龄","18"));
-------------
window.navigate()
导航到某url
-------------
window.setInterval()
每隔多久执行一次此方法,执行多次
-------------
window.setTimeout("window.close()",5000) 5秒后关闭
过多久后执行此方法,执行一次
-------------
window.clearInterval()
取消setInterval
-------------
window.clearTimeout()
取消setTimeout
-------------
window.MoveTo()
window.resizeTo()
-------------
window.open() 对应的关闭 window.close()
打开一个新窗口
-------------
window.showModalDialog()
打开模态对话框
============= 2_2.window 对象 frames数组对象 =============
parent的使用主html
<html>
<frameset rows="20%,80%">
<frame name="top" src="top.html" />
<frame name="bottom" src="bottom.html" />
</frameset>
</html>
top.html
<input type="button" value="刷新" onClick="window.parent.frame[1].location.reload()" />
或者
<input type="button" value="刷新" onClick="parent.frame[1].location.reload()" />
或者
<input type="button" value="刷新" onClick="parent.frame[‘bottom’].location.reload()" />
或者
<input type="button" value="刷新" onClick="window.parent.item(1).location.reload()" />
或者
<input type="button" value="刷新" onClick="window.parent.item('bottom').location.reload()" />
或者
<input type="button" value="刷新" onClick="window.parent.bottom.location.reload()" />
top的使用
top.html
<frameset rows="20%,*" >
<frame name="a" />
<frame name="x" src="bottom" />
</frameset>
bottom.html
<frameset cols="300%,*" >
<frame name="b" />
<frame name="c" src="bottom_right" />
</frameset>
buttom_right.html
<script>
top.a.document.write("i love this game");
</script>
或者
<script>
parent.parent.document.write("i love this game");
</script>
============= 2_2.window 对象 event对象 =============
属性:
altKey return boolean
ctrlKey
shiftKey
clientX 返回窗口客户区坐标(不包括边框和滚动条)
clientY
screenX 鼠标相对窗口坐标
scrrenY
offsetX 鼠标相对事件源坐标
offsetY
x 鼠标相对事件源父元素顶点坐标
y
returnValue 设置false,相当于取消操作
cancelBubble 示例讲解:张孝祥JavaScript dom 20:00
srcElement 返回当前事件源对象
keyCode 返回键盘unicode码值
button
============= 2_3.window 对象 .事件 =============
专用事件:
onload() 网页加载事件
onunload() 关闭网页后事件
onbeforeunload() 关闭网页前事件
浏览器是边加载文本内容边执行函数,最后才加载事件:请看以下例子:
<sript>
alert("ok1");
<body onload="alert('byebye')">
hello
</body>
alert("ok2");
alert("ok3");
</script>
执行的顺序是 : ok1 hello ok2 ok3 byebye
通用事件:
onclick()
onmousemove()
onmouseover()
onmouseout()
onmousedown()
onmouseup()
onkeydown()
onkeyup()
onkeypress() 按下并弹起后事件
============= 2_3.window 对象 .属性 =============
分享到:
相关推荐
### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM(Document Object Model)文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档(如HTML和XML)的标准方法来访问、修改文档...
从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走
JavaScript DOM 学习笔记 JavaScript DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构,其中每个节点都代表文档中的一个...
本篇学习笔记主要探讨了DOM的基础知识,包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**:作为整个文档的顶级节点,它包含了文档的全部内容。 - **DocumentType**:表示文档...
韩顺平js-DOM学习笔记
这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...
以上是JavaScript学习笔记中提到的一些核心知识点,通过对这些知识点的理解和熟练应用,可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中,结合具体的项目需求,这些知识会得到更深入的拓展和应用...
在这个学习笔记中,涵盖了从基础到高级的JavaScript和DOM操作技巧,一共涉及1~9章的内容。以下是对这些章节知识点的详细阐述: **第1章:JavaScript简介** 本章介绍了JavaScript的基本概念,包括它是一种解释型、弱...
在"Javascript_DOM学习笔记+代码"中,你可能会发现具体的示例代码和练习,这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践,你将能够熟练地操纵网页内容,创建动态交互的Web应用。
根据给定的文件信息,我们可以总结出以下关于DOM(Document Object Model)操作的关键知识点: ### DOM简介 DOM是一种处理HTML和XML文档的标准接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM...
### JavaScript DOM 编程知识点详解 #### 一、DOM 基础概念 **DOM (Document Object Model)** 是一种用于表示 HTML 和 XML 文档的标准对象模型。它将文档定义为节点树,允许开发者通过编程方式访问和修改这些节点...
总的来说,JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用,是学习网页动态交互和JavaScript编程的重要资源。通过学习,开发者能够熟练地创建交互式、动态的网页内容。
本资源摘要信息基于黑马视频记录的学习笔记,涵盖了 JavaScript 基础知识点,包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构:head、body、title、meta、link、script 等标签的...
JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...
1. JavaScript基础知识:学习DOM编程之前,首先要掌握JavaScript的基础语法,包括变量声明、数据类型、控制结构(如if语句和循环)、函数定义与调用等。理解这些基础知识对于后面深入学习DOM操作至关重要。 2. DOM...
### JavaScript达内学习笔记知识点详解 #### 一、JavaScript简介 1. **JavaScript**是由网景公司在1995年开发的一种脚本语言。它是一种轻量级的编程语言,无需编译,直接由浏览器解释执行。JavaScript的主要作用...
javascript中与DOM相关的一些知识点的简要整理,个人学习笔记
本学习笔记旨在帮助初学者快速掌握JavaScript的核心概念和技术,实现从入门到精通的过渡。 1. **基础语法** - 变量声明:JavaScript支持var、let和const关键字声明变量,理解它们的作用域和提升特性至关重要。 - ...