`

JavaScript Dom 学习笔记

阅读更多
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 学习笔记第1 2页.docx

    ### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM(Document Object Model)文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档(如HTML和XML)的标准方法来访问、修改文档...

    JavaScript HTML DOM学习笔记.emmx

    从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走

    js DOM学习笔记11

    JavaScript DOM 学习笔记 JavaScript DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构,其中每个节点都代表文档中的一个...

    比较详细的javascript DOM 学习笔记第1/2页

    本篇学习笔记主要探讨了DOM的基础知识,包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**:作为整个文档的顶级节点,它包含了文档的全部内容。 - **DocumentType**:表示文档...

    韩顺平javascript 韩顺平js-DOM学习笔记

    韩顺平js-DOM学习笔记

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...

    JavaScript-学习笔记.pdf

    以上是JavaScript学习笔记中提到的一些核心知识点,通过对这些知识点的理解和熟练应用,可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中,结合具体的项目需求,这些知识会得到更深入的拓展和应用...

    javaScript DOM编程艺术2版学习笔记

    在这个学习笔记中,涵盖了从基础到高级的JavaScript和DOM操作技巧,一共涉及1~9章的内容。以下是对这些章节知识点的详细阐述: **第1章:JavaScript简介** 本章介绍了JavaScript的基本概念,包括它是一种解释型、弱...

    JS基本功DOM学习笔记

    在"Javascript_DOM学习笔记+代码"中,你可能会发现具体的示例代码和练习,这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践,你将能够熟练地操纵网页内容,创建动态交互的Web应用。

    传播智客扬中科老师讲的DOM 学习笔记

    根据给定的文件信息,我们可以总结出以下关于DOM(Document Object Model)操作的关键知识点: ### DOM简介 DOM是一种处理HTML和XML文档的标准接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM...

    JavaScript_DOM编程—新版学习笔记.txt

    ### JavaScript DOM 编程知识点详解 #### 一、DOM 基础概念 **DOM (Document Object Model)** 是一种用于表示 HTML 和 XML 文档的标准对象模型。它将文档定义为节点树,允许开发者通过编程方式访问和修改这些节点...

    JavaScript DOM编程艺术(中文第二版)学习笔记

    总的来说,JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用,是学习网页动态交互和JavaScript编程的重要资源。通过学习,开发者能够熟练地创建交互式、动态的网页内容。

    JavaScript基础学习笔记

    本资源摘要信息基于黑马视频记录的学习笔记,涵盖了 JavaScript 基础知识点,包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构:head、body、title、meta、link、script 等标签的...

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...

    JavaScript dom编程艺术:个人笔记.pdf

    1. JavaScript基础知识:学习DOM编程之前,首先要掌握JavaScript的基础语法,包括变量声明、数据类型、控制结构(如if语句和循环)、函数定义与调用等。理解这些基础知识对于后面深入学习DOM操作至关重要。 2. DOM...

    JavaScript达内学习笔记

    ### JavaScript达内学习笔记知识点详解 #### 一、JavaScript简介 1. **JavaScript**是由网景公司在1995年开发的一种脚本语言。它是一种轻量级的编程语言,无需编译,直接由浏览器解释执行。JavaScript的主要作用...

    javascript个人学习笔记

    javascript中与DOM相关的一些知识点的简要整理,个人学习笔记

    JavaScript学习笔记

    本学习笔记旨在帮助初学者快速掌握JavaScript的核心概念和技术,实现从入门到精通的过渡。 1. **基础语法** - 变量声明:JavaScript支持var、let和const关键字声明变量,理解它们的作用域和提升特性至关重要。 - ...

Global site tag (gtag.js) - Google Analytics