dojo/query (part 2) - NodeList-manipulate

簡介

NodeList-* 這幾個模組從來不會單獨使用，都是附加在 dojo/query 這個模組之上，用以擴充 dojo/query 的函式，藉以針對 query 所搜尋到的元件做類似批次作業的變更。利用 NodeList-manipulate 擴充 dojo/query 後，dojo/query 就會具有 dojo/dom-* 一系列模組的功能，只是函式名稱及傳遞的參數略有不同，函式的參數中不需傳入要改變屬性的節點或節點名稱。這個模組基本上在摸擬 jQuery 的作業方式，所有的函式都可以鏈接 (chain up)；其中最大的不同在於操作 DOM Tree 的方式，幾乎完全摸擬 jQuery 的作業，和 dojo/dom-construct 模組的作業有很大的差異。還有，在改變元件樣式時，jQuery 用的是 CSS() 函式，而 NodeList-manipulate 則保留使用 dojo 的 style() 函式。在監聽事件時，jQuery 用 bind() 函式，而 NodeList-manipulate 也保留了 dojo 使用的 on() 函式。操作 DOM Tree 的這一部份，去看 jQuery 的文章也許比看 dojo 的文章要來的詳盡。

底下並未列出所有的函式。

新增元件

append(element): 將 element 加在選取元件之中，成為選取元件的最後一個子元件，element 為一個元件，或一段 HTML 程式碼。

prepend(element): 將 element 加在選取元件之中，成為選取元件的第一個子元件，element 為一個元件，或一段 HTML 程式碼。

before(element): 將 element 加在選取元件之後，成為選取元件的同輩元件，element 為一個元件，或一段 HTML 程式碼。

after(element): 將 element 加在選取元件之前，成為選取元件的同輩元件，element 為一個元件，或一段 HTML 程式碼。

移動元件

appendTo(selector): 將所有選取元件依序加到 selector 之中，成為 selector 最後的子元件，selector 為選取元件的條件。

prependTo(element): 將所有選取元件依序加到 selector 之中，成為 selector 最先的子元件，selector 為選取元件的條件。

InsertBefore(selector): 將所有選取元件依序加到 selector 之前，成為 selector 最後的同輩元件，selector 為選取元件的條件。

InsertAfter(selector): 將所有選取元件依序加到 selector 之後，成為 selector 最後的同輩件，selector 為選取元件的條件。

其它

wrap(element): 將所有選取的元件，變成 element 的子元件。

replaceWith(element): 用 element 元件取代所有選取的元件。

範例

範例很簡單，就在清單中的每一個清單項目後面加入斜體的 "pie" 字，並用鏈接的函式改變清單字體的顏色。

CSS

<style>
html {
 width:100%;
 height:100%;
}
body {
 margin:0 auto;
 width:1000px;
 height:100%;
 padding-top:20px;
}
</style>

CSS 中沒有特別需要定義的項目。

HTML

<body class="claro">
 Fruits
 
  Apple
  Banana
  Cherry
 
</body>

HTML 中建立一份清單即可。

Script

第 8 行的 "dojo/NodeList-manipulate" 只是用來擴充 dojo/query 模組，而且又是在最後一個，所以在 function() 中的參數中，可以不用列名。但如果不是放在最後面，而其後有其它的參數時需要給予參數名時，就必須給予一個參數名，不然 dojo 會在載入模組和參數名稱之間的對應造成混亂而給出錯誤訊息。
第 19 行選取 CSS 類別為 .fruit 的所有清單項目。
第 20 行，加入 <em> Pie</em> 這段 HTML 程式碼到每一個清單項目的後面，並用鏈接函式 style() 改變字體的顏色。

熊伯的外接硬碟

2016年4月11日星期一