dojo 六 使用query dojo/query
要使用query,就要引入dojo/query包。
query可以根据Dom里节点的标签名、id名、class名来检索一个或多个节点。
--------------------------------------------------------------------------------------------
<
ul
id
=
"list"
>
<
li
class
=
"odd"
>
<
div
class
=
"bold"
>
<
a
class
=
"odd"
>Odd</
a
>
</
div
>
</
li
>
<
li
class
=
"even"
>
<
div
class
=
"italic"
>
<
a
class
=
"even"
>Even</
a
>
</
div
>
</
li
>
<
li
class
=
"odd"
>
<
a
class
=
"odd"
>Odd</
a
>
</
li
>
<
li
class
=
"even"
>
<
div
class
=
"bold"
>
<
a
class
=
"even"
>Even</
a
>
</
div
>
</
li
>
<
li
class
=
"odd"
>
<
div
class
=
"italic"
>
<
a
class
=
"odd"
>Odd</
a
>
</
div
>
</
li
>
<
li
class
=
"even"
>
<
a
class
=
"even"
>Even</
a
>
</
li
>
</
ul
>
<
ul
id
=
"list2"
>
<
li
class
=
"odd"
>Odd</
li
>
</
ul
>
--------------------------------------------------------
var
uls = query("ul");//检索到两个ul节点
var list =
query("#list")[0];//检索到一个id为list的节点
var odds =
query(".odd");//检索到七个class为odd的节点
var oddLI =
query("li.odd");//检索到四个li的class为odd的节点
var allA = query("li
a");//检索到六个li子节点为a的节点
var someA = query("li >
a");//检索到两个li第一个子节点为a的节点
query方法中的字符串叫选择器,其规则同CSS相同,返回值为一个数组。
forEach方法用来遍历数据元素。
query(
".odd"
).forEach(
function
(node,
index, nodelist){
//
});
在forEach的callBack方法里有三个参数,
node指代当前元素,
index指代当前元素在数组中的序列号,
nodelist为query(".odd")返回的数据(可选),在某些情况下可能需要,如需要获取当前元素前一个元素时虽然通过id只会检索到一个节点,但query只以数组的形式返回,
所以通过query("#list")[0]即可直接获取。
如果需要对检索的全部元素做相同的处理,则不用通过forEach分别对每个元素进行操作,可直接对query(".odd")进行操作,如
query(
".odd"
).addClass(
"red"
);//对所有class名为odd的元素添加class
red
query(
".odd"
).removeClass(
"red"
).addClass(
"blue
"
);//
对所有class名为odd的元素删除class
red并添加class blue
query(
".even"
).style(
"color"
,
"white"
).addClass(
"italic
"
);//
对所有class名为even的元素修改color样式为white,并添加class
italic
query(
".hookUp"
).on(
"click"
,
function
(){
alert(
"This button is hooked
up!"
);
});//
对所有class名为hookUp的元素添加一个click响应事件
dojo 六 使用query dojo/query的更多相关文章
- Dojo初探之3:dojo的DOM操作、query操作和domConstruct元素位置操作(基于dojo1.11.2版本)
前言: 前面两章讲了dojo的基本规范和配置,当然这个配置不是必须的,当你有这需求的时候就可以用到dojo的config配置. dojo的所有js都是符合AMD规范进行异步加载的:http://blo ...
- Dojo初探之5:dojo的request(请求)操作、请求过程事件绑定和隐藏数据data()操作(基于dojo1.11.2版本)
前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...
- Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- Configuring Dojo with dojoConfig - The Dojo Toolkit
转载自Dojo官网 Configuring Dojo with dojoConfig The dojoConfig object (formerly djConfig) allows you to s ...
- Dojo 学习笔记 之 Dojo hitch&partial
原文: http://dojotoolkit.org/documentation/tutorials/1.10/hitch/index.html 版本: Dojo 1.10 为了更好地使用JavaSc ...
- dojo 九 effects dojo/_base/fx 和 dojo/fx
官方教程:Dojo Effects这里讲学习一下dojo如何实现淡入.淡出.滑动等效果.实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx.dojo/_base/fx 中提供了 ...
- Hibernate中的query.setFirstResult(),query.setMaxResults();
一.query.scroll()和query.setFirstResult(),query.setMaxResults();这两种方法都可以取到一定范围内的数据,用来数据分页显示.那么两者区别,以及两 ...
- dojo/Deferred类和dojo/promise类的使用
参考博客:https://blog.csdn.net/blog_szhao/article/details/50220181 https://dojotoolkit.org/docume ...
- Dojo的ready函数:dojo.ready(以前的dojo.addOnLoad)
dojo的dojo/domReady!插件和dojo/ready的区别: In simple cases,dojo/domReady! should be used. If an app us ...
- Elasticsearch由浅入深(九)搜索引擎:query DSL、filter与query、query搜索实战
search api的基本语法 语法概要: GET /_search {} GET /index1,index2/type1,type2/_search {} GET /_search { , } h ...
随机推荐
- java中的IO流之文件复制
O(∩_∩)O哈哈~ 1.综述 一门成熟的语言肯定具备的几个模块:IO,通信,线程,UI...... Java作为一门成熟的程序语言,其IO流是比较复杂的.上个图大家感受下: 简单分析一下,IO分为两 ...
- iOS网络传输Delegate不被触发的本质原因
NSURLSession一共有四种Delegate (文后附表有Session和SessionTask分类表格) NSURLSessionDelegate, NSURLSessionDownloadD ...
- JS 学习笔记--7---正则表达式
正则表达式中的内容很多,也很深,下面只是一些基本的知识点,练习中使用的浏览器是IE10,若有不当处请各位朋友指正,我会在第一时间修改错误之处. 匹配的概念:是包含的意思,不是相等的意思 1.正则表达式 ...
- AutoResetEvent 运用
static AutoResetEvent are = new AutoResetEvent(true);//初始化为开 static void Main(string[] args) { //如果这 ...
- delete错误
今天找了半天delete错误,后来才知道是MTd和MDd模式的问题,MTd的内存申请和释放必须在同一个模块里面,接口上面不能使用stl等,MDd可以使用.改成MDd就可以了
- html5离线存储
为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...
- CocoaPods 使用手册
CocoaPods 使用手册 CocoaPods 使用手册 ...
- [翻译]Kafka Streams简介: 让流处理变得更简单
Introducing Kafka Streams: Stream Processing Made Simple 这是Jay Kreps在三月写的一篇文章,用来介绍Kafka Streams.当时Ka ...
- Too many levels of symbolic links 问题
Too many levels of symbolic links 问题 Posted on 2011-11-30 20:33 张贺 阅读(5826) 评论(0) 编辑 收藏 今天弄了个ZendStu ...
- iOSpush过后返回多级界面
有导航控制器push过后pop可以反回上一个界面,然而我们需要返回多级界面有下面两种方法 调用API - (NSArray *)popToViewController:(UIViewControlle ...