韩顺平 javascript教学视频_学习笔记18_js超级玛丽小游戏2_js面向对象的进一步说明

来源：互联网发布：软件项目开发阶段编辑：程序博客网时间：2024/05/14 15:04

问题：

怎么直接获取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");//取出widthwindow.alert("div1:"+div1.style.width);  // 500pxvar div3 = document.getElementById("div3");//取出width,在div3中定义了width，但还是输出 undefinedwindow.alert("div3:"+div3.width); //undefinedwindow.alert("div3 id:"+div3.id.width); //undefinedwindow.alert("div3 style:"+div3.style.width); //undefinedvar div2 = document.getElementById("div2");//取出widthwindow.alert("div2 width:"+div2.width);   //undefinedwindow.alert("div2 id width:"+div2.id.width);   //undefinedwindow.alert("div2 style width:"+div2.style.width);   //undefinedwindow.alert("div2 cssText:"+div2.cssText); //undefinedwindow.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();  //空白 ，什么也没有输出,其实也就是undefinedwindow.test();  //空白 ，什么也没有输出,其实也就是undefinedtest.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/>");}

输出结果：

再来看浏览器 history 对象的属性和方法：（我用的是火狐浏览器）

0 0