选择器的区别

最新推荐文章于 2023-09-20 23:59:46 发布

。未来可期。

最新推荐文章于 2023-09-20 23:59:46 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/qq_26515367/article/details/53425460

版权

$("form input")表示返回的是form标签元素下的子代数组集合

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("span  p").css("background-color","red");
    })

    </script>  
</head>  
<body> 
<p>ddddd</p>
<span>ss <p>ddd</p> </span> 
<span>ss <h1><p>ddd</p></h1> </span> 
<div>  
    <span>1234656</span>  
    <span>1234656</span>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
  
</div>  

<span>123465164
<p>fffff</p>
</span>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
<div>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
</div>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
</body>  
</html>

$("span ~ p")表示选择的是通用兄弟元素选择器

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>通用兄弟元素选择器</title>  
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("span ~ p").css("background-color","red");
    })

    </script>  
</head>  
<body> 
<p>ddddd</p>
<span>ss <p>ddd</p> </span> 
<span>ss <h1><p>ddd</p></h1> </span> 
<div>  
    <span>1234656</span>  
    <span>1234656</span>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
  
</div>  

<span>123465164
<p>fffff</p>
</span>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
<div>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
    <p>今天的bug，还没找到原因！</p>  
</div>  
<p>今天的bug，还没找到原因！</p>  
<p>今天的bug，还没找到原因！</p>  
</body>  
</html>