jQuery parent() 方法用于查找给定选择器的直接父级元素。它是 jQuery 中的一个内置函数。此方法仅在 DOM 树中向上遍历一级，并返回所选元素的直接父级元素。

parent() 方法和 parents()方法的区别：

parent() 方法类似于 parents() 方法，因为它们都向上移动到 DOM 树并返回父元素。但不同的是，parents() 方法在 DOM 树中向上遍历多个层级并返回给定选择器的所有祖先，包括祖父母、曾祖父母等，而 parent() 方法向上遍历单个级别，并且只返回给定选择器的直接父级。

语法

$(selector).parent(filter)

filter：是可选参数，指定选择器表达式，用于缩小搜索范围。

例子

例1

获取h2的直接父元素

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  font-size: 20px;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").parent().css({ "font-size": "30px", "color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>
<body class = "main"> 
  <div> div
    <ul> ul 
      <h2>  h2
          <p>  p元素 </p>
      </h2>
    </ul>   
	</div>
<button onclick = "fun()"> 点击看看 </button>
  </body>
</html>

例2

通过filter筛选

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  font-size: 20px;
  border: 2px solid black;
  color: black; 
  padding: 5px;
  margin: 10px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun() {
$(document).ready(function(){
  $("p").parent(":first").css({"color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
<div> div1
  <div> div2
    <h2> h2
          <p>  p </p>
    </h2>   
	    <h2> h2
          <p> p </p>
    </h2>   
	</div>
</div>
<button onclick = "fun()"> 点击看看 </button>
</body>

</html>

例3

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  font-size: 20px;
  border: 2px solid black;
  color: black; 
  padding: 5px;
  margin: 10px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fun() {
$(document).ready(function(){
  $("p").parent("h2").css({"color": "blue", "border": "5px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
    <div> div1
    <div> div2 
          <p>  p </p>
    </div>   
	    <h2> h2
          <p> p </p>
    </h2>   
	<ul> ul
          <p>  p  </p>
    </ul>
  </div>
<button onclick = "fun()"> 点击看看 </button>
</body>

</html>