要使用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){
//
});
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响应事件