《Javascript DOM 編程藝術》

來源:互聯網
上載者:User

JS中數組的批量填充方式:

  1.在聲明時同時進行填充

        var beatles = Array("John","Paul","George","Ringo");

  2.我們甚至用不著明確地表明我們是在建立數組.事實上,只需用一堆方括弧括起來就足以建立我們想要的數組了:

        var beatles = ["John","Paul","George","Ringo"];

JS中的關聯陣列

:JS中數組下標並不局限於整數.數組下標可以是字串:

        var lennon = Array();

        lennon["name"]="John";

        lennon["year"]="1940";

把一個對象用作一個聯合數組

        

a = {a : "Athens" , b : "Belgrade", c : "Cairo"}

  從某種意義上講,完全可以吧所有的數組都看做是關聯陣列.數值數組只不過是關聯陣列的一種特例.

JScript 中的數組是稀疏的。

  也就是說,如果一個數組具有三個元素,編號分別為 0、1 和 2,您就可以建立元素 50,而不必擔心從 3 到 49 的參數。如果該數組有一個自動的 length 變數,,該 length 變數被設為 51,而不是 4。當然您可以建立各元素的編號之間沒有間隙的數組,不過沒有必要這樣做。

在 JScript 中,對象和數組幾乎相同。兩個主要差別是對象沒有自動長度屬性,而數組沒有對象的屬性和方法。

CSS層疊樣式表定義方式:

  <p class="special">This<p>

  <h2 class="special">So<h2>

  1.在樣式表裡,我們可以像下面這樣為class屬性值相同的所有元素定義一種共用的樣式:

      .special{

        font-style: italic;

      }

      // spical為class id

  2.我們還可以像下面這樣利用class的屬性為一種特定類型的元素定義一種獨享的樣式:

      h2.spical{

        text-tansform:uppercase;

      }

      // spical為class id

  3.id屬性的用途是給網頁裡的某個元素加上一個獨一無二的標識符

      <ul id="purchase">

      在樣式表裡我們可以像下面這樣為有著特定id屬性值的元素定義一種獨享的樣式:

      #purchase{

         border:1px;

         color:#CCC;

      }

  4.我們還可以像下面這樣利用ID屬性為包含在某給定怨毒裡的其他元素定義樣式,如此定義的樣式將只作用於包含在這個給定元素裡的有關元素

      #purchase li{

          font-weight:bold;

      }

getElementByTagName使用萬用字元("*")

   document.getElementByTagName("*");//這種方式可以取到文檔中所有的元素節點.

如果在onclick事件所觸發的Javascript中增加一條return false的話,則可以阻止對事件的進一步處理,阻止連結跳轉.

     <a href="#" onclick="alert();return false;">firefox</a>

"javascript:"偽協議

   可以通過在地址欄輸入偽協議來進行調試:javascript:debugger

;

   也可以再HTML文檔中通過"javascript:"偽協議調用Javascript代碼(該種做法並不規範,且語義不清晰,所以也不建議使用):<a href="javascript:alert();">alert</a>

每個函數只有一個入口一個出口

?

  理論上該原則比較好,不過過分拘泥於原則往往會使代碼變得難於閱讀.

  同一個函數有多個出口點的情況是可以接受的.不過他們應該集中於該函數的開頭部分

  function pre(){

    if(!document.getElementById) return false;

  }

document.write(),innerHtml破壞了js與html分離的原則,應盡量避免使用

insertBefore

previousSibling和nextSibling 兄弟節點取得

for...in 語句:它可以把某個數組的下標(鍵字)臨時地賦值給一個變數,因此可以直接將對象當做聯合數組處理

     

// 初始化對象。

    
a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"}

    
// 迭代屬性。

    
for (key in a) {

    
s += a[key] ;

    
}

Title屬性:

The Title attribute is similar to the standard HTML Title attribute. The behavior of a title is similar to a Microsoft Windows ToolTip.

使用DOM設定表格交替顏色(斑馬線)(ie8不支援exprssion了,現在不能用css中的expression了,呵呵

)

    function(){

       var tables = document.getElementsByTagName("table");

       for(var i = 0; i < tables.length; i++)

       {

          var odd = false;

          var rows = tables[i].getElementsByTagName("tr");

          for(var j = 0; j < rows.length; j++)

          {

             if(odd == true)

             {

                row[j].style.backgroundColor = "#ffc";

                odd = false;

             }

             else

             {

                odd = true;

             }

          }

       }

    }

CSS中的"追加"效果:

  利用字串拼接操作把新的class設定值追加到className上去(注意,兩個class之間有空格分隔),如此便實現了樣式疊加,新樣式中的定義將在舊樣式的基礎上產生效果.

    elem.className += " intro";

  不過空格只有存在舊className屬性的基礎上才有必要,所以需要先對className進行判斷,只有在className屬性不為null的時候才需要追加,否則直接賦值.

利用下面的函數實現控制項的滑鼠跟隨(由於控制項將以像素為單位來移動,所以動畫效果較好)

    function moveElement(elementID,final_x,final_y,interval)

    {

      if(!document.getElementById(elementID)) return false;

      var elem = document.getElemenById(elementID);

      if(elem.movement)

      {

        clearTimeout(elem.movement);

        elem.movement = null;

      }

      var xpos = parseInt(elem.style.left);

      var ypos = parseInt(elem.style.top);

      if(xpos == final_x && ypos == final_y)

      {

        return true;

      }

      if(xpos < final_x)

      {

        xpos++;

      }

      if(xpos > final_x)

      {

        xpos--;

      }

      if(ypos < final_y)

      {

        ypos++;

      }

      if(ypos > final_y)

      {

        ypos--;

      }

      elem.syle.left = xpos + "px";

      elem.syle.top = ytop + "px";

      var repeat = "moveElement(" + "'" + elementID + "','" + final_x +  "','" + final_y + " '" +")";

      element.movement= setTimeOut(repeat, interval);

    }

DOM複製節點的方法:cloneNode(deep),這個方法只有一個布爾型的參數,它決定著是否要把被複製節點的子節點也一同複製到建立節點裡去.

    

DOM提供了一個用來替換文檔樹裡的節點的方法:replaceChild(newChild, oldChild),它把給定父元素裡的一個子節點替換為另外一個節點,並返回已經被替換的那個子節點.


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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