$('div p')、$('div>p')、$(div+span)的用法和区别

$('div p')、$('div>p')、$(div+span)的用法和区别

  • $(‘div p’):将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）
  • $(‘div>p’)将所有<div>标签的子标签<p>选中，不包括孙子辈标签。
  • $(div+span)将所有离<div>最近的<span>标签选中
    下面是这三个选择器的用法举例：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        .blue{color: blue;}
        .red{color: red;}
        .green{color: green;}
    </style>
    <script src="./jquery-3.1.0.min.js"></script>
    <script>
    $(document).ready(
      function(){
      $('div p').addClass('blue');
      $('div>p').addClass('red');
      $('div+span').addClass('green');
      }
    );
    </script>
    <title>jquery</title>
</head>
<body>
<div>
    <p>你好</p>
</div>
<span>事件</span>
<div>
    <span><p>时间</p></span>
</div>
<span>事件2</span>
</body>
</html>

运行结果：
运行结果

posted @ 2016-07-17 12:20  varyshare|李韬  阅读(725)  评论(0)  编辑  收藏  举报