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");
				}
			

猜你喜欢

转载自qingfeng825.iteye.com/blog/2334677