📌  相关文章
📜  jQuery | find() 与示例(1)

📅  最后修改于: 2023-12-03 15:32:12.225000             🧑  作者: Mango

jQuery | find() 与示例

介绍

find() 方法是 jQuery 的一个筛选器，它用于在指定元素的后代元素中查找符合条件的元素。通过这个方法可以使得查找和筛选元素变得十分方便，并且可以大幅简化代码量。

语法
$(selector).find(childSelector)
  • selector：用于指定要查找的元素的选择器，可以是任何有效的 jQuery 选择器。
  • childSelector：用于指定要查找的后代元素的选择器，也可以是任何有效的 jQuery 选择器。
示例

假设我们有一个 HTML 页面，其中包含两个 div 元素，分别有不同的 class 名称，并且这两个 div 元素中再分别包含一个 p 元素。现在我们想要选中第一个 div 中的 p 元素，可以这样做：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery find() 示例</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="parent">
		<p>Hello World!</p>
	</div>
	<div class="child">
		<p>你好，世界！</p>
	</div>
	<script>
		var firstP = $('.parent').find('p');
		console.log(firstP.text());
	</script>
</body>
</html>

在上面的代码中，我们使用了 .parent 元素的选择器来指定要查找的元素，而 .find() 方法中的选择器则指定了要查找的后代元素。运行这个代码，我们将会得到一个控制台输出 ‘Hello World!’。这说明我们成功地选中了第一个 div 中的 p 元素。

其他示例

我们还可以使用更加复杂的选择器来查找元素。例如，以上面的 HTML 代码为例，我们想要选中所有包含文字 ‘世界’ 的 p 元素，可以这样做：

var worldPs = $('div').find('p:contains("世界")');
worldPs.css('color', 'red');

运行这个代码片段之后，我们就会发现第二个 div 中的 p 元素的文字颜色变成了红色。

结语

通过这篇文章，我们了解到了 jQuery 的 find() 方法以及如何使用它来查找、筛选元素。在实际开发中，我们可以根据需要使用不同的选择器，灵活使用这个方法来提高开发效率。