jQuery获取父类|极客教程

jQuery获取父类

在网页开发过程中，经常会遇到需要获取元素的父类（上级元素）的情况。使用jQuery可以很方便地获取元素的父类，并进行进一步的操作。本文将详细介绍如何使用jQuery获取父类，以及常见的应用场景和示例代码。

一、jQuery父类选择器

在jQuery中，可以使用 parent() 方法来获取元素的直接父元素。该方法返回一个包含所有直接父元素的jQuery对象。下面是使用 parent() 方法获取父元素的示例代码：

$(selector).parent();

其中， selector 表示要获取父元素的元素选择器。

示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="parent">
  <div id="child">子元素</div>
</div>

<script>
 $(document).ready(function(){ var parentElement =$ ("#child").parent();
  console.log(parentElement);
});
</script>

</body>
</html>

运行结果：

[<div id="parent">…</div>]

在上面的示例中，我们通过 $("#child") 选择器选中了id为 “child” 的元素，然后使用 parent() 方法获取了该元素的父元素。最后，我们通过控制台打印出了父元素的jQuery对象。

二、jQuery父类选择器扩展方法

除了 parent() 方法，jQuery还提供了一些其他的父类选择器扩展方法，可以更灵活地获取元素的父类。

1. `parents()`

parents() 方法可以获取匹配元素的所有祖先元素，不仅包括直接父元素，还包括父元素的父元素、父元素的父元素的父元素，以此类推。该方法返回一个包含所有祖先元素的jQuery对象。

$(selector).parents();

示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="grandparent">
  <div id="parent">
    <div id="child">子元素</div>
  </div>
</div>

<script>
 $(document).ready(function(){ var parentElements =$ ("#child").parents();
  console.log(parentElements);
});
</script>

</body>
</html>

运行结果：

[<div id="parent">…</div>, <div id="grandparent">…</div>, <html>…</html>, document, Window]

在上面的示例中，我们使用 $("#child") 选择器选中了id为 “child” 的元素，然后使用 parents() 方法获取了该元素的所有祖先元素。最后，我们通过控制台打印出了所有祖先元素的jQuery对象。

2. `closest()`

closest() 方法可以获取匹配元素的最近的祖先元素，该祖先元素需要满足指定的选择器条件。该方法返回一个包含最近的祖先元素的jQuery对象。

$(selector).closest(filter);

其中， filter 是一个可选的选择器，用于筛选最近的祖先元素。

示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="grandparent">
  <div id="parent">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
  </div>
</div>

<script>
 $(document).ready(function(){ var closestElement =$ (".child").closest("#parent");
  console.log(closestElement);
});
</script>

</body>
</html>

运行结果：

[<div id="parent">…</div>]

在上面的示例中，我们使用 $(".child") 选择器选中了class为 “child” 的元素，然后使用 closest("#parent") 方法获取了该元素最近的id为 “parent” 的祖先元素。最后，我们通过控制台打印出了该祖先元素的jQuery对象。

三、常见应用场景

1. 切换样式

通过获取元素的父元素，可以实现点击元素切换样式的效果。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .active {
      background-color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

<script>
 $(document).ready(function(){$ ("li").click(function(){
     $(this).parent().find("li").removeClass("active");$ (this).addClass("active");
  });
});
</script>

</body>
</html>

在上面的示例中，我们给每个 li 元素添加了点击事件。当点击一个 li 元素时，会先将该元素的父元素下的所有 li 元素移除 active 类，然后再给点击的 li 元素添加 active 类。这样就可以实现点击元素切换样式的效果。

2. 树形结构的展开与折叠

通过获取元素的父元素，可以实现树形结构的展开与折叠功能。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .folder {
      font-weight: bold;
    }
    .file {
      margin-left: 20px;
    }
    .hidden {
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul>
  <li class="folder">Folder 1
    <ul>
      <li class="file">File 1-1</li>
      <li class="file">File 1-2</li>
    </ul>
  </li>
  <li class="folder">Folder 2
    <ul>
      <li class="file">File 2-1</li>
      <li class="file">File 2-2</li>
    </ul>
  </li>
</ul>

<script>
 $(document).ready(function(){$ (".folder").click(function(){
    $(this).children("ul").toggleClass("hidden");
  });
});
</script>

</body>
</html>

在上面的示例中，我们给每个文件夹（class为 “folder” 的元素）添加了点击事件。当点击一个文件夹时，会切换其子元素ul的显示与隐藏，从而实现文件夹的展开与折叠功能。