向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

  • children()
  • find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素:

实例

$(document).ready(function(){
$("div").children();
});

您也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素(子元素中的P),并且它们是 <div> 的直接子元素:

$(document).ready(function(){
$("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素:

$(document).ready(function(){
$("div").find("span");
});

下面的例子返回 <div> 的所有后代:

$(document).ready(function(){
$("div").find("*");
});

children(),find()的更多相关文章

  1. Jquery-获取子元素children,find

    1.查找子元素方式1:> 例如:var aNods = $("ul > a");查找ul下的所有a标签 2.查找子元素方式2:children() 3.查找子元素方式3 ...

  2. JQuery包装集size,length,index,slice,find,filter,is,children,next,nextAll,parent,parents,closest,siblings,add,end,andSelf的用法

    在使用Jquery包装集的知识之前首先要注意三个概念(当前包装集.新包装集.包装集内部元素)的区别. <!DOCTYPE html> <html xmlns="http:/ ...

  3. 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

  4. 初探React,将我们的View标签化

    前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...

  5. JPA,EclipseLink 缓存机制学习(一) 树节点搜索问题引发的思考

    最近在项目在使用JPA+EclipseLink 的方式进行开发,其中EclipseLink使用版本为2.5.1.遇到一些缓存方面使用不当造成的问题,从本篇开始逐步学习EclipseLink的缓存机制. ...

  6. Qt and C++ Reflection,利用Qt简化C++的反射实现

    如何在C++中实现反射机制,应该算是C++开发中经常遇到的问题之一.C++程序没有完整的元数据,也就无法实现原生的反射机制.从性能的角度讲,这样的设计不难理解,毕竟在运行时储存这些元数据需要额外的开销 ...

  7. 【原创】解决鼠标经过子元素触发mouseout,mouseover事件的问题

    关键词:父子元素关系  mouseout  mouseover  事件  事件冒泡 初期代码: <!DOCTYPE html> <html> <head> < ...

  8. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  9. 【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充

    背景 平常写组件,经常遇到需要获取内容放入组件内部的情形. 实现方法 我们有两种实现方式 1. 自定义 props render 的时候通过获取 this.props.content 填充到组件内部 ...

随机推荐

  1. web基础---->script标签的特殊使用

    今天要讲的就是怎样使用<script>去请求一个servlet,加载一些js资源以及额外的逻辑处理: 目录: JS的引入的几种方式 在script的标签中引入Servlet 动态引入JS的 ...

  2. Datalogic 雕刻机

    选型需要考虑: 1. 材料 2. 材质 3. 内容 4. 范围 选择镜头 5. 厚度 6. 效率 7. 效果 脚本代码: // COM 串口设置 const N_COM = "COM2&qu ...

  3. charles 4.2.1 Ubuntu破解版安装

    charles 4.2.1 Ubuntu破解版安装 下载 charles-proxy-4.2.1_amd64.tar.gz 破解版 charles.jar 破解包 解压 sudo tar -zxvf ...

  4. Django框架(十二)-- 中间件、CSRF跨站请求伪造

    中间件 一.什么是中间件 请求的时候需要先经过中间件才能到达django后端(urls,views,templates,models) 响应的时候也需要经过中间件才能到达web服务网关接口 djang ...

  5. leetcode动态规划笔记二

    动态规划 题目分类 一维dp 矩阵型DP Unique Paths II : 矩阵型DP,求所有方法总数 Minimum Path Sum:矩阵型,求最大最小值 Triangle : 矩阵型,求最大最 ...

  6. SQL SERVER 查询所有表大小

    DECLARE @T TABLE ( [name] VARCHAR(max), [rows] INT, reserved VARCHAR(max), data_size VARCHAR(max), i ...

  7. virsh 添加虚拟交换机

    virsh 添加虚拟交换机 来源 https://blog.csdn.net/a1987463004/article/details/90905981 vim /etc/libvirt/qemu/ne ...

  8. python程序打包exe文件

    第一步:安装依赖 pip install pyinstaller 第二步:移动文件 把python文件和一个exe拿来当图标的ico文件移动到同一文件中 注意:文件路径不用用中文!!!!!!!! 第三 ...

  9. 30个关于Shell脚本的经典案例(上)

    对于初学者而言,因为没有实战经验,写不出来Shell脚本很正常,如果工作了几年的运维老年还是写不出来,那就是没主动找需求,缺乏练习,缺乏经验.针对以上问题,总结了30个生产环境中经典的Shell脚本, ...

  10. Java GC的工作原理详解

    JVM学习笔记之JVM内存管理和JVM垃圾回收的概念,JVM内存结构由堆.栈.本地方法栈.方法区等部分组成,另外JVM分别对新生代下载地址  和旧生代采用不同的垃圾回收机制. 首先来看一下JVM内存结 ...