jQuery 查找后代元素

通过jQuery children() 方法和jQuery find() 方法，我们可以向下遍历 DOM 树，查找后代元素。

（1） jQuery children() 方法：返回被选元素的所有直接子元素。

（2）jQuery find() 方法：返回被选元素的后代元素。

值得一提的是，我们可以对后代元素进行筛选。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.great-grandson {width: 50px;height: 50px;background-color: blueviolet;}.grandson {width: 100px;height: 100px;background-color: cornflowerblue;}.son {width: 150px;height: 150px;background-color: crimson;}.father {width: 200px;height: 200px;background-color: rgba(30, 201, 39, 0.767);}p {margin: 0;}</style><script src="jQuery.min.js"></script><script>$(document).ready(function(){console.log($(".father").children());console.log($(".father").children("p"));console.log($(".father").find("*"));console.log($(".father").find("div,li"));})</script>
</head>
<body><div class="father">自己<div class="son">儿子<ul class="grandson">孙子<li class="great-grandson">重孙子</li></ul></div><p>我是另一个直接子元素</p></div>
</body>
</html>

控制台输出：

（1）输出所有所有直接子元素：

            console.log($(".father").children());

（2）对直接子元素进行筛选：

            console.log($(".father").children("p"));

（3）输出所有后代元素：

            console.log($(".father").find("*"));

（4）输出后代元素进行筛选：

            console.log($(".father").find("div,li"));

jQuery 查找后代元素相关推荐

php 获取子孙,jquery如何查找后代元素？jquery获取后代元素方法
在上一篇我们讲到jquery获取父元素?相信你已经学会了,那么下面我们来讲一下jquery如何查找后代元素?jquery获取后代元素方法. 一: 查找后代元素三种方法 (1)children(): ( ...
jquery 查找祖先元素_如何获得jQuery中元素的第一个祖先
jquery 查找祖先元素 In this post, we will discuss about the traversal method to get the first ancestor of ...
jQuery查找子元素与后代元素
子元素: children()方法:返回返回被选元素的所有直接子元素. $().children('选择器') 如选择type为file的子元素 $(this).children("inpu ...
jQuery 查找父元素
function deletesec1Div5(obj){ $(obj).closest(".sec1-div5").remove();} 自己写的一段代码,实现了table中的全 ...
jQuery 查找方法
文章目录 jQuery 查找方法查找祖先元素 parent() parents() parentsUntil() 查找后代元素 children() find() contents() 向前查找兄弟 ...
jquery 后代元素_在jQuery中查找元素的所有后代
jquery 后代元素 In this post, we are going to discuss about an important jQuery traversing method to fin ...
jQuery 遍历 - 后代【后代是子、孙、曾孙等等。children()查找下一个子元素； find()查找所有后代】
jQuery 遍历 - 后代后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方 ...
jQuery常用的查找Dom元素方法
jQuery常用的查找Dom元素方法废话不多说,先来个总结,然后下面是demo 一. 同级节点之间的检索(检索深度N=0) next()是在兄弟节点中,往后匹配; prev()是在兄弟节点中,往前匹 ...
jQuery——遍历DOM元素的后代元素
任务描述本关任务:用 jQuery 向下遍历 DOM 节点.效果如下: 相关知识为了完成本关任务,你需要掌握:1.children(),2. find(). 向下遍历DOM节点基本的html结构 ...

jQuery 查找后代元素

jQuery 查找后代元素相关推荐

最新文章

热门文章