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 ...
随机推荐
- 在mac下使用brew和brew cask轻松实现软件安装
Brew(homebrew) 1.简介 Brew 是 Mac 下面的包管理工具,通过 Github 托管适合 Mac 的编译配置以及 Patch,可以方便的安装开发工具. Mac 自带ruby 所以安 ...
- IIS和MVC
现象:MVC项目部署到IIS(7.5)后,浏览时只显示文件目录,不是网站 解决办法 1.服务器安装程序对应的Framework版本 2.服务器安装程序对应的MVC版本 3.安装CGI和ISAPI扩展: ...
- 【CentOS】cp显示进度条
问题描述: 使用CentOS的cp时,对于大文件的拷贝或者mv,需要等待很长时间,现在需要显示cp或mv的进度 问题解决: Advanced copy 参考官网:http://beatex.org/w ...
- poj 1985 Cow Marathon 树的直径
题目链接:http://poj.org/problem?id=1985 After hearing about the epidemic of obesity in the USA, Farmer J ...
- 【BZOJ】【2049】【SDOI2008】洞穴勘测 Cave
LCT 哦……LCT的一道更水的裸题,适合学习access,link,cut等基本操作(其实这三个不是在一个层面上的?不要在意这些细节……) /**************************** ...
- 一个perfect 的解决 阴影拉伸的方法 shadow map strech
因为在场景中做了,有的物体产生阴影比如人物,有的物体不产生阴影比如地面,这样在地面凹下去的地方,悬崖,池塘边,就会有阴影的拉伸. 实际上, 没办法上传图片.... L是光源 A 点(人物身上)产生阴影 ...
- unset之讲解
unset (PHP 4, PHP 5) unset — 释放给定的变量 说明¶ void unset ( mixed $var [, mixed $... ] ) unset() 销毁指定的变量. ...
- Sqli-labs less 39
Less-39 和less-38的区别在于sql语句的不一样:SELECT * FROM users WHERE id=$id LIMIT 0,1 也就是数字型注入,我们可以构造以下的payload: ...
- ubuntu 点点滴滴
pptpd http://linux.cn/article-3376-1.html 命令行升级ubuntu版本 do-release-upgrade -d 寻找最新的稳定版本,加上-d参数则包括不稳 ...
- HDU5052 Yaoge’s maximum profit(LCT)
典型的LCT操作,但是维护的是一个序列最左边减最右边的最小值,所以要维护左边减右边的最小值del[0]和一个右边减左边的最小值del[1](因为rev标记swap的时候对应的值也要交换).维护的时候d ...