jQuery Find|极客教程

jQuery Find

在jQuery中，find() 方法用于查找匹配元素集合中的后代元素。这个方法在处理复杂的DOM结构时非常有用，可以帮助我们快速定位到需要操作的元素。

基本语法

find() 方法的基本语法如下：

$(selector).find(filter)

其中，selector 是要查找的元素，可以是任何有效的jQuery选择器；filter 是一个可选的过滤器，用于进一步筛选查找到的元素。

示例代码

示例1：查找所有后代元素

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

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

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

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child")方法查找了#parent元素下的所有后代元素，即类名为.child的元素。运行结果会输出一个包含所有后代元素的jQuery对象。

示例2：查找特定后代元素

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

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child special">Special Child</div>
</div>

<script>
(document).ready(function(){
  var specialChild =("#parent").find(".special");
  console.log(specialChild);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".special")方法查找了#parent元素下的特定后代元素，即类名为.special的元素。运行结果会输出一个包含特定后代元素的jQuery对象。

进阶用法

除了基本的用法外，find() 方法还可以与其他jQuery方法结合使用，实现更加灵活的操作。

示例3：查找后代元素中的子元素

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

<div id="parent">
  <div class="child">
    <span>Child 1</span>
  </div>
  <div class="child">
    <span>Child 2</span>
  </div>
</div>

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

</body>
</html>

Output:

jQuery Find

在这个示例中，我们首先通过find(".child")方法找到所有后代元素.child，然后再通过find("span")方法找到这些后代元素中的子元素span。运行结果会输出一个包含所有span元素的jQuery对象。

示例4：查找后代元素中的特定子元素

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

<div id="parent">
  <div class="child">
    <span>Child 1</span>
    <span class="special">Special Span</span>
  </div>
  <div class="child">
    <span>Child 2</span>
  </div>
</div>

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

</body>
</html>

Output:

jQuery Find

在这个示例中，我们首先通过find(".child")方法找到所有后代元素.child，然后再通过find(".special")方法找到这些后代元素中的特定子元素.special。运行结果会输出一个包含特定子元素的jQuery对象。

高级用法

除了基本和进阶用法外，find() 方法还可以结合其他jQuery选择器和方法，实现更加复杂的操作。

示例5：查找后代元素中包含指定文本的元素

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

<div id="parent">
  <div class="child">Geek-docs.com</div>
  <div class="child">Hello World</div>
</div>

<script>
(document).ready(function(){
  var containsText =("#parent").find(".child:contains('Geek-docs.com')");
  console.log(containsText);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:contains('Geek-docs.com')")方法找到所有后代元素.child中包含文本Geek-docs.com的元素。运行结果会输出一个包含指定文本的jQuery对象。

示例6：查找后代元素中的奇数位置元素

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

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<script>
(document).ready(function(){
  var oddElements =("#parent").find(".child:odd");
  console.log(oddElements);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:odd")方法找到所有后代元素.child中奇数位置的元素。运行结果会输出一个包含奇数位置元素的jQuery对象。

示例7：查找后代元素中的偶数位置元素

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

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<script>
(document).ready(function(){
  var evenElements =("#parent").find(".child:even");
  console.log(evenElements);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:even")方法找到所有后代元素.child中偶数位置的元素。运行结果会输出一个包含偶数位置元素的jQuery对象。

示例8：查找后代元素中的第一个元素

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

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<script>
(document).ready(function(){
  var firstElement =("#parent").find(".child:first");
  console.log(firstElement);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:first")方法找到所有后代元素.child中的第一个元素。运行结果会输出一个包含第一个元素的jQuery对象。

示例9：查找后代元素中的最后一个元素

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

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

<script>
(document).ready(function(){
  var lastElement =("#parent").find(".child:last");
  console.log(lastElement);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:last")方法找到所有后代元素.child中的最后一个元素。运行结果会输出一个包含最后一个元素的jQuery对象。

示例10：查找后代元素中的可见元素

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

<div id="parent">
  <div class="child" style="display:none;">Hidden Element</div>
  <div class="child">Visible Element</div>
</div>

<script>
(document).ready(function(){
  var visibleElements =("#parent").find(".child:visible");
  console.log(visibleElements);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:visible")方法找到所有后代元素.child中可见的元素。运行结果会输出一个包含可见元素的jQuery对象。

示例11：查找后代元素中的隐藏元素

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

<div id="parent">
  <div class="child" style="display:none;">Hidden Element</div>
  <div class="child">Visible Element</div>
</div>

<script>
(document).ready(function(){
  var hiddenElements =("#parent").find(".child:hidden");
  console.log(hiddenElements);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child:hidden")方法找到所有后代元素.child中隐藏的元素。运行结果会输出一个包含隐藏元素的jQuery对象。

示例12：查找后代元素中的具有指定属性的元素

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

<div id="parent">
  <div class="child" data-id="1">Element 1</div>
  <div class="child" data-id="2">Element 2</div>
  <div class="child">Element 3</div>
</div>

<script>
(document).ready(function(){
  var elementsWithAttr =("#parent").find(".child[data-id]");
  console.log(elementsWithAttr);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child[data-id]")方法找到所有后代元素.child中具有data-id属性的元素。运行结果会输出一个包含具有指定属性的元素的jQuery对象。

示例13：查找后代元素中的具有指定属性值的元素

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

<div id="parent">
  <div class="child" data-id="1">Element 1</div>
  <div class="child" data-id="2">Element 2</div>
  <div class="child">Element 3</div>
</div>

<script>
(document).ready(function(){
  var elementWithAttrValue =("#parent").find(".child[data-id='2']");
  console.log(elementWithAttrValue);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child[data-id='2']")方法找到所有后代元素.child中具有data-id属性值为2的元素。运行结果会输出一个包含具有指定属性值的元素的jQuery对象。

示例14：查找后代元素中的具有指定类名的元素

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

<div id="parent">
  <div class="child">Element 1</div>
  <div class="child special">Element 2</div>
  <div class="child">Element 3</div>
</div>

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

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child.special")方法找到所有后代元素.child中具有类名为special的元素。运行结果会输出一个包含具有指定类名的元素的jQuery对象。

示例15：查找后代元素中的具有指定属性和类名的元素

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

<div id="parent">
  <div class="child" data-id="1">Element 1</div>
  <div class="child special" data-id="2">Element 2</div>
  <div class="child">Element 3</div>
</div>

<script>
(document).ready(function(){
  var elementsWithAttrAndClass =("#parent").find(".child[data-id='2'].special");
  console.log(elementsWithAttrAndClass);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child[data-id='2'].special")方法找到所有后代元素.child中具有data-id属性值为2且类名为special的元素。运行结果会输出一个包含具有指定属性和类名的元素的jQuery对象。

示例16：查找后代元素中的具有指定属性或类名的元素

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

<div id="parent">
  <div class="child" data-id="1">Element 1</div>
  <div class="child special">Element 2</div>
  <div class="child">Element 3</div>
</div>

<script>
(document).ready(function(){
  var elementsWithAttrOrClass =("#parent").find(".child[data-id='1'], .child.special");
  console.log(elementsWithAttrOrClass);
});
</script>

</body>
</html>

Output:

jQuery Find

在这个示例中，我们通过find(".child[data-id='1'], .child.special")方法找到所有后代元素.child中具有data-id属性值为1或类名为special的元素。运行结果会输出一个包含具有指定属性或类名的元素的jQuery对象。

示例17：查找后代元素中的具有指定属性和不具有指定类名的元素

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

<div id="parent">
  <div class="child" data-id="1">Element 1</div>
  <div class="child special">Element 2</div>
  <div class="child">Element 3</div>
</div>

<script>
(document).ready(function(){
  var elementsWithAttrAndNotClass =("#parent").find(".child[data-id='1']:not(.special)");
  console.log(elementsWithAttrAndNotClass);
});
</script>

</body>
</html>