zoukankan      html  css  js  c++  java
  • dojo 六 使用query dojo/query

    要使用query,就要引入dojo/query包。
    query可以根据Dom里节点的标签名、id名、class名来检索一个或多个节点。
    --------------------------------------------------------------------------------------------

    <ul id="list">
        <li class="odd">
            <div class="bold">
                <a class="odd">Odd</a>
            </div>
        </li>
        <li class="even">
            <div class="italic">
                <a class="even">Even</a>
            </div>
        </li>
        <li class="odd">
            <a class="odd">Odd</a>
        </li>
        <li class="even">
            <div class="bold">
                <a class="even">Even</a>
            </div>
        </li>
        <li class="odd">
            <div class="italic">
                <a class="odd">Odd</a>
            </div>
        </li>
        <li class="even">
            <a class="even">Even</a>
        </li>
    </ul>
     
    <ul id="list2">
        <li class="odd">Odd</li>
    </ul>
    --------------------------------------------------------
    var uls = query("ul");//检索到两个ul节点
    var list = query("#list")[0];//检索到一个id为list的节点
    var odds = query(".odd");//检索到七个class为odd的节点
    var oddLI = query("li.odd");//检索到四个li的class为odd的节点
    var allA = query("li a");//检索到六个li子节点为a的节点
    var someA = query("li > a");//检索到两个li第一个子节点为a的节点
    query方法中的字符串叫选择器,其规则同CSS相同,返回值为一个数组。

    forEach方法用来遍历数据元素。
    query(".odd").forEach(function(node, index, nodelist){
                //
            });
    在forEach的callBack方法里有三个参数,
    node指代当前元素,
    index指代当前元素在数组中的序列号,
    nodelist为query(".odd")返回的数据(可选),在某些情况下可能需要,如需要获取当前元素前一个元素时
    虽然通过id只会检索到一个节点,但query只以数组的形式返回,所以通过query("#list")[0]即可直接获取。

    如果需要对检索的全部元素做相同的处理,则不用通过forEach分别对每个元素进行操作,可直接对query(".odd")进行操作,如
    query(".odd").addClass("red");//对所有class名为odd的元素添加class red
    query(".odd").removeClass("red").addClass("blue");//对所有class名为odd的元素删除class red并添加class blue
    query(".even").style("color", "white").addClass("italic");//对所有class名为even的元素修改color样式为white,并添加class italic
    query(".hookUp").on("click", function(){
                alert("This button is hooked up!");
            });//对所有class名为hookUp的元素添加一个click响应事件
  • 相关阅读:
    Java开发最佳实践(一) ——《Java开发手册》之"编程规约"
    小程序websocket心跳库——websocket-heartbeat-miniprogram
    并发与多线程
    SqlSessionFactory、SqlSessionFactoryBean、SqlSession和SqlSessionTemplate的不解姻缘系列之一(总体阐述)
    全网最通俗易懂理清mybatis中SqlSession、SqlSessionTemplate、SessionFactory和SqlSessionFactoryBean之间的关系
    java代码之美(16) ---Java8 Optional
    Java基础——多线程
    代码简洁之道(判断篇)
    Spring Boot 入门
    Mybatis Plus入门
  • 原文地址:https://www.cnblogs.com/tiandi/p/3415899.html
Copyright © 2011-2022 走看看