dojo中的query选择器

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

shiyangxu

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

阅读量797

点赞数

文章标签： 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
评论
dojo中的query选择器

dojo/dom模块中只能通过DOM的ID属性来选择DOM元素，这远远不能满足我们的要求。因此，dojo/query模块中提供了更多的选择方法。该模块中大致可分为7类选择器：基本选择器层次选择器内容过滤选择器属性选择器子元素过滤选择器表单对象属性过滤选择器表格选择器 query模块选择的是一个DOM数组（哪怕只有一个DOM元素也是数组）...
复制链接

扫一扫