jq选择器 $("#myDiv>p") 和 $("#myDiv p")的区别

最新推荐文章于 2021-04-26 19:58:56 发布

原创最新推荐文章于 2021-04-26 19:58:56 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例详细解析了JQuery中两种不同的选择器用法：$("#myDiv>p") 和 $("#myDivp")。前者仅选择ID为myDiv的元素直接子级中的p元素；后者则选择ID为myDiv的所有后代p元素，包括任意层级的子元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery测试</title>

    <style type="text/css">
        .p1 {
            background: yellow;
        }
        .p2 {
            background: red;
        }
        .p3{
            background: #888;
        }
        .myPCss{
            font-size:36px;
        }
    </style>
    <script language="javascript" src="jquery-1.11.1.min.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        $(document).ready(function(){
            //$("p").addClass("p1");
            //$("p").removeClass("p1");
            //$("#myP").addClass("p2");
            //$(".myPCss").addClass("p3");
            //$("#myDiv p").addClass("p3");
            $("#myDiv>p").addClass("p3");
            //$("div+p").addClass("p3");
            //$("div~p").addClass("p3");
            var aP = document.getElementById("myP");
            //$(aP).addClass("p2");
        });

    </script>
</head>
<body>

<p>快购利众网1</p>
<p id="myP">快购利众网2</p>
<p class="myPCss">快购利众网3</p>
<div id="myDiv">
       <div id="myDivInner">
           <p>快购利众网4</p>
       </div>
       <div id="myDivTemp">
       </div>
       <p>快购利众网5</p>
       <p>快购利众网6</p>
   </div>

   <p>快购利众网7</p>

</body>

代码如下，将$("#myDiv>p")　和$("#myDiv p")依次注释，对比效果

$("#myDiv p") 是选择id=“myDIv”下的所有后代元素元素，包括子元素的子元素

$("#myDiv>p")只选择id=“myDiv”的子元素中的P元素，不包含孙子元素