韩顺平 javascript教学视频_学习笔记18_js超级玛丽小游戏2

问题：

怎么直接获取CSS的内容

举几个例子先来测试下：

先定义一个css文件

#div2{
	width:500px;
	height:200px;
	background-color:green;
	left:50px; top:200px; position:absolute;
}
 
#div3{
	width:500px;
	height:200px;
	background-color:red;
	left:50px; top:450px; position:absolute;
}

再定义个html文件

<html>  
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <link rel="stylesheet" type="text/css" href="test.css" />  
	<head>  
		<script language="javascript">  
 
			function test(){
				
				var div1 = document.getElementById("div1");
				//取出width
				window.alert("div1:"+div1.style.width);  // 500px
				
				var div3 = document.getElementById("div3");
				//取出width,在div3中定义了width，但还是输出 undefined
				window.alert("div3:"+div3.width); //undefined
				window.alert("div3 id:"+div3.id.width); //undefined
				window.alert("div3 style:"+div3.style.width); //undefined
				
				var div2 = document.getElementById("div2");
				//取出width
				window.alert("div2 width:"+div2.width);   //undefined
				window.alert("div2 id width:"+div2.id.width);   //undefined
				window.alert("div2 style width:"+div2.style.width);   //undefined
				window.alert("div2 cssText:"+div2.cssText); //undefined
				window.alert("div2 style cssText:"+div2.style.cssText); //undefined
				
				
			}
		</script>  
	</head>  
	<body>  
			<table  >  
				  
				<tr>  
					<td><input type="button" value="测试" onclick="test()" /> </td>  
				</tr>  
			</table>  
		<br/>	
		<div id="div1" style="width:500px">div1</div>
		<div id="div2" >div2</div>
		<div width="300px" id="div3" style="width:400px">div3</div>
		<br/>
	</body>  
</html>

通过上面的代码测试，发现不能直接获取css中的属性，这个问题先放一放

js面向（基于）对象编程----构造方法（函数）

构造方法（函数）介绍

构造函数的基本用法

function 类名（参数列表）{
   属性=参数值;
}

举例如下：

<html>  
	<head>  
		<script language="javascript">  
			
			function Person(name,age){
				this.name=name;
				this.age=age;
			} 
			
			//创建一个Person对象的时候，就可以直接给名字，和年龄
			var p1 =new Person("abc",820);
			window.alert(p1.name);
			
			var p2 = new Person("Hello",80);
			window.alert(p2.name + p2.age);
		</script>  
	</head>  
	<body></body>  
</html>

扩展：能不能直接传给一个对象一个函数？

请看下面的问题：

在给一个对象初始化属性值的时候，也可以指定函数属性

看案例：

<html>  
	<head>  
		<script language="javascript">  
			
			function jisuan(num1,num2,oper){
				if(oper=="+"){
					return num1+num2;
				}else if(oper=="-"){
					return num1-num2;
				}if(oper=="*"){
					return num1*num2;
				}if(oper=="/"){
					return num1/num2;
				}
			}	
			
			function Person(name,age,fun){
				this.name=name;
				this.age=age;
				this.myfun=fun;
			}
			
			var p1=new Person("aa",60,jisuan);
			
			window.alert(p1.name+p1.age);
			window.alert(p1.myfun(80,50,"+"));
			
		</script>  
	</head>  
	<body></body>  
</html>

构造方法（函数）小结

构造方法名和类名相同
主要作用是完成对新对象实例的初始化
在创建对象实例时，系统自动调用该对象的构造方法

到此我们就进一步完善了类的定义：

面向对象编程的进一步认识

创建对象的又一种形式：

如果一个对象比较简单，我们可以直接创建（可以指定普通属性和函数属性）

<html>  
	<head>  
		<script language="javascript">  
			
			var dog={name:'小明',age:9}; //这里是name:'小明',而不是name='小明'，是冒号而不是等于号
			window.alert(dog.constructor);
			window.alert(dog.name);
			
			var dog={name:'小明', //属性之间用 逗号 隔开
					 age:9,
			         sayHello:function(a,b){window.alert("Hello");},
					 jisuan:function(a,b){window.alert("结果="+(a+b));}
					 };
			window.alert(dog.name);
			window.alert(dog["name"]);//这样也可以访问
			dog.sayHello();
			dog.jisuan(50,60);
			
		</script>  
	</head>  
	<body></body>  
</html>

有时，我们会看到这样一种调用方法

函数名.call(对象实例)

这样调用，该函数的this就指向对象实例

<html>  
	<head>  
		<script language="javascript">  
			
			var dog={name:'小明',age:9}; //这里是name:'小明',而不是name='小明'，是冒号而不是等于号
			
			function test(){
				window.alert(this.name);
			}
			
			function test1(){
				window.alert(this.name1);
			}
			
			test();  //空白 ，什么也没有输出,其实也就是undefined
			window.test();  //空白 ，什么也没有输出,其实也就是undefined
			test.call(dog); //call实际上为了改变test函数中this的指向，
			                //韩老师说其等价于 dog.test(); 但实际测试并不等于
			
			var name1 = "顺平";
			test1.call(window);
			test();
			dog.test(); //错误，dog.test()并不等于test.call(dog);
			
 
		</script>  
	</head>  
	<body></body>  
</html>

利用 for ... in 可以很方便的查看某一对象的所有属性和方法

<html>  
	<head>  
		<script language="javascript">  
			
			var dog={name:'小明', //属性之间用 逗号 隔开
					 age:9,
			         sayHello:function(a,b){window.alert("Hello");},
					 jisuan:function(a,b){window.alert("结果="+(a+b));}
					 };
			
			//循环列出dog对象的所有属性和方法，对象名['属性名']
			for(var key in dog){
				document.writeln(dog[key]+"<br/>");
			}
			
			//循环列出window对象的所有属性和方法
			document.writeln("***当前浏览器window对象有 属性 和 方法***<br/>");
			for(var key in window){
				document.writeln(key + ":" + window[key] + "<br/>");
			}
			
			//如果想看其他对象的属性和方法，将window改为其他的即可
			document.writeln("***当前浏览器history对象有 属性 和 方法***<br/>");
			for(var key in history){
				document.writeln(key + ":" + history[key] + "<br/>");
			}
 
		</script>  
	</head>  
	<body></body>  
</html>

这里最重要的就是浏览器window对象的属性和方法，利用for in 我们就可以知道当前我们使用的浏览器支持window对象中的哪些方法和属性，就不用查找网络了，浏览器除了window对象外，还有其他对象，如下图所示：

通过下面的方法查看浏览器window对象的属性和方法：（我用的是火狐浏览器）

//循环列出window对象的所有属性和方法
document.writeln("***当前浏览器window对象有 属性 和 方法***<br/>");
for(var key in window){
		document.writeln(key + ":" + window[key] + "<br/>");
}

输出结果：