Dojo query 库
Dojo Query 庫的核心是一個 dojo.query 函數，該函數接收一個查詢字符串，以及一個可選的 DOM 節點作為參數，返回一個 NodeList 對象。一方面我們可以通過 id，元素名稱，屬性，CSS 等及其組合設置精巧的查詢字符串準確控制返回的結果，另一方面返回的 NodeList 對象提供了豐富的操作接口，對其調用的很多方法（如 addClass）都可以直接作用于所有的元素，并且支持鏈式調用。如下面的例子：
?
dojo.query("div.someClassName").style("backgroundColor","gray").forEach("item.disabled= true;");
首先在 DOM 根結點查詢 class 為“someClassName”的 div 元素，對于返回的所有元素，將 style 屬性“backgroundColor”設置為“gray”，然后將元素的“disabled”屬性設置為“true”。
dojo.query("img"); //查詢頁面所有的img 標簽 dojo.query("h1,h2,h3"); //查詢頁面所有的h1 ha2 h3 標簽 dojo.query("#widget123"); //查詢id 為widget123的元素 dojo.query(".offToSeeTheWij"); 查詢class=offToSeeTheWij的所有元素 dojo.query("p:first-child"); //利用 first-child 來查詢任意節點下的首個 p 子元素//下列代碼就是分別用來查詢 name 屬性的取值以“item”打頭，以“item”結尾，和包含“item”字樣的元素的： dojo.query("[name^=item]"); dojo.query("[name$=item]"); dojo.query("[name*=item]");?
上面我們看到的有關于 Dojo Query 的例子都只接受一個參數，它們實現的是在全局范圍內，即整個頁面范圍內，對節點進行查詢。Dojo Query 還支持局部范圍內的相對查詢。此時，除了查詢表達式外，我們需要傳入另一個參數，用以指示查詢起始的根節點。該參數可以是一個字符串，Dojo Query 會將其視作元素的 id 值；或者我們也可以傳入一個 DOM 節點。
<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 對象，它提供了豐富的操作接口方法。基本而言，NodeList 提供了幾乎所有操作 DOM 的方法，且簡單易用；因為它本身是 Array 對象，所以它支持所有的 Dojo 對數組的操作方法；同時，它也提供了很多直接處理事件的方法。而且，NodeList 還有一個顯著的優點，就是很多方法支持鏈式調用。所謂鏈式調用，是指 NodeList 的方法調用之后仍會返回當前的對象，可以通過“.”級聯繼續應用其他的操作，例如 :
?
dojo.query(".thinger ").style {border :"1px" }).removeClass("thinger").addClass("thinger2");
?
作為 Array 對象，NodeList 具有長度屬性，而且可以通過 at，forEache，push，pop 這些方法來操縱它。需要注意的是 at，map，forEach，slice，splice，contact 等都可以進行鏈式調用，但是 push，pop，shift 和 unshift 則是不可以的。
forEach方法
dojo.query("div").forEach(function(node, index, array){ node.innerHTML = "new version content!"; }); // try var elementB= dojo.query("#"+inputStr).parents(".classA").first(); var elementC= dojo.query(elementB).parent(".classB").first(); function displayIcon(node,type){dojo.query(node).children("a").children("img").forEach(function(img,index,nodeList){dojo.attr(img,"src","images2/expanded.gif");}?
總結
以上是生活随笔為你收集整理的Dojo query 库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转载： 快速理解Docker - 容器
- 下一篇： SSL 的 java 实现