这篇文章将为大家详细讲解有关jquery查找后代元素的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一： 查找后代元素三种方法
（1）children()；
（2）contents()；
（3）find()；
所谓的后代元素，就是某个元素的“子元素”、“孙元素”……。孙元素，在前端虽然没这个说法，但是却比较形象，所以这一节使用这一个说法。
二：jquery获取后代元素方法
1.children()方法
在jQuery中，我们可以使用children()方法来查找当前元素的“所有子元素”或“部分子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。
语法：children(expression)
说明：参数expression表示jQuery选择器表达式，用来过滤子元素。当参数省略时，则将选择所有的子元素。如果参数不省略，则表示选择符合条件的子元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper").hover(function () {
$(this).children(".test").css("color", "red");
}, function () {
$(this).children(".test").css("color", "black");
})
})
</script>
</head>
<body>
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
<hr />
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
</body>
</html>效果如下：
当我们鼠标移到第1个class为wrapper的div元素上时，在浏览器预览效果如下：
分析：$(this).children(".test")表示选择当前元素下class为test的“子元素”。在这里我们会发现，虽然也有class为test的“孙元素”，但是使用children()方法却不会将“孙元素”选中。
2.contents()方法
与children()方法相似，contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用，作为初学者我们可以直接忽略这个方法。
我记得在之前不少教程中，对于常见但不常用的一些知识，都会多少提及一下。很多热心的建议说，站长啊，既然这个知识用不到，浪费篇幅，干嘛提及呢？直接删除都行了。其实嘛，道理很简单：学习知识，知道“哪些不用深入学习”，跟“知道哪些需要深入学习”是同等重要的。一来为了方便读者理清思路，二来以后碰到这个知识了，也有那么点印象不至于手忙脚乱。
3.find()方法
find()方法和children()方法相似，都是用来查找所选元素的后代元素，但是find()方法能够查找所有后代元素，而children()方法仅能够查找子元素。
find()方法和children()方法使用频率差不多，同等重要。大家要认真掌握，并且认真区分。
语法：find(expression)
说明：参数expression表示jQuery选择器表达式，用来过滤子元素。当参数省略时，则将选择所有的子元素。如果参数不省略，则表示选择符合条件的子元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper").hover(function () {
$(this).find(".test").css("color", "red");
}, function () {
$(this).find(".test").css("color", "black");
})
})
</script>
</head>
<body>
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
<hr />
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
</body>
</html>默认情况下，在浏览器预览效果如下：
当我们鼠标移到第1个class为wrapper的div元素上时，在浏览器预览效果如下：
分析：$(this).find(".test")表示选择当前元素下的class为test的所有“后代元素”，既包括子元素，也包括孙元素等所有后代元素。大家将find()方法这个例子跟children()方法那个例子对比一下，就能很直观发现两者之间的不同。
与children()方法相似，contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用，作为初学者我们可以直接忽略这个方法。
关于jquery查找后代元素的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
