認(rèn)識(shí)for…in 循環(huán)語(yǔ)句

          Posted on 2006-11-26 10:09 Jaunt 閱讀(7857) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): JavaScript
          for...in循環(huán)的Javascript示例:
          <html>
          <head>
          <title>一個(gè)使用到for...in循環(huán)的Javascript示例</title>
          </head>
          <body>
          <script type="text/javascript">
          // 創(chuàng)建一個(gè)對(duì)象 myObject 以及三個(gè)屬性 sitename, siteurl, sitecontent。
          var myObject = new Object();
          myObject.sitename = "布啦布啦";
          myObject.siteurl = "blabla.cn";
          myObject.sitecontent = "網(wǎng)頁(yè)教程代碼圖庫(kù)的中文站點(diǎn)";
          //遍歷對(duì)象的所有屬性
          for (prop in myObject)
          {
          document.write("屬性 '" + prop + "' 為 " + myObject[prop]);
          document.write("<br>");
          }
          </script>
          </body>
          </html>

          今天網(wǎng)上Java Tang博客找到了一個(gè)用來(lái)遍歷JavaScript某個(gè)對(duì)象所有的屬性名稱(chēng)和值的方法,這樣想使用方法的時(shí)候非常的直觀和方便。代碼如下:
          1. /*
          2. * 用來(lái)遍歷指定對(duì)象所有的屬性名稱(chēng)和值
          3. * obj 需要遍歷的對(duì)象
          4. * author: Jet Mah
          5. * website: http://www.javatang.com/archives/2006/09/13/442864.html
          6. */
          7. function ? allPrpos ( obj ) {
          8. ? ? // 用來(lái)保存所有的屬性名稱(chēng)和值
          9. ? ? var ? props = "" ;
          10. ? ? // 開(kāi)始遍歷
          11. ? ? for ( var ? p in obj ){ ?
          12. ? ? ? ? // 方法
          13. ? ? ? ? if ( typeof ( obj [ p ]) == " function " ){ ?
          14. ? ? ? ? ? ? obj [ p ]() ;
          15. ? ? ? ? } else { ?
          16. ? ? ? ? ? ? // p 為屬性名稱(chēng),obj[p]為對(duì)應(yīng)屬性的值
          17. ? ? ? ? ? ? props += p + " = " + obj [ p ] + " \t " ;
          18. ? ? ? ? } ?
          19. ? ? } ?
          20. ? ? // 最后顯示所有的屬性
          21. ? ? alert ( props ) ;
          22. }

          AJAX的JavaScript的反射機(jī)制,反射機(jī)制指的是程序在運(yùn)行時(shí)能夠獲取自身的信息。例如一個(gè)對(duì)象能夠在運(yùn)行時(shí)知道自己有哪些方法和屬性。 在JavaScript中利用for(…in…)語(yǔ)句實(shí)現(xiàn)反射,其語(yǔ)法如下:

          for(var p in obj){
          //語(yǔ)句
          }

          在Ajax編程中,經(jīng)常要能動(dòng)態(tài)的改變界面元素的樣式,這可以通過(guò)對(duì)象的style屬性來(lái)改變,比如要改變背景色為紅色,可以這樣寫(xiě):
          element.style.backgroundColor="#ff0000";

          基本上CSS里擁有的屬性在JavaScript中都能夠使用:
          function setStyle(_style){
          //得到要改變樣式的界面對(duì)象
          var element=getElement();
          element.style=_style;
          }

          直接將整個(gè)style對(duì)象作為參數(shù)傳遞了進(jìn)來(lái):
          var style={
          color:#ffffff,
          backgroundColor:#ff0000,
          borderWidth:2px
          }

          這時(shí)可以這樣調(diào)用函數(shù):
          setStyle(style);

          或者直接寫(xiě)為:
          setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

          這段代碼看上去沒(méi)有任何問(wèn)題,但實(shí)際上,在setStyle函數(shù)內(nèi)部使用參數(shù)_style為element.style賦值時(shí),如果element原先已經(jīng)有了一定的樣式,例如曾經(jīng)執(zhí)行過(guò):
          element.style.height="20px";

          而_style中卻沒(méi)有包括對(duì)height的定義,因此element的height樣式就丟失了,不是最初所要的結(jié)果。要解決這個(gè)問(wèn)題,可以用反射機(jī)制來(lái)重寫(xiě)setStyle函數(shù):
          function setStyle(_style){
          //得到要改變樣式的界面對(duì)象
          var element=getElement();
          for(var p in _style){
          element.style[p]=_style[p];
          }
          }

          程序中遍歷_style的每個(gè)屬性,得到屬性名稱(chēng),然后再使用方括號(hào)語(yǔ)法將element.style中的對(duì)應(yīng)的屬性賦值為_(kāi)style中的相應(yīng)屬性的值。從而,element中僅改變指定的樣式,而其他樣式不會(huì)改變,得到了所要的結(jié)果。^-^

          主站蜘蛛池模板: 迭部县| 满洲里市| 闵行区| 吉木萨尔县| 凤阳县| 盐源县| 遵义县| 西乌| 南陵县| 当阳市| 宕昌县| 牡丹江市| 元谋县| 日喀则市| 阿拉尔市| 墨玉县| 婺源县| 天门市| 尤溪县| 吉林省| 平陆县| 丁青县| 大姚县| 盐源县| 莲花县| 辽阳县| 琼结县| 西峡县| 镇宁| 广汉市| 阳高县| 留坝县| 黎川县| 会东县| 二手房| 晋城| 泽普县| 忻城县| 扬中市| 临沧市| 清涧县|