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

    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>

猜你喜欢

转载自www.cnblogs.com/xianya/p/10039186.html