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 库相关推荐

dojo 学习笔记之dojo.query - query(id) 与query(class)的差别
考虑这个样例:动态创建一个页面的时候,用new listtem()生成多个listitem, 且每一个listitem中都生成一个按钮button. 假设想要给每一个按钮都绑定一个click事件,用d ...
dojo使用query dojo/query
要使用query,就要引入dojo/query包. query可以根据Dom里节点的标签名.id名.class名来检索一个或多个节点. -------------------------------- ...
使用 dojo/query
在本篇文章中,我们将了解DOM的查询以及如何运用dojo/query这个模块来轻松地选择节点并操作他们. 入门指南在操作DOM的过程中,如何快速高效地检索出DOM节点显得相当重要.我们在Dojo D ...
Dojo学习笔记（一）：Hello Dojo!
欢迎来到Dojo世界!在这篇文章中你将会学习到如何加载Dojo以及探索Dojo的一些核心功能.你还会了解Dojo的基于AMD的模块架构,探索如何加载额外的模块来增加功能到您的Web站点或应用程序,并找 ...
Dojo API中文 Dojo内容模块概览，初学者
官网:http://dojotoolkit.org/reference-guide/1.10/dojo/index.html#dojo-dojo的翻译 dojo 内容: dojo dojo/dojo ...
Hello Dojo!(翻译)
http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html 欢迎学习DOJO!在本教程中,你将学些到如何加载DO ...
dojo框架的基本认识
最近复用十几年前的一个项目,里面用到了dojo框架,so总结一下这个框架的一些重要的知识点简介 Dojo的全称是Dojo Toolkit,始创于2004年,是当时各种蓬勃发展的JS工具包中的佼佼者. ...
地理信息系统（GIS）系列——Dojo 基础
1.Dojo 简介 Dojo 简介 Dojo 是一个 JavaScript 实现的开源 DHTML 工具包.它是在几个项目捐助基础上建立起来的(nWidgets,f(m),Burstlib).Dojo ...
web前端之dojo(用javascript语言实现的开源DHTML工具包)
web前端之dojo(用javascript语言实现的开源DHTML工具包) 一.开始Dojo开发 1.Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 Java ...

Dojo query 库

对查询结果进行后续操作

Dojo query 库相关推荐

最新文章

热门文章