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>
  • 相关阅读:
    php内存管理机制与垃圾回收机制
    PHP Laravel5实现的RBAC权限管理操作示例
    PHP实现微信企业付款到个人零钱步骤
    ThinkPHP 6.0 管道模式与中间件的实现分析
    深入讲解 Laravel 的 IoC 服务容器
    ThinkPHP6 核心分析:系统服务
    PHP 性能优化
    PHP 7.4 新语法:箭头函数
    深入理解 PHP 的 7 个预定义接口
    Java实现 LeetCode 795 区间子数组个数 (暴力分析)
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10053354.html
Copyright © 2011-2022 走看看