Dojo query 库
Dojo Query 庫的核心是一個(gè) dojo.query 函數(shù)，該函數(shù)接收一個(gè)查詢字符串，以及一個(gè)可選的 DOM 節(jié)點(diǎn)作為參數(shù)，返回一個(gè) NodeList 對(duì)象。一方面我們可以通過 id，元素名稱，屬性，CSS 等及其組合設(shè)置精巧的查詢字符串準(zhǔn)確控制返回的結(jié)果，另一方面返回的 NodeList 對(duì)象提供了豐富的操作接口，對(duì)其調(diào)用的很多方法（如 addClass）都可以直接作用于所有的元素，并且支持鏈?zhǔn)秸{(diào)用。如下面的例子：
?
dojo.query("div.someClassName").style("backgroundColor","gray").forEach("item.disabled= true;");
首先在 DOM 根結(jié)點(diǎn)查詢 class 為“someClassName”的 div 元素，對(duì)于返回的所有元素，將 style 屬性“backgroundColor”設(shè)置為“gray”，然后將元素的“disabled”屬性設(shè)置為“true”。
dojo.query("img"); //查詢頁面所有的img 標(biāo)簽 dojo.query("h1,h2,h3"); //查詢頁面所有的h1 ha2 h3 標(biāo)簽 dojo.query("#widget123"); //查詢id 為widget123的元素 dojo.query(".offToSeeTheWij"); 查詢class=offToSeeTheWij的所有元素 dojo.query("p:first-child"); //利用 first-child 來查詢?nèi)我夤?jié)點(diǎn)下的首個(gè) p 子元素//下列代碼就是分別用來查詢 name 屬性的取值以“item”打頭，以“item”結(jié)尾，和包含“item”字樣的元素的： dojo.query("[name^=item]"); dojo.query("[name$=item]"); dojo.query("[name*=item]");?
上面我們看到的有關(guān)于 Dojo Query 的例子都只接受一個(gè)參數(shù)，它們實(shí)現(xiàn)的是在全局范圍內(nèi)，即整個(gè)頁面范圍內(nèi)，對(duì)節(jié)點(diǎn)進(jìn)行查詢。Dojo Query 還支持局部范圍內(nèi)的相對(duì)查詢。此時(shí)，除了查詢表達(dá)式外，我們需要傳入另一個(gè)參數(shù)，用以指示查詢起始的根節(jié)點(diǎn)。該參數(shù)可以是一個(gè)字符串，Dojo Query 會(huì)將其視作元素的 id 值；或者我們也可以傳入一個(gè) DOM 節(jié)點(diǎn)。
<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>?
對(duì)查詢結(jié)果進(jìn)行后續(xù)操作
通過以上章節(jié)的介紹，我們知道，Dojo Query 返回的結(jié)果是 NodeList 對(duì)象。NodeList 是一個(gè)擴(kuò)展的 Array 對(duì)象，它提供了豐富的操作接口方法。基本而言，NodeList 提供了幾乎所有操作 DOM 的方法，且簡單易用；因?yàn)樗旧硎?Array 對(duì)象，所以它支持所有的 Dojo 對(duì)數(shù)組的操作方法；同時(shí)，它也提供了很多直接處理事件的方法。而且，NodeList 還有一個(gè)顯著的優(yōu)點(diǎn)，就是很多方法支持鏈?zhǔn)秸{(diào)用。所謂鏈?zhǔn)秸{(diào)用，是指 NodeList 的方法調(diào)用之后仍會(huì)返回當(dāng)前的對(duì)象，可以通過“.”級(jí)聯(lián)繼續(xù)應(yīng)用其他的操作，例如 :
?
dojo.query(".thinger ").style {border :"1px" }).removeClass("thinger").addClass("thinger2");
?
作為 Array 對(duì)象，NodeList 具有長度屬性，而且可以通過 at，forEache，push，pop 這些方法來操縱它。需要注意的是 at，map，forEach，slice，splice，contact 等都可以進(jìn)行鏈?zhǔn)秸{(diào)用，但是 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");}?
總結(jié)
以上是生活随笔為你收集整理的Dojo query 库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转载： 快速理解Docker - 容器
- 下一篇： SSL 的 java 实现