BOM之window对象
1.widonws对象介绍
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>window对象</title> 6 7 <script type="text/javascript"> 8 /*window对象*/ 9 //BOM的核心就是window对象,window对象具有双重的角色,是ECMA定义的global对象最好的体现。这意味着在网页中定义的任何一个 10 //对象,变量,函数,都以window作为其global,因此有权访问parseInt()等方法。 11 //例1: 12 var age=29; 13 function sayAge(){ 14 console.log(this.age); 15 } 16 sayAge(); 17 console.log(window.age);//使用这2中方法,就可以也可以访问自己定义的变量和函数,这就是全局对象global的特别之处。 18 console.log(window.sayAge()) 19 //列2,一点区别。 20 var age=23; 21 window.color="black"; 22 console.log(delete window.age);//false,这也是window定义对象的一点区别,无法进行删除age. 23 console.log(delete window.color);//true 24 //列3,global属性查询,我们可以使用window进行属性查询;返回的是查询的结果 25 var resultDemo=console.log(window.age1)//undefined,但是没有报错 26 //使用这种方式却报错。var resultDemo2=age1; 27 /*window.open()方法*/ 28 //例4 29 var baidu=window.open("https://www.baidu.com","_blank");//一般有参数URL和窗口目标,第二个参数可以是下列任何一个特殊的窗口名称: 30 //_self,_parent,_top,或者是_blank 31 var wroxWindow=window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes"); 32 // baidu.close();既然可以对窗口进行打开我们当然可以对窗口进行关闭。 33 </script> 34 </head> 35 <body> 36 37 </body> 38 </html>
2.间隔调用和超时调用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>window对象中的一些十分有用的方法.html</title> 6 7 <script type="text/javascript"> 8 /*间隔调用和超时调用*/ 9 //例1:JavaScript是单线程语言但是它允许通过设置超时值和间歇时间值来调度代码在 10 //特定的时刻执行,window.setInterval();第一个参数是包含JavaScript代码的字符串,也就是一个函数名称 11 function setIntervalDemo(){ 12 console.log("你好"); 13 } 14 window.setInterval(setIntervalDemo,2000); 15 //为了简便,我们当然可以使用匿名函数进行设置 16 var clearTime=window.setInterval(function(){console.log("浏览器");},1000); 17 //也可以清除设置,window.clearInterval(clearTime); 18 //例2:超时调用window.setTimeout(),就是等待多少时间执行一次代码。 19 var timeout=window.setTimeout(function(){alert("我是超时调用");},4000); 20 21 </script> 22 </head> 23 <body> 24 25 </body> 26 </html>
3.系统对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>系统对话框</title> 6 7 <script type="text/javascript"> 8 /*alert,confirm,prompt*/ 9 //例子1: 10 if(window.confirm("你确定吗?")){ 11 alert("谢谢你点击确定") 12 }else{ 13 alert("sorry"); 14 } 15 //列2: 16 var content=window.prompt("请输入你想输入的内容"); 17 if(content==null){ 18 alert("既然你不输入那就88"); 19 }else{ 20 alert(content); 21 } 22 </script> 23 </head> 24 <body> 25 26 </body> 27 </html>