Dojo query 库

qingfeng825

浏览: 780244 次
性别:
来自: 北京

最近访客更多访客>>

daxi1314

harory

toolkit1216

zc00747

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

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

分享到：

SSL 的 java 实现 | 转载：快速理解Docker - 容器级虚拟化解 ...

2016-11-01 15:42
浏览 317
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Dojo query 库

对查询结果进行后续操作

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Dojo query 库

对查询结果进行后续操作

评论

发表评论

相关推荐

javascript创建对象的几种方式 .

javascript对象创建的五种方式

navigator对象介绍

当执行打印预览window.close无效

通过js encodeURIComponent传到服务器的乱码问题

当session失效后，无论点击那个页面，都找到顶端页面，跳到登录页面。

javascript boolean判断

利用setTimeout方法控制JS中方法的执行顺序

利用冒泡排序法实现select option按中文排序组件

JS-中文排序

Jscript中window.setInterval和window.setTimeout的区别

window.showModalDialog介绍

改变select元素原来的事件属性,并加快捷键

javascript 之---提交到一个新打开的页面

javascript之--Function 与function

Array 之 join() input()

Array之sort()

js页面排序-----基础篇

Event/window.Event属性和方法

在javascript中如何屏幕HTML元素原有的事件，根据需要建立自己需要的事件

最近访客更多访客>>