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

来源：互联网发布：window phone10软件编辑：程序博客网时间：2024/05/21 19:49

<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元素，不包含孙子元素

0 0