jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作，在jQuery中，我们可以使用.parent()方法来获取元素的父级元素，本文将详细介绍jQuery父级相关的知识。
1、基本概念
在HTML文档中，元素之间存在父子关系，一个元素被称为另一个元素的子元素，而被包含的元素被称为父元素。<div>元素是<p>元素的父元素，<p>元素是<div>元素的子元素。
2、jQuery父级方法
在jQuery中，我们可以使用.parent()方法来获取元素的父级元素，该方法返回被选元素的直接父元素，如果被选元素没有父元素，则返回null。
语法：
$(selector).parent();
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Parent Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p class="child">这是一个段落。</p>
</div>
<script>
$(document).ready(function(){
$(".child").click(function(){
alert($(this).parent().text());
});
});
</script>
</body>
</html>
在这个示例中，我们为<p>元素添加了一个点击事件，当点击这个元素时，会弹出其父元素的文本内容，运行代码后，点击段落文本，会弹出“这是一个段落。”。
3、jQuery祖先方法
除了获取父级元素外，我们还可以使用.parents()方法来获取元素的祖先元素，该方法返回被选元素的所有祖先元素（包括根元素），如果被选元素没有祖先元素，则返回空的jQuery对象。
语法：
$(selector).parents();
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Parents Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p class="child">这是一个段落。</p>
</div>
<script>
$(document).ready(function(){
$(".child").click(function(){
alert($(this).parents().text());
});
});
</script>
</body>
</html>
在这个示例中，我们为<p>元素添加了一个点击事件，当点击这个元素时，会弹出其所有祖先元素的文本内容，运行代码后，点击段落文本，会弹出“这是一个段落。”及其祖先元素的内容。
4、jQuery祖先过滤方法
我们可能只想获取某个特定类型的祖先元素，这时，我们可以使用.parentsUntil()和.parentsUntil()方法来过滤祖先元素，这两个方法分别返回直到指定选择器匹配的元素或DOM树中的最后一个祖先元素的集合，如果没有找到匹配的元素，则返回空的jQuery对象。
语法：
$(selector).parentsUntil(filter); // 直到匹配filter的元素为止的祖先元素集合 $(selector).parentsUntil(selector); // 直到匹配selector的元素为止的祖先元素集合
示例：
<a href="#" class="ancestor">这是链接</a>
<div id="container">
<p class="child">这是一个段落。</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".child").click(function(){
alert($(this).parentsUntil("#container").text()); // 弹出到#container之前的所有祖先元素文本内容
alert($(this).parentsUntil("a").text()); // 弹出到第一个a标签之前的所有祖先元素文本内容
});
});
</script>
在这个示例中，我们为<p>元素添加了一个点击事件，当点击这个元素时，会弹出其直到#container和第一个a标签之前的祖先元素的文本内容，运行代码后，点击段落文本，会弹出相应的内容。