新增的querySelector、querySelectorAll测试

从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口querySelector得到一个DOMquerySelectorAll得到一组DOM一个个的解释这些选择器也没有必要,我

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口

querySelector 得到一个DOM

querySelectorAll 得到一组DOM

一个个的解释这些选择器也没有必要,我们结合前面的数组知识,写一段代码来说明。页面上有一组元素,然后会依据我们数组中的预订选择值选择相应元素,并将背景变红色,同时提示选择器的含义。这样的代码便于运行理解和扩展。

html的结构部分

<body>  
    <div>  
        <input type="button" value="开始测试" />  
        <span></span><span></span>  
    </div>  
    <ol>  
        <li title="abc1">  
            <h2 title="abc">  
                Hello</h2>  
        </li>  
        <li title="abc2">  
            <input type="checkbox" checked="checked" />  
            <input type="checkbox" />  
            <input type="checkbox" />  
        </li>  
        <li title="abc3"></li>  
        <li title="abc4">  
            <ul>  
                <li title="41abc">  
                    <input type="text" readonly="true" />  
                    <input type="text" />  
                </li>  
                <li title="42abc">  
                    <input type="button" value="disabled" disabled="disabled" />  
                </li>  
                <li title="43abc4"></li>  
                <li title="44abc4">  
                    <input type="radio" checked="checked" />  
                    <input type="radio" />  
                    <input type="radio" checked="checked" />  
                </li>  
            </ul>  
        </li>  
        <li title="abc5"></li>  
        <li title="abc6"></li>  
        <li title="abc7"></li>  
        <li title="abc8"><a href="#">go</a></li>  
        <li title="abc9"></li>  
    </ol>  
    <p>  
        text</p>  
<a href="http://hovertree.com/">何问起</a>
</body>  

添加一个简单的样式

<style>  
    .box  
    {  
        background-color: Red;  
    }  
</style>  
<!-- hovertree.com -->

加一个jQuery的脚本

<script src=“http://down.hovertree.com/jquery/jquery-1.12.3.min.js” type=“text/javascript”></script

然后就是我们的测试代码了

<script type="text/javascript">  
  
    var tip = ["指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于",  
            "html部分", "元素内容为空白", "",  
            "子元素", "兄弟元素", "第一个", "最后一个元素", "第2个", "倒数第2个",  
            "奇数", "偶数", "类型一致的奇数", "类型一致的偶数",  
            "从第3个算起,   每隔2个(包含第2个)", "只有一个子元素",  
            "可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态", "不包含"  
            ];  
  
    var selectors = ["ol",  
                    "[title*=abc]", "[title^=abc]", "[title$=abc]", "[title=abc]",  
                    ":root",  
                    ":empty",  
                    ":target",  
                    "ol li",  
                    "ol~p",  
                    "ol li:first-child", "ol li:last-child", "ol li:nth-child(2)", "ol li:nth-last-child(2)",  
                    "ol li:nth-child(odd)", "ol li:nth-child(even)", "ol li:nth-of-type(odd)", "ol li:nth-of-type(even)",  
                    "li:nth-child(2n+3)",  
                    "ol li:only-child",  
                    ":enabled", ":disabled", ":read-only", ":read-write",  
                    ":default", ":checked", ":indeterminate",  
                    "ol li:not(:first-child)"  
                    ];  
  
  
    $(  
    function() {  
        $(":button").click(  
        function() {  
            selectors.forEach(  
            function(item, index) {  
                //把上次有box样式的元素清空下  
                Array.prototype.slice.call(document.querySelectorAll(".box")).forEach(  
                function(e, i) {  
                    e.className = "";  
                }  
                );  
                //本次匹配的元素加入样式   hovertree.com
                Array.prototype.slice.call(document.querySelectorAll(item)).forEach(  
                function(e, i) {  
                    e.className = "box";  
                }  
                );  
                $("span:eq(0)").html(item);  
                $("span:eq(1)").html(tip[index]);  
                alert("next");  
            }  
            );  
        }  
        );  
    }  
    );  
</script>  

我们准备了两个数组,一个存放选择器,一个存放选择器的说明。对selectors数组多forEach便利,根据选择器对元素进行添加样式,以可以看到样式结果。

 

需要说明下的是

document.querySelectorAll(“.box”)得到的不是数组,是nodelist,虽然可以类似数组的for,但真的不是数组,不能直接对其使用数组的方法forEach,如果我们需要转换为数组,我们可以用Array.prototype.slice.call来辅助就可以了。

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120608.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python 文件描述符是什么_python程序设计第三版课后答案

    python 文件描述符是什么_python程序设计第三版课后答案【案例讲解】Python为什么要使用描述符?

  • IT项目团队管理

    IT项目团队管理漫谈IT项目团队管理心得如果在软件项目实施中选出最难解决的几个问题,那么管理问题一定名列前茅。在管理问题中,团队管理又是其中的难点。一个项目管理的好坏,很大程度就体现在团队的建设和管理上。团队管理涉及到管理学、心理学和哲学等诸多方面内容,具体实施起来还容易产生许多误区,因此,对项目主管的综合素质要求颇高。笔者进入项目管理领域的时间尚短,最近读了一些书籍,结合自己的一些经验,汇成一些心得体会,愿…

  • BoundsChecker使用说明(代码调试)

    目录….1一、BoundsChecker简介….2二、安装环境….2三、BoundsChecker两种工作模式….3      3.1ActiveCheck..3      3.2FinalCheck..3四、特性和优点….5五、检测示例….65.1内存泄漏检测示例….65.2野指针检测示

  • win10 硬盘图标变成空白解决办法是什么_新电脑如何分区硬盘win10

    win10 硬盘图标变成空白解决办法是什么_新电脑如何分区硬盘win10Win10硬盘图标变成空白解决办法如图,有时候会出现这种硬盘图标变成空白的情况,虽然不影响使用,但强迫症表示真的很难受,这里给出解决办法:按下组合键WIN+R,输入regedit再按回车运行,这时候会有一个提示,选择“是”。一层一层找到计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\DriveIcons\这个路径,或者也可以直接在上方地址栏输入,注意我这里路径最开始显示的是计

    2022年10月18日
  • docker修改mysql密码_mysql重新设置密码

    docker修改mysql密码_mysql重新设置密码进入容器dockerexec-it{容器ID}/bin/bash调整MySQL配置文件,设置跳过权限控制:echo”skip-grant-tables”>>/etc/mysql/conf.d/docker.cnf警告:这就意味着任何用户都能登录进来,并进行任何操作,相当不安全。退出容器:exit重启容器:dockerrestart{容器ID}再次进入容器:dockerexec-it{容器ID}/bin/bash登录mysql(无需密码):my.

    2022年10月15日
  • 算法思想

    算法思想算法思想

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号