JavaScript 入门基础 (六)

喜欢ヅ旅行 2022-05-28 03:21 271阅读 0赞

**目录**

--------------------

[1、JavaScript概述][1_JavaScript]

[2、HTML世界][2_HTML]

[3、JavaScript基本语法][3_JavaScript]

[4、JavaScript语句][4_JavaScript]

[5、JavaScript内置对象][5_JavaScript]

[6、Document对象][6_Document]

[7、window和frame][7_window_frame]

[8、表单对象][8]

[9、了解其他常用对象][9]

**Document对象**

--------------------

6.1使用Document对象

属性和方法

<table style="direction:ltr; border-collapse:collapse; border-style:solid; border-color:#A3A3A3; border-width:1pt; margin-left:.7076in"> 
 <tbody> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> 属性 </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 功能说明 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> title </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档的标题 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> bgColor </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档的背景色 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> fgColor </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档的前景色 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> alinkColor </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示激活链接的颜色 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> linkColor </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示链接的颜色 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> vlinkColor </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示已经浏览过的链接的颜色 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> URL </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档对应的URL </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> domain </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示提供文档的服务器域 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> lastModified </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档最后修改的时间 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> cookie </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中的所有HTML标记符的数组 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> applets </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中所有applets的信息，每一个applet都是这个数组中的一个元素 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> anchors </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中所有的(带NAME属性的超级链接)(锚)的数组 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> forms </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中所有的表单信息，每一个表单都是这个数组的一个元素 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> images </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中所有的图像信息，每一个图像都是这个数组的一个元素 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> links </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中所有的超级链接信息，每一个超级链接都是这个数组的一个元素 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> referrer </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示链接到当前文档的URL </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.1048in; padding:4pt 4pt 4pt 4pt"> embeds </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.2375in; padding:4pt 4pt 4pt 4pt"> 表示文档中所有的嵌入对象的信息，每一个嵌入对象都是这个数组的一个元素 </td> 
 </tr> 
 </tbody> 
</table>

访问和处理文档

<html>

<head>

<title>编写JavaScript脚本</title>

</head>

<scriptlanguage="JavaScript">                                //JavaScript脚本标注

document.writeln("<pre><h3>在页面上显示信息并换行</h3></pre>");//输出信息并换行

document.write("<h3>在页面上显示信息</h3>");

</script>

</html>

PRE标签的作用是将HTML中的换行字符显示出来，否则HTML将忽略换行

6.2 JavaScript事件模型

事件句柄

on事件名=事件处理函数(或JavaScript语句)

on事件名="JavaScript语句"

通过对象指定事件处理过程

1、如果事件处理过程是事件处理函数，则要在<script>标记块中定义该函数，这个<script>标记块最好放在<head>标记块间，使页面装载时一起被装载进来

2、通过特定对象指定事件处理过程的代码也是放在<script>块中的

Event对象简介

<table style="direction:ltr; border-collapse:collapse; border-style:solid; border-color:#A3A3A3; border-width:1pt; margin-left:.7076in"> 
 <tbody> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> 属性 </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 功能说明 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> altKey </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 当Alt键按下时为真 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> ctrlKey </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 当Ctrl键按下时为真 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> shiftKey </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 当Shift键按下时为真 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> button </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 事件发生时按下的鼠标键(0表示未按任何键，1表示按下鼠标左键，2表示按下鼠标右键，……) </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> cancelBubble </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示取消或启用事件发生，对应值为真或假 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> clientX </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于事件所在窗口的客户区域的水平坐标 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> clientY </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于事件所在对象的垂直坐标 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> keyCode </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 与所按下的键相关的Unicode代码 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> offsetX </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于事件所在对象的水平坐标 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> offsetY </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于事件所在对象的垂直坐标 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> reason </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示数据源对象的数据传输状态 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> rerurnValue </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示从事件中返回的值(true或false) </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> screenX </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于用户屏幕的水平坐标 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> screenY </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于用户屏幕的垂直坐标 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> fromElement </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示被移动的元素 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> srcElement </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示触发事件的对象 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> srcFilter </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示导致onfilterchange事件触发的过滤器对象 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> toElement </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 表示正在想其移动的元素 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> type </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 以字符串形式返回事件对象中的事件名称 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> x </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于事件所在的文档的水平距离 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.05in; padding:4pt 4pt 4pt 4pt"> y </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:5.9402in; padding:4pt 4pt 4pt 4pt"> 鼠标光标相对于事件所在的文档的垂直距离 </td> 
 </tr> 
 </tbody> 
</table>

6.3常用事件

Click和 Dblclick

MouseDown和MouseUp

MouseOver、MouseOut和 MouseMove

KeyDown、KeyPress和KeyUp

Load和UnLoad

Focus和Blur

Submit和Reset

Change和Select

Move、DragDrop和Resize

Error和 Abort

[1_JavaScript]: http://blog.csdn.net/zs15932616453/article/details/7915299
[2_HTML]: http://blog.csdn.net/zs15932616453/article/details/7919278
[3_JavaScript]: http://blog.csdn.net/zs15932616453/article/details/7939999
[4_JavaScript]: http://blog.csdn.net/zs15932616453/article/details/7948154
[5_JavaScript]: http://blog.csdn.net/zs15932616453/article/details/7956328
[6_Document]: http://blog.csdn.net/zs15932616453/article/details/7973112
[7_window_frame]: http://blog.csdn.net/zs15932616453/article/details/7989195
[8]: http://blog.csdn.net/zs15932616453/article/details/7989583
[9]: http://blog.csdn.net/zs15932616453/article/details/7985901