（7）Dojo学习之query选择器（上）

最新推荐文章于 2023-03-28 11:04:12 发布

GISer.Wang

最新推荐文章于 2023-03-28 11:04:12 发布

阅读量2.6k

点赞数 2

分类专栏： dojo学习文章标签： dojo

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54744183

版权

dojo学习专栏收录该内容

9 篇文章 5 订阅

订阅专栏

引言
基本选择器
层次选择器
内容过滤选择器
- 1 选择包含特定文本的DOM元素

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