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

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

收藏内容 (0) (0)

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

<!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选择器-多层选择器

测试账号

热门博客

最新博客

Jquery选择器-多层选择器