1.引言
在上一篇博客中介绍了dojo框架关于DOM的操作,但是关于DOM的选择只是介绍了dojo/dom
模块,该模块只能通过dom的id属性选择dom元素。这还是远远不够的,如果大家学过jquery
,就会知道jquery
的选择器非常强大,这时候大家会有疑问,难道dojo就没有类似的模块吗?这肯定是有的,也就是dojo/query
模块,该模块和jquery
中的选择器类似,在本篇博客中就主要介绍一下query
中的选择器用法,为了便于介绍,将选择器分类,总共分为了七类。分别为:
- 基本选择器
- 层次选择器
- 内容过滤选择器
- 属性选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
- 表单选择器
接下来我们就一个一个的这七种选择器应该如何使用:
- 需要注意的是:
query
模块选择的是一个DOM数组(哪怕只有一个DOM元素 也是数组)
2. 基本选择器
首先我们用demo来看一下基本选择器的用法
2.1 通过id选择DOM
- 我们的标签
<input id="txt" type="txt" value=""/>
- 使用query选择dom元素
require(["dojo/query","dojo/domReady!"], function(query) {
//注意这里是一个数组,选择id为txt的DOM元素
query("#txt")[0].value="aaa";
});
2.2 通过class选择DOM
- 标签
<input class="txt" type="txt" value=""/>
- 使用query选择dom元素
require(["dojo/query","dojo/domReady!"], function(query) {
//选择class属性为txt的DOM元素
query(".txt")[0].value="aaa";
});
2.3 通过标签名选择元素
- 标签
<input type="txt" value=""/>
- 使用query选择dom元素
require(["dojo/query","dojo/domReady!"], function(query) {
//选择所有的input标签
query("input")[0].value="aaa";
});
2.4 多个选择器一起使用
- 标签
<input id="txt1" type="txt" value=""/>
<input class="txt2" type="txt" value=""/>
- 使用query选择dom元素
require(["dojo/query","dojo/domReady!"], function(query) {
//使用多个选择器,之间使用逗号分割
var dom=query("#txt1,.txt2")
dom[0].value="aaa";
dom[1].value="aaa";
});
3.层次选择器
为了更加清晰的看到层次选择器的用法,我们先设置一下div标签的样式
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
3.1 祖先元素和后代元素的关系
- 创建我们的标签
<body class="tundra">
<div >
<div class="mini"></div>
</div>
<div>
</div>
</body>
- 使用query选择器选择div元素
require(["dojo/query","dojo/domReady!"], function(query) {
//注意是祖先和后代的关系
query("body div").style("background","yellow")
});
- 运行结果(运行前和运行后)
3.2 父子元素的关系
- 同样是上面的标签
<body class="tundra">
<div >
<div class="mini"></div>
</div>
<div>
</div>
</body>
- 使用query选择dom元素
require(["dojo/query","dojo/domReady!"], function(query) {
query("body>div").style("background","yellow")
});
- 运行结果(运行前和运行后)
3.3 根据相对位置选择元素
- 创建我们的标签
<body class="tundra">
<div id="one">
<div class="mini"></div>
</div>
<div>
</div>
<div>
</div>
</body>
- 选择 id为
one
的下一个兄弟节点为div元素.
require(["dojo/query","dojo/domReady!"], function(query) {
query("#one+div").style("background","yellow")
});
- 运行结果(运行前和运行后)
4. 内容过滤选择器
4.1 选择包含特定文本的DOM元素
- 创建标签
<body class="tundra">
<div id="one">di</div>
<div>
</div>
</body>
- 选取含有文本“di”的div元素.
require(["dojo/query","dojo/domReady!"], function(query) {
query("div:contains('di')").style("background","yellow")
});
- 运行结果(运行前和运行后)