querySelector、querySelectorAll和CSS3 Selectors一起来

最新推荐文章于 2023-11-29 08:47:53 发布

王豫翔

最新推荐文章于 2023-11-29 08:47:53 发布

阅读量7.2k

点赞数 2

分类专栏：前端技术文章标签： css input function button html jquery

本文链接：https://blog.csdn.net/shyleoking/article/details/7326370

版权

前端技术专栏收录该内容

15 篇文章 0 订阅

订阅专栏

从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>
</body>

添加一个简单的样式

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

加一个jQuery的脚本

<script src="js/jquery-1.7.1.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 = "";
                }
                );
                //本次匹配的元素加入样式
                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来辅助就可以了。

王豫翔

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
querySelector、querySelectorAll和CSS3 Selectors一起来

从IE9开始DOM开始支持支持CSS的选择器了，DOM提供了两个接口querySelector 得到一个DOMquerySelectorAll 得到一组DOM一个个的解释这些选择器也没有必要，我们结合前面的数组知识，写一段代码来说明。页面上有一组元素，然后会依据我们数组中的预订选择值选择相应元素，并将背景变红色，同时提示选择器的含义。这样的代码便于运行理解和扩展。html的结构部分
复制链接

扫一扫