向下遍历 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. InvokeMember 使用(转http://blog.csdn.net/gooer/article/details/2927113)

    函数原型:       public   object   InvokeMember(string,   BindingFlags,   Binder,   object,   object[]); ...

  2. Kafka Connect简介

    Kafka Connect简介 http://colobu.com/2016/02/24/kafka-connect/#more Kafka 0.9+增加了一个新的特性Kafka Connect,可以 ...

  3. oracle 在列名后的 (+)是什么意思,如何转换为mysql

    外连接的意思select *from a,bwhere a.id=b.id(+)意思就是返回a,b中匹配的行 和 a中有但是b中没有的行. 参考https://www.cnblogs.com/Aaro ...

  4. aop 打印请求信息

    项目中使用 AOP 打印请求信息,打印响应信息.package com.example.aspect; import com.alibaba.fastjson.JSON;import com.goog ...

  5. Ambari调整日志级别:How to enable debug logging in Ambari Server and Ambari Agent ?

    PURPOSE When troubleshooting Ambari issues, it may be necessary to enable debug logging in the Ambar ...

  6. 1、C#多线程基础理论

    系统为应用程序分配所需的内存以及其他资源,内存和资源的物理分离叫做进程.   进程是以线程为单位竞争CPU,那么什么是线程呢? 线程可看成一个可执行的指令单元,他使用进程中的数据,包含若干条指令,进程 ...

  7. C# vb .net实现透视图效果滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的透视图效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一 ...

  8. 浮动IP地址(Float IP)与 ARP欺骗技术

    浮动IP地址: 一个网卡是可以添加多个IP的. 就是多个主机工作在 同一个集群中,即两台主机以上.每台机器除了自己的实IP外,会设置一个浮动IP,浮动IP与主机的服务(HTTP服务/邮箱服务)绑在一起 ...

  9. ImportError: cannot import name Namespace

    运行socketServer报错. 解决: pip uninstall python-socketio pip install python-socketio

  10. Django模板语言的学习

    1.模板系统 1.语法 1.变量相关 {{ name}} ,{{ name|length}}, {{ name |default:"默认值"}} 2.逻辑相关 1.if判断 {% ...