jQuery选择器--selector1,selector2,selectorN和ancestor descendant

时间：2022-04-09 01:40:19

    selector1,selector2,selectorN

概述

将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

参数

selector1 一个有效的选择器；selector2 另一个有效的选择器；selectorN  任意多个有效选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

        <title></title>

        <script>

            $(document).ready(function() {

                $("button").click(function() {

                    //selector1,selector2,selectorN选择器

                    $("#li,p,.main").css("color", "#0000FF");

                });

            });

        </script>

        <style>

            .main {

                color: #FF0000;

            }

        </style>

    </head>

    <body>

        <p>第一个段落。</p>

        <p>第二个段落。</p>

        <ol>

            <li id="li">Java</li>

            <li class="main">C#</li>

        </ol>

        <button>点击按钮</button>

    </body>

</html>

   ancestor descendant

概述

在给定的祖先元素下匹配所有的后代元素

参数

ancestor  任何有效选择器；descendant  用以匹配元素的选择器，并且它是第一个选择器的后代元素

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

        <title></title>

        <script>

            $(document).ready(function() {

                $("button").click(function() {

                    //ancestor descendant选择器

                    $("div p").css("color", "#0000FF");

                    $("div ol li[name='java']").css("color","#FF0000");

                });

            });

        </script>

    </head>

    <body>

        <div>

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ol>

                <li name="java">Java</li>

                <li>C#</li>

            </ol>

        </div>

        <button>点击按钮</button>

    </body>

</html>

相关文章