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>
  • 相关阅读:
    rocketmq详解
    rocketmq的windows版客户端的启动步骤
    postman提交数组格式方式
    关于springmvc的包含list提交的格式
    数据库字段和实体类和map中对应类型
    怎么连接两个数据库和怎么停止上一个线程
    IDEA 创建类是自动添加注释和创建方法时快速添加注释
    centOs7 安装mysql8
    CentOS7安装Nginx及配置
    windows安装mysql8详解
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10053354.html
Copyright © 2011-2022 走看看