jQuery层次选择器
<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 9:45-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery层次选择器</title>
</head>
<body>
<p></p>
<div id="father">
<div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
<div>
<b>1</b>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<p></p>
</div>
<div></div>
<p></p>
<p></p>
<p></p>
<span>sss1</span>
</div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//需求1:获取id为father这个元素的所有子div.
// console.log($('#father > div'));
//需求2:获取id为father这个元素的所有子div以及所有子p.
// console.log($('#father > div, p'));
// console.log($('#father > div, #father > p'));
//需求3:获取id为father这个div的所有后代div.
// console.log($('#father div'));
//需求4:获取id为father这个div的所有后代div,以及id为father这个div的所有后代span.
// console.log($('#father div, #father div span')); // 错误, 显示9个
console.log($('#father div, #father span')); // 显示 10个
/**
* jQuery层级选择器
* 子代选择器: $('ul > li')
* 藕带选择器: $('ul li'); // 包括孙子
*/
});
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律