首頁 > 開發者 > JavaScript

韓順平 javascript教學視頻_學習筆記18_js超級瑪麗小遊戲2_js物件導向的進一步說明__js

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
問題： 怎麼直接擷取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對象的屬性和方法：（我用的是Firefox瀏覽器） 
//迴圈列出window對象的所有屬性和方法document.writeln("***當前瀏覽器window對象有 屬性 和 方法***<br/>");for(var key in window){document.writeln(key + ":" + window[key] + "<br/>");}

輸出結果：

再來看瀏覽器 history 對象的屬性和方法： （我用的是Firefox瀏覽器）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More