dojo使用query dojo/query
要使用query，就要引入dojo/query包。
query可以根據Dom里節點的標簽名、id名、class名來檢索一個或多個節點。
--------------------------------------------------------------------------------------------
--------------------------------------------------------
var uls = query("ul");//檢索到兩個ul節點
var list = query("#list")[0];//檢索到一個id為list的節點
var odds = query(".odd");//檢索到七個class為odd的節點
var oddLI = query("li.odd");//檢索到四個li的class為odd的節點
var allA = query("li a");//檢索到六個li子節點為a的節點
var someA = query("li > a");//檢索到兩個li第一個子節點為a的節點
query方法中的字符串叫選擇器，其規則同CSS相同，返回值為一個數組。
forEach方法用來遍歷數據元素。
query(".odd").forEach(function(node, index, nodelist){????????????//
????????});在forEach的callBack方法里有三個參數，
node指代當前元素，
index指代當前元素在數組中的序列號，
nodelist為query(".odd")返回的數據（可選），在某些情況下可能需要，如需要獲取當前元素前一個元素時
雖然通過id只會檢索到一個節點，但query只以數組的形式返回，所以通過query("#list")[0]即可直接獲取。
如果需要對檢索的全部元素做相同的處理，則不用通過forEach分別對每個元素進行操作，可直接對query(".odd")進行操作，如
query(".odd").addClass("red");//對所有class名為odd的元素添加class red
query(".odd").removeClass("red").addClass("blue");//對所有class名為odd的元素刪除class red并添加class blue
query(".even").style("color","white").addClass("italic");//對所有class名為even的元素修改color樣式為white，并添加class italic
query(".hookUp").on("click",function(){????????????alert("This button is hooked up!");????????});//對所有class名為hookUp的元素添加一個click響應事件
這個片段來自：https://www.ibm.com/developerworks/cn/web/1009_moying_dojoquery/
基于 Dojo Query 的查詢
當我們采用 Dojo Query 進行查詢時，通常使用最多的就是根據 HTML 元素的 tag 名稱，或是 class 以及 id 屬性來進行查詢。這也是我們在引用 CSS 元素進行選擇時常用的幾種方式。比如，假設我們想查詢頁面內所有的 <img> 標簽，那么不妨可以這么寫：
dojo.query("img");此處，img 即為標簽名稱，由于 Dojo Query 并不對大小寫進行區分，故而形如 <IMG> 這樣的 HTML 元素也會被包含在查詢結果之中。上述語法的執行效果，等價于在 JavaScript 中調用 DOM API：document.getElementsByTagName("IMG")。
同樣，根據 class 和 id 屬性進行查詢的語法，也很簡單。例如，下面的例子實現的是在當前頁面中查詢 id 為 widget123 的元素：
dojo.query("#widget123");其執行效果，等價于調用 document.getElementById("widget123");，或者，利用 Dojo 提供的 API，則相當于 dojo.byId("widget123")。
針對 class 屬性的查詢同樣的簡單直觀，例如，下面的例子是查找所有 class 名稱為“offToSeeTheWij”的 HTML 元素：
dojo.query(".offToSeeTheWij");此處我們可以看到，同樣的功能，如果用 DOM API 來實現，則將會變得非常冗長乏味：
清單 1 DOM API 查詢
var list = []; var nodes = document.getElementsByTagName("*"); for(var x = 0; x < nodes.length; x++){ if(nodes[x].className == "progressIndicator"){ list.push(nodes[x]); } }在上述代碼中，我們需要對頁面中的所有節點進行遍歷，逐一判斷其 className 屬性是否滿足匹配條件才行。通過這個典型的例子，我們可以清楚地看到，使用 Dojo Query 在 DOM 節點查詢方面具有非常顯著的優勢。
事實上，使用 Dojo Query 不僅在表達查詢條件的簡潔性上會更具優勢，相比于直接利用 DOM API 進行處理的方式，其執行速度也通常會更加的快。接下來讀者便會看到，這一點尤其在我們需要查詢相對復雜的頁面節點關系時，會變得更為突出。
除了上述我們看到的，Dojo Query 提供了基本的依據 tag、class、id 進行查詢的方式以外，它還提供了許多更為復雜的查詢語法，而所有這些語法則都遵循于 CSS 規范。Dojo Query 的這一做法十分的明智，因為 CSS 是已經被大家所廣泛使用和接受了的一種 Web 技術，其對 HTML 頁面元素進行選擇性修飾的方式，兼具語法簡潔和功能強大的特點，目前所有的主流瀏覽器都對 CSS 有很好的支持。Dojo Query 沿用了 CSS 的語法，使得使用者無需學習一整套新的查詢語法，便可以很好的掌握 Dojo Query 的使用，以完成各種復雜的查詢功能。
目前，Dojo Query 支持許多常見的 CSS 選擇器語法。例如，我們可以利用較為復雜的類選擇器語法，實現對符合指定 class 屬性的指定元素進行查詢：
dojo.query("div.someClassName");又比如，我們可以將對各 tag 名稱結合起來實現組合查詢，下面完成的即是查詢出所有的 h1，h2，h3 節點：
dojo.query("h1,h2,h3");除此以外，Dojo Query 還支持某些特殊的在 CSS 3 中定義的選擇器。我們可以在查詢條件中引用某些特殊的偽類選擇符，比如可以利用 nth-child 來查詢 tbody 節點下所有奇數序號的子元素：
dojo.query("tbody tr:nth-child(odd)");利用 first-child 來查詢任意節點下的首個 p 子元素：
dojo.query("p:first-child");還可以利用諸如“^=”、“$=”、“*=”這樣的屬性選擇器，實現匹配特定字符串條件的查詢。例如，下列代碼就是分別用來查詢 name 屬性的取值以“item”打頭，以“item”結尾，和包含“item”字樣的元素的：
清單 2 使用屬性選擇器
dojo.query("[name^=item]"); dojo.query("[name$=item]"); dojo.query("[name*=item]");上面我們看到的有關于 Dojo Query 的例子都只接受一個參數，它們實現的是在全局范圍內，即整個頁面范圍內，對節點進行查詢。Dojo Query 還支持局部范圍內的相對查詢。此時，除了查詢表達式外，我們需要傳入另一個參數，用以指示查詢起始的根節點。該參數可以是一個字符串，Dojo Query 會將其視作元素的 id 值；或者我們也可以傳入一個 DOM 節點。在下面的例子里，我們實現了在 thisForm 這個節點下進行查詢的功能：
清單 3 局部范圍內的相對查詢
<html> <head> <script type="text/javascript" src="../js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.addOnLoad(function() { console.debug(dojo.query("button").length); // 輸出"3"console.debug(dojo.query("button", "thisForm").length); // 輸出”1”}); </script> </head> <body> <button id="b1" /> <button id="b2" /> <form id="thisForm" > <button id="formB" /> </form> </body> </html>對查詢結果進行后續操作
通過以上章節的介紹，我們知道，Dojo Query 返回的結果是 NodeList 對象。NodeList 是一個擴展的 Array 對象，它提供了豐富的操作接口方法?；径?#xff0c;NodeList 提供了幾乎所有操作 DOM 的方法，且簡單易用；因為它本身是 Array 對象，所以它支持所有的 Dojo 對數組的操作方法；同時，它也提供了很多直接處理事件的方法。而且，NodeList 還有一個顯著的優點，就是很多方法支持鏈式調用。所謂鏈式調用，是指 NodeList 的方法調用之后仍會返回當前的對象，可以通過“.”級聯繼續應用其他的操作，例如 :
清單 4 鏈式調用
dojo.query(".thinger ").style {border :"1px" }).removeClass("thinger").addClass("thinger2");
我們先來看一下 NodeList 的基本操作。
作為 Array 對象，NodeList 具有長度屬性，而且可以通過 at，forEache，push，pop 這些方法來操縱它。需要注意的是 at，map，forEach，slice，splice，contact 等都可以進行鏈式調用，但是 push，pop，shift 和 unshift 則是不可以的。請參看以下代碼片段：
清單 5 NodeList 基本操作
var l = dojo.query(".thinger"); console.log("Size of items with class thinger:"+l.length); //NodeList 中加入對象l.push(dojo.create('div', { innerHTML:'hi' })); console.log("Size of items with class thinger:" + l.length); l.push(dojo.byId("foo")); console.log("Size of items with class thinger:" + l.length); // 查詢 id 為 foo 的元素在 NodeList 中的位置console.log( l.indexOf(dojo.byId("foo")) ); // 獲取第四個元素var node = l[3]; // 通過 at 方法，一次找出第二和第四個元素，返回結果也是一個 NodeList。var newList = l.at(1, 3);在使用 NodeList 的過程中，如果大家細心的話，也許會注意到，NodeList 在封裝 dojo.* 方法的同時，通過自描述（self-descriptive）方式省略掉了第一個參數，這也是符合我們使用習慣的。例如 NodeList 的 forEach 方法，其用法看起來很像 dojo.forEach（Array，Function）。不過第一個參數被隱式提供了，即將 NodeList 對象本身作為 Array 參數的值。
下面這個例子說明如何在 <div> 內添加內容。
清單 6 NodeList.forEach 方法
dojo.query("div").forEach(function(node, index, array){ node.innerHTML = "new version content!"; });注意，通過自描述省略第一個參數的概念貫穿所有 NodeList 的 API。下面介紹的 NodeList 的常用方法，也適用上面的概念。
dojo.style 是一個應用于單個 node 的 API，這個 API 對應到 NodeList API，等價于隱式省去 node 參數，然后將其應用于 NodeList 中的每一個元素。
清單 7 NodeList.style 方法
// 執行查詢
var borders = dojo.query(".thinger").style("border"); // 設置新值dojo.query(".thinger").style("border", "1px solid black"); // 刪除，添加 class dojo.query(".thinger").style({border :" 3px solid red" }).removeClass("thinger"). addClass("thinger2");上面的代碼段是一個 NodeList API 進行級聯調用的例子。大部分 DOM 相關的對象都如上述例子一樣，返回 NodeList，然后我們可以對其進行鏈式調用。但并非所有的 API 都可以級聯，NodeList.coords 就是一個例外，它返回的是一組符合條件的坐標值，因此是不可以級聯的。
var nl = dojo.query(".foo");
var coords = nl.coords(); // 例如返回對象 { x,y,z}
所以我們在使用 NodeList API 時，要注意并不是所有的 API 都可以級聯調用。這個基本上可以通過是否返回 NodeList 對象進行判斷。
現在，我們簡單介紹一下，如何在 NodeList 中使用事件。
以 NodeList.connect() 為例，它提供了一種方法，可以向所有的 DOM Node 中添加事件。對應于 dojo.connect API，同樣，node 參數對應于 NodeList 中當前的 Node。
清單 8 NodeList.connect 方法
dojo.query("input").connect("onclick", function(e){ alert("new event!"); });我們可以像使用 dojo.connect 一樣，向 NodeList.connect 添加任何事件。為了方便起見，NodeList 提供了很多 DOM 的直接操縱對應事件的方法，所以上面的例子也可以寫成：
清單 9 NodeList.onclick 方法
dojo.query("input").onclick(function(e){ alert("new event!"); });直接支持的事件還包括 onclick, onmouseenter, onmouseleave, onmouseover, omouseout, ondblclick 等。例如：
清單 10 NodeList 的鼠標事件
dojo.query("p").onmouseenter(function(e){ dojo.style(e.target, "color", "red"); }).onmouseleave(function(e){ dojo.style(e.target, "color", "blue"); });有時，為了自己使用的方便或者出于興趣，也許你想在 NodeList 中增加一些方法，以便可以在 dojo.query 的調用中使用這些方法。為此我們可以通過 dojo.extend 擴展 NodeList 向 NodeList 中添加自定義的新方法。如：
清單 11 擴展 NodeList 方法
dojo.extend(dojo.NodeList, { setColor: function(newColor){ this.style({ color: newColor }); return this; } }); dojo.query("p").setColor ("yellow");注意，此處的關鍵是“return this”，它保證了后續鏈式調用的成功執行。
另外，為了保持 NodeList 基本操作函數的緊湊性，一些擴展方法是以外部包的形式提供的。例如，dojo.NodeList-fx 為 NodeList 引入了 FX/Animation，dojox.fx.ext-dojo.NodeList 提供 dojox.fx 里關于動畫的功能，dojo.NodeList-html 提供了高級的 HTML 操縱功能，等等。
通過以上的介紹我們可以看出，通過 NodeList，我們可以更加簡單地操縱 DOM 對象，更加方便地添加事件，更重要的是，我們還可以進行鏈式操作，以減少代碼復雜度，加快開發速度。
總結
以上是生活随笔為你收集整理的dojo使用query dojo/query的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JSON学习笔记（六）- JSONP
- 下一篇： dojo 的DOM操作 dojo/dom