JavaScript 入门基础 (七)

今天药忘吃喽~ 2022-05-27 03:55 214阅读 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]

**window和frame**

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

7.1文档对象模型

7.1.1文档对象模型（DOM）：各种浏览器对象形成一个层次模型

![计算机生成了可选文字: 幼ndo认别二陀比do山mentOCanonIay仍份rmsaPplets自r亡apluglnstext扭d沁bU软onfil七UptoadS已ICCttextste扭CheckboxfesdDPtion训“w。川SUbmlt][_ndo_do_mentOCanonIay_rmsaPplets_r_apluglnstext_d_bU_onfil_UptoadS_ICCttextste_CheckboxfesdDPtion_w_SUbmlt]

7.1.2 如何引用对象浏览器

引用Document对象，使用Window.document;

引用screen对象时，使用window.screen;

引用forms对象时，使用window.document.forms;

引用text对象时，则应该使用window.document.forms.text;

可以在使用对象在数组中的位置（下标）来引用，如：window.docuemnt.form\[0\]或使用name属性来访问，如对name为form1的对象：window.document.form1来引用

7.2 使用window对象

7.2.1 window对象包含的属性、方法

<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.8347in; padding:4pt 4pt 4pt 4pt"> 方法 </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 功能说明 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> open(URL,window name[,window features]) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL的页面，其中window features是可选项，选择它，可以设定新创建的窗口的大小和外观 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> close() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 关闭一个浏览器窗口 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> alert(message) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 弹出一个警示对话框 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> confirm(message) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 弹出一个确认对话框 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> prompt(message) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 弹出一个提示对话框 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> print() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 相当于浏览器工具栏中的打印按钮。使浏览器打印当前的网页 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> blur() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 将被引用窗口放到所有其他打开窗口的后面 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> focus() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 将被引用窗口放到所有其他打开窗口的前面 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> moveTo(x,y) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 将窗口移到指定的坐标处，x是水平位置，y是垂直位置，x和y是以像素为单位的值 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> moveBy(horiz,vert) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 将窗口移动指定的位移量，horiz为水平位移量，vert为垂直位移量。horiz和vert是以像素为单位的值 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> resizeTo(x,y) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 将窗口设置为指定的大小，x是水平方向的大小，y是垂直方向的大小，x和y是以像素为单位的值 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> resizeBy(horiz,vert) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 按照给定的位移量重新设定窗口的大小，horiz是水平位移量，vert是垂直位移量。horiz和vert是以像素为单位的值 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> scrollTo(x,y) Sscroll(x,y) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 将窗口滚动到指定的坐标位置，x和y是以像素为单位的值 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> scrollBy(horiz,vert) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 按照给定的位移量滚动窗口，horiz是水平位移量，vert是垂直位移量。horiz和vert是以像素为单位的值 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> setTimeout(expression,time) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 设置在一定时间后自动执行expression代表的代码。使用time设置时间，以毫秒为单位 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> &nbsp; </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> setInterval(expression,time[,args]) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 设置一个时间间隔，使expression代表的代码可以以周期性地被执行，使用time设置时间，以毫秒为单位 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> clearTimeout(timer) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 取消由setTimeout设定的定时操作 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:1.8347in; padding:4pt 4pt 4pt 4pt"> clearInterval(timer) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.9055in; padding:4pt 4pt 4pt 4pt"> 取消由setInterval设定的定时操作 </td> 
 </tr> 
 </tbody> 
</table>

7.2.2使用window对象

window对象的属性和方法的引用：window.属性和window.方法

window对象还可以使用标识符self代替：self.属性和 self.方法

还可以省略window，直接写出

7.2.3打开或关闭一个窗口

1、打开窗口：当window.open方法执行时，它不但按照指定的参数打开了新建的窗口，而且还创建了这个新窗口的引用

open(URL,window name\[,window features\])

Window features是新创建窗口的实际特性，可能的参数包括：height、width、left、top、toolbar、location、directories、status、menubar、scrollbars、resizable、outerHeight、outerWidth

2、关闭窗口

window.close()

7.2.4 进行定时设置

定时方法包括：setTimeout（）和clearTimeout（）以及setInterval（）和clearInterval（）

1、setTimeout（）和clearTimeout（）

variable=setTimeout(expression,time)

setTimeout()方法的作用是在time所规定的时间之后，执行expression一次。

例如：timer=setTimeout（showMessage（）,1000)

clearTimeout(timer):clearTimeout()括号内的timer就是setTimeout()方法返回的值。这个方法的作用是中断setTimeout（）设定的定时操作。

2、setInterval（）和clearInterval（）

variable=setInterval(expression,time,\[args\])

7.25.5 window对象的其他重要操作

7.3使用frame对象

7.3.1在窗口中生成帧

ROWS、COLS

NAME、SRC、SCROLLING、MARGINWIDTH、MARGINHEIGHT、NORESIZE

7.3.2访问窗口中的帧

window.framename

window.frames\[index\]

window.frames\['framename'\]

<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:2.5034in; padding:4pt 4pt 4pt 4pt"> 属性和方法 </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 功能说明 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> name </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示帧的名字 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> frames </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示帧中所包含的帧组 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> document </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示帧中所显示的文档 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> length </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示帧中所包含的子帧的个数 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> parent </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示当前帧的上一级帧 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> self </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示当前帧 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> top </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 表示当前浏览器窗口中最顶层的帧 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> blur() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 将当前帧放到所有其他窗口的后面 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> focus() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 将当前帧放到所有其他窗口的前面 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> setTimeout(expression,time) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 设置在time设定的时间后自动执行expression代表的代码 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> setInterval(expression,time,[args]) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 设置一个时间间隔time，使expression代表的代码可以周期性地被执行 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> clearTimeout(timer) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 取消由setTimeout设定的定时操作 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> clearInterval(timer) </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 取消由setInterval设定的定时操作 </td> 
 </tr> 
 <tr> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:2.5034in; padding:4pt 4pt 4pt 4pt"> print() </td> 
 <td style="border-style:solid; border-color:#A3A3A3; border-width:1pt; vertical-align:top; width:4.2368in; padding:4pt 4pt 4pt 4pt"> 显示“打印”对话框，打印当前帧中的页面内容 </td> 
 </tr> 
 </tbody> 
</table>

[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
[_ndo_do_mentOCanonIay_rmsaPplets_r_apluglnstext_d_bU_onfil_UptoadS_ICCttextste_CheckboxfesdDPtion_w_SUbmlt]: https://img-my.csdn.net/uploads/201209/17/1347884712_3643.png