向下遍历 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. Linux内核中的双向链表struct list_head

    一.双向链表list_head Linux内核驱动开发会经常用到Linux内核中经典的双向链表list_head,以及它的拓展接口和宏定义:list_add.list_add_tail.list_de ...

  2. Openresty 健康检查

    ## 指定共享内存 lua_shared_dict healthcheck 1m; ## 在worker初始化过程中,启动定时器,进行后端结点的检查 init_worker_by_lua_block ...

  3. Content-type"是"application/json的作用

    request中发送json数据用post方式发送Content-type用application/json;charset=utf-8方式发送的话,直接用springMVC的@RequestBody ...

  4. K8s-yaml的使用及命令

    YAML配置文件管理对象 对象管理: # 创建deployment资源 kubectl create -f nginx-deployment.yaml # 查看deployment kubectl g ...

  5. zookeeper+kafka集群的安装

    时效性要求很高的数据,库存,采取的是数据库+缓存双写的技术方案,也解决了双写的一致性的问题 缓存数据生产服务,监听一个消息队列,然后数据源服务(商品信息管理服务)发生了数据变更之后,就将数据变更的消息 ...

  6. NEST 自定义分析器

    public void SetAnalysis() { if (!client.IndexExists("employee").Exists) { client.CreateInd ...

  7. K-匿名算法研究

    12月的最后几天,研究了下k匿名算法,在这里总结下. 提出背景 Internet 技术.大容量存储技术的迅猛发 展以及数据共享范围的逐步扩大,数据的自动采集 和发布越来越频繁,信息共享较以前来得更为容 ...

  8. Elasticsearch 主要监控指标 -- 描述了es监控的几个维度,相当不错!

    转发自:https://blog.csdn.net/majianxiong_lzu/article/details/90437559 主要指标梳理 Cluster Health – Nodes and ...

  9. Java知识回顾 (12) package

    本资料来自于runoob,略有修改. 为了更好地组织类,Java 提供了包机制,用于区别类名的命名空间. Java 使用包(package)这种机制是为了防止命名冲突,访问控制,提供搜索和定位类(cl ...

  10. vue+element 按钮来回切换

    需求很简单,实现很容易,日常记录一下 templace代码: data数据声明: me'thods方法: