zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    抽卡 状压DP+期望DP+系数递推
    20190903考试反思
    20190823考试反思
    约瑟夫类问题研究
    树位DP
    20190823考试反思
    20190820考试反思
    20190818考试反思
    20190817考试反思
    PowerBuilder--Aes128加解密
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10053354.html
Copyright © 2011-2022 走看看