（8）Dojo学习之query选择器（中）

最新推荐文章于 2024-02-19 13:30:22 发布

GISer.Wang

最新推荐文章于 2024-02-19 13:30:22 发布

阅读量1.5k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/LoveCarpenter/article/details/54744460

版权

dojo学习专栏收录该内容

9 篇文章

订阅专栏

属性选择器
子元素过滤选择器

5.属性选择器

5.1 选择含有某种属性的标签

创建标签

<body class="tundra">
           <div class="mini" title="标题"></div>
           <div></div>
    </body>

选取含有属性title 的div元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    query("div[title]").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

5.2 选择属性为特定值的元素

创建标签

<body class="tundra">
           <div class="mini" title="test"></div>
           <div class="mini" title="aaa"></div>
           <div></div>
    </body>

选取属性title值等于“test”的div元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    query("div[title=test]").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

5.3 选择属性值以特定值开头

创建标签

    <div class="mini" title="test"></div>
           <div class="mini" title="aaa"></div>
           <div></div>

选取属性title值以“te”开始的div元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    query("div[title^=te]").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

5.4 选择属性值以特定值结尾

创建标签

<div class="mini" title="test"></div>
           <div class="mini" title="aaa"></div>
           <div></div>

选取属性title值以“est”结束的div元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    query("div[title$=est]").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

5.5选取属性值含有特定值的元素

创建标签

<body class="tundra">
           <div class="mini" title="test"></div>
           <div class="mini" title="aaa"></div>
           <div></div>
    </body>

选取属性title值含有“es”的div元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    query("div[title*=es]").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

5.6 属性选择器组合使用

创建标签

<div class="mini" title="test"></div>
           <div class="mini" title="aates"></div>
           <div></div>

组合属性选择器,首先选取有属性class的div元素，然后在结果中选取属性title值含有“es”的元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    query("div[class][title*=es]").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

6.子元素过滤选择器

6.1 指定子元素的位置索引

创建标签

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

选取每个class为one的div父元素下的第2个子元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    //注意：:nth-child(2)前面有一个空格
                    query("div[class=one] :nth-child(2)").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

6.2 获得首个子元素

创建标签

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

选取每个class为one的div父元素下的第一个子元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    //注意：first-child前面有一个空格
                    query("div[class=one] :first-child").style("background","yellow")
                });

运行结果（运行前和运行后）

这里写图片描述

6.3 获得尾部子元素

创建标签

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

选取每个class为one的div父元素下的最后一个子元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    //注意：:last-child前面有一个空格
                    query("div[class=one] :last-child").style("background","yellow")
                });

运行结果

这里写图片描述

6.4 获得唯一子元素

创建标签

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

如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.

require(["dojo/query","dojo/domReady!"], function(query) {
                    //注意：:only-child前面有一个空格
                    query("div[class=one] :only-child").style("background","yellow")
                });