JavaScript笔记

1、window对象:

  JavaScript的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“顶层对象”。这就是说,JavaScript的所有对象,都是“顶层对象”的下属。

  不同的运行环境有不同的“顶层对象”,在浏览器环境中,这个顶层对象就是window对象。

  所有浏览器环境的全局变量,都是window对象的属性。

  可以把window理解成JavaScript Context 上下文环境。  

  1 javascript之window对象详解
  2 window对象的方法 
  3 window对象有以下方法:
  4 open 
  5 close 
  6 alert 
  7 confirm 
  8 prompt 
  9 setTimeout 
 10 clearTimeout 
 11 setInterval 
 12 clearInterval 
 13 moveBy 
 14 moveTo 
 15 resizeBy 
 16 resizeTo 
 17 scrollBy 
 18 scrollTo 
 19 find 
 20 back 
 21 forward 
 22 home 
 23 stop 
 24 print 
 25 blur 
 26 focus 
 27 captureEvent 
 28 enableExternalCapture 
 29 disableExternalCapture 
 30 handleEvent 
 31 releaseEvent 
 32 routeEvent 
 33 scroll 
 34 1. open方法 
 35   语法格式: 
 36 window.open(URL,窗口名称,窗口风格) 
 37   功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页。 
 38   说明: 
 39 open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址 
 40  41 open方法在打开一个新的浏览器窗口时,还可以指定窗口的名称(第二个参数); 
 42 open方法在打开一个新的浏览器窗口时,还可以指定窗口的风格(第三个参数), 
 43 窗口风格有以下选项,这些选项可以多选,如果多选,各选项之间用逗号分隔: 
 44 toolbar:指定窗口是否有标准工具栏。当该选项的值为1或yes时,表示有标准 
 45 工具栏,当该选项的值为0或no时,表示没有标准工具栏; 
 46 location:指定窗口是否有地址工具栏,选项的值及含义与toolbar相同; 
 47 directories:指定窗口是否有链接工具栏,选项的值及含义与toolbar相同; 
 48 status:指定窗口是否有状态栏,选项的值及含义与toolbar相同; 
 49 menubar:指定窗口是否有菜单,选项的值及含义与toolbar相同; 
 50 scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及含义与 
 51 toolbar相同; 
 52 resizable:指定窗口是否可改变大小,选项的值及含义与toolbar相同; 
 53 width:以像素为单位指定窗口的宽度,已被innerWidth取代; 
 54 height:以像素为单位指定窗口的高度,已被innerHeight取代; 
 55 outerWidth:以像素为单位指定窗口的外部宽度; 
 56 outerHeight:以像素为单位指定窗口的外部高度; 
 57 left:以像素为单位指定窗口距屏幕左边的位置; 
 58 top:以像素为单位指定窗口距屏幕顶端的位置; 
 59 alwaysLowered:指定窗口隐藏在所有窗口之后,选项的值及含义与toolbar相同 
 60  61 alwaysRaised:指定窗口浮在所有窗口之上,选项的值及含义与toolbar相同; 
 62 dependent:指定打开的窗口为当前窗口的一个子窗口,并随着父窗口的关闭而 
 63 关闭,选项的值及含义与toolbar相同; 
 64 hotkeys:在没有菜单栏的新窗口中设置安全退出的热键,选项的值及含义与 
 65 toolbar相同; 
 66 innerHeight:设定窗口中文档的像素高度; 
 67 innerWidth:设定窗口中文档的像素宽度; 
 68 screenX:设定窗口距离屏幕左边界的像素长度; 
 69 screenY:设定窗口距离屏幕上边界的像素长度; 
 70 titleBar:指明标题栏是否在新窗口中可见,选项的值及含义与toolbar相同; 
 71 z-look:指明当窗口被激活时,不能浮在其它窗口之上,选项的值及含义与 
 72 toolbar相同。 
 73 open方法返回的是该窗口的引用。 
 74 小技巧:该方法经常用于在打开一个网页时自动打开另一个窗口。 
 75 例6-2-1:编制一个小程序,它用于在打开当前窗口时自动打开另一个窗口,要 
 76 求该窗没有标准工具栏、地址栏、链接工具栏、菜单栏,但有状态栏,窗口中打 
 77 开的网页地址为:http://www.dlrtvu.edu.cn。 
 78 2. close方法 
 79 语法格式: 
 80 window.close() 
 81 功能:close方法用于自动关闭浏览器窗口。 
 82 3. alert方法 
 83 语法格式: 
 84 window.alert(提示字符串) 
 85 功能:弹出一个警告框,在警告框内显示提示字符串文本。 
 86 4. confirm方法 
 87 语法格式: 
 88 window.confirm(提示字符串) 
 89 功能:显示一个确认框,在确认框内显示提示字符串,当用户单击“确定”按钮 
 90 时该方法返回true,单击“取消”时返回false。 
 91 5. prompt方法 
 92 语法格式: 
 93 window.prompt(提示字符串,缺省文本) 
 94 功能:显示一个输入框,在输入框内显示提示字符串,在输入文本框显示缺省文 
 95 本,并等待用户输入,当用户单击“确定”按钮时,返回用户输入的字符串,当 
 96 单击“取消”按钮时,返回null值。 
 97 6. setTimeout方法 
 98 语法格式: 
 99 window.setTimeout(代码字符表达式,毫秒数) 
100 功能:定时设置,当到了指定的毫秒数后,自动执行代码字符表达式。 
101 7. clearTimeout方法 
102 语法格式: 
103 window.clearTimeout(定时器) 
104 功能:取消以前的定时设置,其中的参数是用setTimeout设置时的返回值。 
105 8. setInterval方法 
106 语法格式: 
107 window.setInterval(代码字符表达式,毫秒数) 
108 功能:设定一个时间间隔后(第二个参数),反复执行“代码字符表达式”的内容 
109 9. clearInterval方法 
110 语法格式: 
111 window.clearInterval(时间间隔器) 
112 功能:取消setInterval设置的定时。其中的参数是setInterval方法的返回值。 
113 10. moveBy方法 
114 语法格式: 
115 window.moveBy(水平位移量,垂直位移量) 
116 功能:按照给定像素参数移动指定窗口。第一个参数是窗口水平移动的像素,第 
117 二个参数是窗口垂直移动的像素。 
118 11.moveTo方法 
119 语法格式: 
120 window.moveTo(x,y) 
121 功能:将窗口移动到指定的指定坐标(x,y)处。 
122 12. resizeBy方法 
123 语法格式: 
124 window.resizeBy(水平,垂直) 
125 功能:将当前窗口改变指定的大小(x,y),当x、y的值大于0时为扩大,小于0时 
126 为缩小。 
127 13. resizeTo方法 
128 语法格式: 
129 window.resizeTo(水平宽度,垂直宽度) 
130 功能:将当前窗口改变成(x,y)大小,x、y分别为宽度和高度。 
131 14. scrollBy方法 
132 语法格式: 
133 window.scrollBy(水平位移量,垂直位移量) 
134 功能:将窗口中的内容按给定的位移量滚动。参数为正数时,正向滚动,否则反 
135 向滚动。 
136 15. scrollTo方法 
137 语法格式: 
138 window.scrollTo(x,y) 
139 功能:将窗口中的内容滚动到指定位置。 
140 16.find方法 
141 语法格式: 
142 window.find() 
143 功能:当触发该方法时,将弹出一个“find”(查找)对话窗口,并允许用户在触 
144 发find方法的页面中查找一个字符串。 
145 注:该属性在IE5.5及Netscape6.0中都不支持。 
146 17. back方法 
147 语法格式: 
148 window.back() 
149 功能:模拟用户点击浏览器上的“后退”按钮,将页面转到浏览器的上一页。 
150 说明:仅当当前页面存在上一页时才能进行该操作。 
151 注:IE5.5不支持该方法,Netscape6.0支持。 
152 18. forward方法 
153 语法格式: 
154 window.forward() 
155 功能:模拟用户点击浏览器上的“前进”按钮,将页面转到浏览器的下一页。 
156 说明:仅当当前页面存在下一页时才能进行该操作。 
157 注:IE5.5不支持该方法,Netscape6.0支持。 
158 19. home方法 
159 语法格式: 
160 window.home() 
161 功能:模拟用户点击浏览器上的“主页”按钮,将页面转到指定的页面上。 
162 注:IE5.5不支持该方法,Netscape6.0支持。 
163 20. stop方法 
164 语法格式: 
165 window.stop() 
166 功能:模拟用户点击浏览器上的“停止”按钮,终止浏览器的下载操作。 
167 注:IE5.5不支持该方法,Netscape6.0支持。 
168 21. print方法 
169 语法格式: 
170 window.print() 
171 功能:模拟用户点击浏览器上的“打印”按钮,通知浏览器打开打印对话框打印 
172 当前页。 
173 22. blur方法 
174 语法格式: 
175 window.blur() 
176 功能:从窗口中移出焦点。当与focus方法合用时必须小心,因为可能导致焦点 
177 不断移进移出。 
178 23. focus方法 
179 语法格式: 
180 window.focus() 
181 功能:使窗口中得到焦点。当与blur方法合用时必须小心,因为可能导致焦点不 
182 断移进移出。 
183 24. captureEvent方法 
184 语法格式: 
185 window.captureEvent(Event) 
186 window.captureEvent(事件1|事件2|...|事件n) 
187 功能:捕捉指定参数的所有事件。由于能够捕获哪些由本地程序自己处理的事件 
188 ,所以程序员可以随意定义函数来处理事件。如果有多个事件需要捕捉,各事件 
189 之间用管道符“|”隔开。可捕捉的事件类型如下: 
190 Event.ABORT 
191 Event.BLUR 
192 Event.CHANGE 
193 Event.CLICK 
194 Event.DBLCLICK 
195 Event.DRAGDROP 
196 Event.ERROR 
197 Event.FOCUS 
198 Event.KEYDOWN 
199 Event.KEYPRESS 
200 Event.KEYUP 
201 Event.LOAD 
202 Event.MOUSEDOWN 
203 Event.MOUSUEMOVE 
204 Event.MOUSEOUT 
205 Event.MOUSEOVER 
206 Event.MOUSEUP 
207 Event.MOVE 
208 Event.RESET 
209 Event.RESIZE 
210 Event.SELECT 
211 Event.SUBMIT 
212 Event.UNLOAD 
213 25. enableExternalCapture事件 
214 语法格式: 
215 window.enableExternalCapture(event) 
216 功能:enableExternalCapture方法用于捕捉通过参数传入的外部事件。 
217 26. disableExternalCapture事件 
218 语法格式: 
219 window.disableExternalCapture() 
220 功能:取消enableExternalCapture方法的设置,终止对外部事件的捕捉。 
221 27. handleEvent事件 
222 语法格式: 
223 window.handleEvent(event) 
224 功能:触发指定事件的事件处理器。 
225 28. releaseEvent事件 
226 语法格式: 
227 window.releaseEvent(event) 
228 window.releaseEvent(事件1|事件2|...|事件n) 
229 功能:释放通过参数传入的已被捕捉的事件,这些事件是由 
230 window.captureEvent方法设置的,可释放的事件与captureEvent相同。 
231 29. routeEvent事件 
232 语法格式: 
233 window.releaseEvent(event) 
234 功能:把被捕捉类型的所有事件转交给标准事件处理方法进行处理,可转交的事 
235 件与captureEvent相同。 
236 30 scroll事件 
237 语法格式: 
238 window.scroll(X坐标,Y坐标) 
239 功能:将窗口移动到指定的坐标位置。 
240 6-2-2 window对象的属性 
241 window对象具有如下属性: 
242 status 
243 statusbar 
244 statusbar.visible 
245 defaultstatus 
246 location 
247 locationbar 
248 locationbar.visible 
249 self 
250 name 
251 closed 
252 frames 
253 frames.length 
254 length 
255 document 
256 history 
257 innerHeight 
258 innerWidth 
259 menubar 
260 menubar.visible 
261 opener 
262 outerHeight 
263 outerWidth 
264 pageXOffset 
265 pageYOffset 
266 parent 
267 personalbar 
268 personalbar.visible 
269 scrollbar 
270 scrollbar.visible 
271 toolbar 
272 toolbar.visible 
273 top 
274 1. status属性 
275 语法格式: 
276 window.status=字符串 
277 功能:设置或给出浏览器窗口中状态栏的当前显示信息。 
278 小技巧:可以使用该属性设置浏览器窗口状态栏信息。 
279 2. statusbar属性 
280 语法格式: 
281 window.statusbar.属性 
282 功能:statusbar属性本身也是一个对象,用于访问它自已的visible属性从而确 
283 定状态栏是否可见。 
284 注:IE5.5浏览器不支持该属性。 
285 3. statusbar.visible属性 
286 语法格式: 
287 window.statusbar.visible 
288 功能:检查状态栏是否可见,如果可见则返回true,反之返回false。 
289 注:IE5.5浏览器不支持该属性。 
290 4. defaultstatus属性 
291 语法格式: 
292 window.defaultstatus[=字符串] 
293 功能:defaultstatus属性值是浏览器窗中状态栏的默认显示信息。 
294 5.location属性 
295 语法格式: 
296 window.location=URL 
297 功能:给出当前窗口的URL信息或指定打开窗口的URL。 
298 6. locationbar属性 
299 语法格式: 
300 window.locationbar.属性 
301 功能:locationbar属性也可以看成是一个子对象,这个属性用来获取它自已的 
302 visible属性来确定位置栏是否可见。 
303 到目前为止,该属性只有一个子属性:visible。 
304 注:IE5.5不支持该属性。 
305 7. locationbar.visible属性 
306 语法格式: 
307 window.locationbar.visible 
308 功能:返回位置栏是否可见,如果可见返回true,反之返回false。 
309 注:IE5.5不支持该属性。 
310 8. self属性 
311 语法格式: 
312 window.self.方法 
313 window.self.属性 
314 功能:该属性包含当前窗口的标志,利用这个属性,可以保证在多个窗口被打开 
315 的情况下,正确调用当前窗口内的函数或属性而不会发生混乱。 
316 9. name属性 
317 语法格式: 
318 window.name=名称 
319 功能:返回窗口名称,这个名称是由window.open()方法创建新窗口时给定的。 
320 在javascript1.0版本中,这个属性只能用于读取窗口名称,而到了 
321 javascript1.1版本时,可以用这个属性给一个不是用window.open()方法创建的 
322 窗口指定一个名称。 
323 10. closed属性 
324 语法格式: 
325 window.closed 
326 功能:closed属性用于返回指定窗口的实例是否已经关闭,如果关闭,返回true 
327 ,反之返回flase。 
328 11. frames属性 
329 语法格式: 
330 window.frames[“框架名称”] 
331 window.frames[数值] 
332 功能:frames属性是一个数组,用来存储文档中每一个由元素创建的子窗口(框 
333 架)实例,其中的下标即可以是次序号也可以是用FRAME元素的NAME属性指定的名 
334 称来得到并使用。 
335 12. frames.length属性 
336 语法格式: 
337 window.frames.length 
338 功能:frames.length属性用于给出文档中子窗口(框架)实例的个数。 
339 13. length属性 
340 语法格式: 
341 window.length 
342 功能:length属性返回一个窗口内的子窗口数目,该属性与 
343 window.frame.length属性的值相同。 
344 14. document属性 
345 语法格式: 
346 window.document.事件 
347 window.document.方法 
348 window.document.属性 
349 功能:window对象的子对象document是javascript的核心对象,在脚本中遇到 
350 BODY元素时创建一个实例。 
351 15. history属性 
352 语法格式: 
353 window.history[数值] 
354 window.history.方法() 
355 window.history.属性 
356 window对象的子对象history是javascript的核心对象之一,该属性包含了一个 
357 已访问过页面的名称和URL的数组。 
358 16. innerHeight属性 
359 语法格式: 
360 window.innerHeight=数值 
361 功能:返回或指定浏览器窗口中文档的像素高度,这个高度不包括任何工具栏和 
362 组成窗口的页面修饰高度。 
363 注:IE5.5不支持该属性。 
364 17. innerWidth属性 
365 语法格式: 
366 window.innerHeight=数值 
367 功能:返回或指定浏览器窗口中文档的像素宽度,这个宽度不包括任何工具栏和 
368 组成窗口的页面修饰宽度。 
369 注:IE5.5不支持该属性。 
370 18. menubar属性 
371 语法格式: 
372 window.menubar.属性 
373 功能:menubar属性也可以看成是一个子对象,这个属性用来获取它自已的 
374 visible属性来确定菜单栏是否可见。 
375 到目前为止,该属性只有一个子属性:visible。 
376 注:IE5.5不支持该属性。 
377 19. menubar.visible属性 
378 语法格式: 
379 window.menubar.visible 
380 功能:menubar.visible属性用于返回菜单栏是否可见,如果可见返回true,反 
381 之返回false。 
382 注:IE5.5不支持该属性。 
383 20. opener属性 
384 语法格式: 
385 window.opener 
386 window.opener.方法 
387 window.opener.属性 
388 功能:opener属性与打开该窗口的父窗口相联系,当访问子窗口中operer属性时 
389 ,返回的是父窗口。通过该属性,可以使用父窗口对象中的方法和属性。 
390 21. outerHeight属性 
391 语法格式: 
392 window.outerHeight 
393 功能:outerHeight属性用于访问浏览器窗口的像素高度,该高度包括工具栏和 
394 装饰边的高度。 
395 注:IE5.5不支持该属性。 
396 22. outerWidth属性 
397 语法格式: 
398 window.outerWidth 
399 功能:outerWidth属性用于访问浏览器窗口的像素宽度,该宽度包括工具栏和装 
400 饰边的宽度。 
401 注:IE5.5不支持该属性。 
402 23. pageXOffset属性 
403 语法格式: 
404 window.pageXOffset=数值 
405 功能:指定浏览器窗口中文档左上角在窗口中的当前水平像素位置。在利用 
406 moveTo移动之前,可以通过该属性来决定是否需要移动窗口。因为该属性返回了 
407 可见文档相对整个页面的当前位置。 
408 注:IE5.5不支持该属性。 
409 24. pageYOffset属性 
410 语法格式: 
411 window.pageYOffset=数值 
412 功能:指定浏览器窗口中文档左上角在窗口中的当前垂直像素位置。在利用 
413 moveTo移动之前,可以通过该属性来决定是否需要移动窗口。因为该属性返回了 
414 可见文档相对整个页面的当前位置。 
415 注:IE5.5不支持该属性。 
416 25. parent属性 
417 语法格式: 
418 window.parent.frames[数值] 
419 window.parent.framesName 
420 功能:访问各个子窗口(多框架)所在的父窗口。 
421 26. personalbar属性 
422 语法格式: 
423 window.personalbar.属性 
424 功能:personalbar属性本身也是一个对象,用于访问其自身的visible属性来确 
425 定个人栏是否可见。 
426 注:IE5.5不支持该属性。 
427 27. personalbar.visible属性 
428 语法格式: 
429 window.personalbar.visible 
430 功能:确定个人栏是否可见,如果可见则返回true,反之返回false。 
431 注:IE5.5不支持该属性。 
432 28. scrollbars属性 
433 语法格式: 
434 window.scrollbars.属性 
435 功能:scrollbars属性本身也是一个对象,用于访问其自身的visible属性来确 
436 定滚动栏是否可见。 
437 注:IE5.5不支持该属性。 
438 29. scrollbars.visible属性 
439 语法格式: 
440 window.scrollbars.visible 
441 功能:scrollbars.visible用于确定滚动栏是否可见,如果可见则返回true,反 
442 之返回false。 
443 注:IE5.5不支持该属性。 
444 30. toolbar属性 
445 语法格式: 
446 window.toolbar.属性 
447 功能:toolbar属性本身也是一个对象,用于访问它自已的visible属性从而确定 
448 工具栏是否可见。 
449 注:IE5.5不支持该属性。 
450 31. toolbar.visible属性 
451 语法格式: 
452 window.toolbar.visible 
453 功能:toolbar.visible属性用于检查工具栏是否可见,如果可见则返回true, 
454 反之返回false。 
455 注:IE5.5不支持该属性。 
456 32. top属性 
457 语法格式: 
458 window.top.frames[数值] 
459 window.top.frameName 
460 window.top.方法() 
461 window.top.属性 
462 功能:window对象的top属性用于包含所有装入浏览器的子窗口(多框架)的最顶
window对象常用方法1
  1 javascript之window对象
  2   window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。
  3 
  4 1、全局的window对象
  5 
  6   JavaScript中的任何一个全局函数或变量都是window的属性。
  7 
  8 <script type="text/javascript">
  9     var name="撼地神牛";
 10     document.write(window.name);
 11 </script>
 12 2、window与self对象
 13 
 14   self对象与window对象完全相同,self通常用于确认就是在当前的窗体内。
 15 
 16 <script type="text/javascript">
 17     document.write(window == self);      //必须相等,永远都相等
 18   document.write(window.Top == window.self);  //判断当前框架是否是主框架
 19 </script>
 20   window、self、window.self三者是等价的。
 21 
 22 3、window的子对象
 23 
 24   window的主对象主要有如下几个:
 25 
 26 JavaScript document 对象
 27 JavaScript frames 对象
 28 JavaScript history 对象
 29 JavaScript location 对象
 30 JavaScript navigator 对象
 31 JavaScript screen 对象
 32 4、window函数索引(仅对IE有效)
 33 
 34   窗体控制函数:
 35 
 36 JavaScript moveBy() 函数:从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体。
 37 JavaScript moveTo() 函数:移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会把窗体移出屏幕的可视区域。
 38 JavaScript resizeBy() 函数:相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体。
 39 JavaScript resizeTo() 函数:把窗体宽度调整为w个像素,高度调整为h个像素。
 40 复制代码
 41 <body>
 42     <input type="button" id="btn1" value="先设置窗体固定大小!" onclick="window.resizeTo(500,500);" />
 43     <input type="button" id="btn2" value="再缩小10像素!" onclick="window.resizeBy(-10,-10);" />
 44     <input type="button" id="btn2" value="上!" onclick="window.moveBy(0,-5);" />
 45     <input type="button" id="btn2" value="下!" onclick="window.moveBy(0, 5);" />
 46     <input type="button" id="btn2" value="左!" onclick="window.moveBy(-5, 0);" />
 47     <input type="button" id="btn2" value="右!" onclick="window.moveBy(5, 0);" />
 48     <input type="button" id="btn2" value="距离左上角左边100像素,顶部200像素" onclick="window.moveTo(100, 200);" />
 49 </body>
 50 复制代码
 51   窗体滚动轴控制函数:
 52 
 53 JavaScript scrollTo() 函数:在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置。
 54 JavaScript scrollBy() 函数:如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)。
 55   注意区别,一个是相对当前窗口,一个是相当现在滚动条的位置。
 56 
 57 <div style="height:150%; width:150%; background-color:#ddd">
 58     <input type="button" id="btn1" value="移动滚动条!" onclick="window.scrollTo(100,100);" />  //相当于设置绝对位置
 59     <input type="button" id="btn1" value="移动滚动条!" onclick="window.scrollBy(100,100);" />  //相当于累加
 60 </div>
 61   窗体焦点控制函数:
 62 
 63 JavaScript focus() 函数:使窗体或空间获得焦点
 64 JavaScript blur() 函数:使窗体或控件失去焦点
 65 <div>
 66     <input type="button" value="获得焦点" onclick="document.getElementById('testInput').focus()" />
 67     <input type="button" value="失去焦点" onclick="document.getElementById('testInput').blur()" />
 68     <input type="text" value="text" id="testInput" onblur="alert('我已失去焦点')" />
 69 </div>
 70   新建窗体函数:
 71 
 72 JavaScript open() 函数:打开(弹出)一个新的窗体
 73 JavaScript close() 函数:关闭窗体
 74 JavaScript opener 属性:通过opener可以实现跨窗体之间的通讯,但是要保证是在同一域名下,而且一个窗体要包含另一个窗体的opener。
 75   window.open(url, name, features, replace);
 76 
 77   open函数参数说明:
 78 
 79 url -- 要载入窗体的URL;
 80 name -- 新建窗体的名称(也可以是HTML target属性的取值,目标);
 81 features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔;
 82 replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定。
 83   open方法示例:
 84 
 85   <a href="2.html" target="2">在新窗口打开连接</a>
 86   <a href="#" onclick="window.open('http://www.google.com','2');">在已建立连接的页面打开新地址</a>
 87   首先使用普通HTML链接打开一个页面(target名为dreamdu),之后使用open函数打开另一个页面,浏览器首先要查找是否有名称为dreamdu的窗体,如果有,就在这个窗体中加载open的地址。
 88 
 89   经过设置的open
 90 
 91 window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')  
 92    弹窗方法:
 93 
 94 方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;  
 95 方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;  
 96   open函数第三个参数features说明:
 97 
 98 参数名称    类型    说明
 99 height    Number    设置窗体的高度,不能小于100
100 left    Number    说明创建窗体的左坐标,不能为负值
101 location    Boolean    窗体是否显示地址栏,默认值为no
102 resizable    Boolean    窗体是否允许通过拖动边线调整大小,默认值为no
103 scrollable    Boolean    窗体中内部超出窗口可视范围时是否允许拖动,默认值为no
104 toolbar    Boolean    窗体是否显示工具栏,默认值为no
105 top    Number    说明创建窗体的上坐标,不能为负值
106 status    Boolean    窗体是否显示状态栏,默认值为no
107 width    Number    创建窗体的宽度,不能小于100
108   特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格。
109 
110   window.open函数新建立窗体后会返回新建窗体的window对象,通过此对象可以控制窗体(移动,改变大小,关闭)。
111 
112   close函数:
113 
114 <input type="button" value="关闭已经打开的窗体!" onclick="window.close();" />
115   self.close();配合上setTimeout()可以实现,打开的窗口定时关闭的效果。
116 
117   对话框函数:
118 
119 JavaScript alert() 函数:弹出消息对话框(对话框中有一个OK按钮)
120 JavaScript confirm() 函数:弹出消息对话框(对话框中包含一个OK按钮与Cancel按钮)
121 JavaScript prompt() 函数:弹出消息对话框(对话框中包含一个OK按钮、Cancel按钮与一个文本输入框)
122   alert();
123 
124   不说。
125 
126   confirm(str);
127 
128   confirm()消息对话框是排它的,也就是在用户点击对话框的按钮前,不能进行任何其它操作。
129 
130 复制代码
131 if(confirm("确定跳大?"))
132 {
133     alert("果断跳大");
134 }
135 else
136 {
137     alert("猥琐打钱");
138 }
139 复制代码
140   显示如下:
141 
142     
143 
144   prompt(str1, str2);
145 
146   函数有两个参数
147 
148 str1 -- 要显示在消息对话框中的文本,不可修改
149 str2 -- 文本框中的内容,可以修改
150 复制代码
151 var sResult=prompt("请在下面输入你的姓名", "撼地神牛");
152 if(sResult!=null)
153 {
154     alert(sResult + "已经超越神的杀戮");
155 }
156 else
157 {
158     alert("无名氏已经超越神的杀戮");
159 }
160 复制代码
161   显示如下:
162 
163   
164 
165   时间等待与间隔函数:
166 
167 JavaScript setTimeout() 函数
168 JavaScript clearTimeout() 函数
169 JavaScript setInterval() 函数
170 JavaScript clearInterval() 函数
171   1、setTimeout()、clearTimeout()  在指定的时间后调用函数
172 
173   语法:
174 
175 setTimeout(fun,time);  fun:函数体或函数名,time指定时间,单位为毫秒。
176 clearTimeout(id);  取消指定的setTimeout函数将要执行的代码
177 复制代码
178     setTimeout(function () {
179         document.write("隔3秒后触发");   
180     }, 3000)    //在3秒后输出
181 
182     setTimeout(fun1, 5000);     //在5秒后输出
183     function fun1() {
184         document.write("函数名的方式5秒后触发");
185     }
186 复制代码
187   2、setInterval()、clearInterval(value)  在间隔指定的事件后重复调用函数
188 
189   语法:
190 
191 setInterval(fun1,time)  fun:函数体或函数名,time指定的时间,单位为毫秒。会返回一个值,这个值是统计该函数的个数用的,第一个是1,第二个就是2,指明是第几个setInterval函数。
192 clearInterval(value)    value:setInterval()函数返回的值,根据这个值可以停止setInterval()的重复。 
193 复制代码
194 var i = 0;
195 var h = setInterval(function () {
196     document.write("3秒输出一次<br/>");
197     i++;
198     if (i >= 3) {
199        clearInterval(h);
200         document.write("停止输出");
201     }
202 }, 3000);
203 复制代码
204   注意,javascript是单线程的,因此,这个定时函数实际上是通过插入执行队列的方式来实现。
205 
206   如下面的代码:
207 
208 function fn() { 
209   setTimeout(function(){alert('can you see me?');},1000); 
210   while(true) {} 
211 } 
212   alert();永远都不会执行,因为线程一直被死循环占用了。
213 
214 window.location子对象 
215 
216   解析URL对象location
217 
218   location对象的属性有:href,protocal,host,hostname,port,pathname,search,hash
219 
220 复制代码
221         document.write(location.href + "<br/>");        // http://localhost:4889/javascriptTest.html
222         document.write(location.protocol + "<br/>");    // http:
223         document.write(location.host + "<br/>");        // localhost:4889
224         document.write(location.hostname + "<br/>");    // localhost
225         document.write(location.port + "<br/>");        // 4889
226         document.write(location.pathname + "<br/>");    // /javascriptTest.html
227         document.write(location.search + "换行<br/>");  //http://localhost:4889/javascriptTest.html?id=1&name=张三 如果路径是这样,则输出  ?id=1&name=%E5%BC%A0%E4%B8%89
228         document.write(location.hash);                  //http: //localhost:4889/javascriptTest.html#kk=你好?id=1&name=张三 如果路径是这样,则输出  #kk=你好?id=1&name=张三
229 复制代码
230   载入新文档
231 
232     location.reload()  重新加载页面
233 
234     location.replace()  本窗口载入新文档
235 
236     location.assign()   本窗口载入新文档
237 
238     location = "http://www.baidu.com"  //跳转到指定网址
239 
240     location = "search.html"        //相对路径跳转
241 
242     location = "#top"      //跳转到页面顶部
243 
244   浏览历史
245 
246     History()对象的back()与forward()  与浏览器的“后退”,"前进"功能一样。
247 
248     history.go(-2);  后退两个历史记录
249 
250   浏览器和屏幕信息
251 
252     navigator.appName  Web浏览器全称
253 
254     navigator.appVersion  Web浏览器厂商和版本的详细字符串
255 
256     navigator.userAgent  客户端绝大部分信息
257 
258     navagator.platform   浏览器运行所在的操作系统
259 
260         document.write(navigator.userAgent + "<br/>"); // Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
261         document.write(navigator.appName + "<br/>");   //Netscape
262         document.write(navigator.appVersion + "<br/>"); //5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
263         document.write(navigator.platform);             //Win32
264  
265 
266 窗口的关系
267 
268     parent == self  只有顶级窗口才返回true
269 
270      parent和top属性允许脚本引用它的窗体的祖先,通常窗体是通过<iframe>元素创建的,可以用来获取顶级窗口。 
271 
272 5、event事件对象
273 
274   最有用的两个操作:阻止事件冒泡。有时return false;不管用,这个或许就管用了。
275 
276 复制代码
277 //IE:
278 window.event.cancelBubble = true;//停止冒泡
279 window.event.returnValue = false;//阻止事件的默认行为
280 
281 //Firefox:
282 event.preventDefault();// 取消事件的默认行为  
283 event.stopPropagation(); // 阻止事件的传播
window对象常用方法2

 2、JS代码中,单引号中可嵌套双引号,双引号中可以嵌套双引号,但二者不可以互相嵌套:

  "hello, 'this is a JS' haha";(正确) "hello, "this is a JS" haha";(错误)

3、document.forms的用法:

<html>
    <title> this is for the form validation </title>
        <script type = "text/javascript">
            function validate(){
                var formElements = document.forms;//得到当前页面中的所有的Form表单,返回的是一个Form的集合;
                var userName = formElements[0].username.value;//formElements[0]代表的是Form集合中的第一个表单
                var password = formElements[0].password.value;
                var conformpass = formElements[0].conformpass.value;
            /*
                alert("haha");
                alert(userName + password +conformpass);
            */
                if(userName.length <= 0){
                    alert("user name cannot be empty");
                }
                else if(password.length<=0){
                    alert("paassword cannot be empty");
                }
                else if(password !=conformpass){
                    alert("password is not the same as the conformpass");
                }
                
                else{
                    alert("pls submit");
                    document.forms[0].submit;
                }            
            
            }
            
            function validate1(){
                alert("hhh");
            }
        </script>        
    <body>
        <form id = "my01" name = "myForm">
            user name: <input type="text" name="username" value="" /> <br/>
            password: <input type="password" name="password" value="" /> <br/>
            conformpass:<input type="password" name="conformpass" value="" /> <br/>
            <input type="button" value="submit" onclick = "validate()" /> <br/>
        </form>
    </body>
</html>
document.form用法

 4、JS中实现超链接:window.location.href = "www.google.com";

posted @ 2015-12-19 19:26  心灵召唤  阅读(158)  评论(0)    收藏  举报