• jQuery筛选--find(expr|obj|ele)和siblings([expr])


       find(expr|obj|ele)

    概述

        搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

    参数

    • expr  用于查找的表达式
    • jQuery object   一个用于匹配元素的jQuery对象
    • element  一个DOM元素
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
            <script type="text/javascript">
                $(function(){
                    $("#btn").click(function(){
                        //搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
                        $("#firstdiv").find("p").css("color","#FF0000");
                    });
                });
            </script>
        </head>
        <body>
            <div id="firstdiv">
                <p>第一个段落。</p>
                <div>
                    <p>第二个段落。</p>
                    <div>
                        <p>第三个段落。</p>
                    </div>
                </div>
            </div>
            <button id="btn">点击</button>
        </body>
    </html>

       siblings([expr])

    概述

        取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

    参数

        expr  用于筛选同辈元素的表达式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
            <script type="text/javascript">
                $(function(){
                    $("#btn").click(function(){                    
                        $("#seconddiv").siblings().css("color","#FF0000");
                        
                        $("#seconddiv").siblings("p").css("font-weight","bold");
                    });
                });
            </script>
        </head>
        <body>
            <div id="firstdiv">
                <p>第一个段落。</p>
                <div id="seconddiv">
                    <p>第二个段落。</p>
                    <div>
                        <p>第三个段落。</p>
                    </div>
                </div>
                <div>
                    <p>第四个段落。</p>
                </div>
            </div>
            <button id="btn">点击</button>
        </body>
    </html>
  • 相关阅读:
    jquery ajax 后台响应成功,返回正确json但不执行success方法,执行error的问题
    bootstrap轮播组件,大屏幕图片居中效果
    mouseover和mouseout事件在鼠标经过子元素时也会触发
    vertical-align的深入学习
    小技巧
    css字体大小设置em与rem的区别
    子元素的margin-top影响父元素原因和解决办法
    JavaScript随机打乱数组
    JavaScript 获取当月天数
    javaScript 的option触发事件
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10106963.html
Copyright © 2020-2023  润新知