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 ...
随机推荐
- Alt.js的入门
一.什么是Alt altJS是基于Flux使用Javascript应用来管理数据的类库,它简化了flux的store.actions.dispatcher. 关于Flux,以下链接都做了很好的诠释 h ...
- Jquery结合Ztree生成树
尊重作者,附原文链接:http://my.oschina.net/u/2472104/blog/529055 Ztree的api http://www.ztree.me/v3/api.php Ztre ...
- Eclipse : cannot open output file(c++)
之前电脑卡的时候 强制关闭Eclipse,结果打开再次运行的时候却不能输出了:找了网上的原因,是之前那个进程还未关闭 开发环境 Eclipse for C/C++ & MinGW Er ...
- 推荐系统之LFM
这里我想给大家介绍另外一种推荐系统,这种算法叫做潜在因子(Latent Factor)算法.这种算法是在NetFlix(没错,就是用大数据捧火<纸牌屋>的那家公司)的推荐算法竞赛中获奖的算 ...
- SQL 基本(Head First)
CREATE TABLE my_contacts( last_name VARCHAR(30), first_name VARCHAR(30), email VARCHAR(50), gender C ...
- 基于jQuery很牛X的批量上传插件
上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...
- href=#与href=javascriptvoid(0)的区别
#"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而 ...
- logback日志文件需要注意点
1.支持的jar包 logback-access-1.1.1.jarlogback-classic-1.1.1.jarlogback-core-1.1.1.jar 2.logback.xml文件,we ...
- POJ1811 Prime Test(miller素数判断&&pollar_rho大数分解)
http://blog.csdn.net/shiyuankongbu/article/details/9202373 发现自己原来的那份模板是有问题的,而且竟然找不出是哪里的问题,所以就用了上面的链接 ...
- make_pair() (STL)
转载来的 Pairs C++标准程序库中凡是“必须返回两个值”的函数, 也都会利用pair对象 class pair可以将两个值视为一个单元.容器类别map和multimap就是使用pairs来管理其 ...