dojo中的query选择器

最新推荐文章于 2021-08-06 10:57:23 发布

shiyangxu

最新推荐文章于 2021-08-06 10:57:23 发布

阅读量827

点赞数

文章标签： dojo/query

本文链接：https://blog.csdn.net/shiyangxu/article/details/81432928

版权

dojo/dom模块中只能通过DOM的ID属性来选择DOM元素，这远远不能满足我们的要求。因此，dojo/query模块中提供了更多的选择方法。该模块中大致可分为7类选择器：

基本选择器
层次选择器
内容过滤选择器
属性选择器
子元素过滤选择器
表单对象属性过滤选择器
表格选择器

query模块选择的是一个DOM数组（哪怕只有一个DOM元素也是数组）

1. 基本选择器

在html中定义标签

<div id='box' class='box'>
<div class='anotherbox'>

1.1 通过id选择

//使用query选择DOM元素
require(["dojo/query","dojo/domReady!"],function(query){
    query("#box");
})

1.2 通过class选择

//使用query选择DOM元素
require(["dojo/query","dojo/domReady!"],function(query){
    query(".box");
})

1.3 通标签名选择

//使用query选择DOM元素
require(["dojo/query","dojo/domReady!"],function(query){
    query("div");
})

1.4 多个选择器一起使用

//使用多个选择器时，选择器间用逗号分隔
require(["dojo/query","dojo/domReady!"],function(query){
    query("#box",".anotherbox");
})

2. 层次选择器

2.1 祖先和后代元素的关系

创建html标签

 <body class="tundra">
           <div id="one">
               <div class="mini"></div>
           </div>
           <div>

           </div>
    </body>

使用query选择器选择div元素

require(["dojo/query","dojo/domReady!"],function(query){
    query("body div").style("background","yellow");  //注意是祖先和后代的关系，body和div间使用空格
})

这时候会发现所有的div背景颜色都变成了黄色（yellow）。

2.2 父与子元素的关系

require(["dojo/query","dojo/domReady!"], function(query) {               query("body>div").style("background","yellow")  //注意是父元素和子元素的关系，body和div间使用'>'
});

这时候会发现只有body下的两个子元素div背景变黄，而class为mini的div没有改变。

2.3 根据相对位置选择元素

require(["dojo/query","dojo/domReady!"], function(query) {
    query("#one+div").style("background","yellow")
});    //注意是兄弟节点的关系，id为'one'的下一个兄弟节点，中间使用'+'

这时候会发现只有id为’one’的下一个兄弟节点背景变黄，而其它的的div没有改变。

3. 内容过滤选择器

创建html标签

 <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")
});

标签（空格分隔）： dojo/query选择器

基本选择器
层次选择器
内容过滤选择器
属性选择器
子元素过滤选择器
表单对象属性过滤选择器
表格选择器

query模块选择的是一个DOM数组（哪怕只有一个DOM元素也是数组）

1. 基本选择器

在html中定义标签

<div id='box' class='box'>
<div class='anotherbox'>

1.1 通过id选择

//使用query选择DOM元素
require(["dojo/query","dojo/domReady!"],function(query){
    query("#box");
})

1.2 通过class选择

//使用query选择DOM元素
require(["dojo/query","dojo/domReady!"],function(query){
    query(".box");
})

1.3 通标签名选择

//使用query选择DOM元素
require(["dojo/query","dojo/domReady!"],function(query){
    query("div");
})

1.4 多个选择器一起使用

//使用多个选择器时，选择器间用逗号分隔
require(["dojo/query","dojo/domReady!"],function(query){
    query("#box",".anotherbox");
})

2. 层次选择器

2.1 祖先和后代元素的关系

创建html标签

 <body class="tundra">
           <div id="one">
               <div class="mini"></div>
           </div>
           <div>

           </div>
    </body>

使用query选择器选择div元素

require(["dojo/query","dojo/domReady!"],function(query){
    query("body div").style("background","yellow");  //注意是祖先和后代的关系，body和div间使用空格
})

这时候会发现所有的div背景颜色都变成了黄色（yellow）。

2.2 父与子元素的关系

require(["dojo/query","dojo/domReady!"], function(query) {               query("body>div").style("background","yellow")  //注意是父元素和子元素的关系，body和div间使用'>'
});

这时候会发现只有body下的两个子元素div背景变黄，而class为mini的div没有改变。

2.3 根据相对位置选择元素

require(["dojo/query","dojo/domReady!"], function(query) {
    query("#one+div").style("background","yellow")
});    //注意是兄弟节点的关系，id为'one'的下一个兄弟节点，中间使用'+'

这时候会发现只有id为’one’的下一个兄弟节点背景变黄，而其它的的div没有改变。

3. 内容过滤选择器

创建html标签

 <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")
});

shiyangxu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫