当前博客:Jquery选择器-多层选择器

142 次浏览【转载需注明来源】

博客作者:【临界点】

个性签名:寒窗苦读十年一朝凤舞九天

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
  层次选择器
      后代选择器
           格式:父元素 指定元素 (空格隔开)
           示例:$("父元素 指定元素")
           选择父元素的所有指定元素(包含第一代,第二代等)
      子代选择器
            格式:父元素 > 知道元素(大于号隔开)
            示例:$("父元素 > 指定元素")
            选择父元素的所有第一代指定元素
      相邻选择器
            格式:元素 + 指定元素(加号隔开)
            示例:$("元素 + 指定元素")
            选择元素的下一个指定元素 (只会查找下一个元素,如果元素不存在,则获取不到)
      同辈选择权
            格式:元素 ~ 指定元素 (波浪号隔开)
            示例:$("元素 ~ 指定元素")
            选择元素的下面的所有指定元素
 -->
  <div id="parent">层次选择器
    <div id="child" class="testColor">父选择器
      <div class="gray">子选择器</div>
      <img src="http://www/baidu.com/img/bd_logo1.png" width="270" height="129" alt="">
      <img src="http://www/baidu.com/img/bd_logo1.png" width="270" height="129" alt="">
    </div>
    <div>选择器2
      <div>选择器2中的div</div>
    </div>
    <div>选择器3
      <div>选择器3中的div</div>
    </div>
  </div>
</body>

</html>
<script src="jquery-3.7.1.js"></script>
<script>
  /* 后代选择器 */
  var hd = $("#parent div")
  console.log(hd)
  /* 子代选择器 */
  var zd = $("#parent > div")
  console.log(zd)
  /* 相邻选择器 */
  var xl = $("#child + div") //这里结果是同级
  console.log(xl)
  /* 同辈选择器 */
  var tb = $("#child ~ div") //列出所有同级
  console.log(tb)
</script>

Jquery选择器-多层选择器