博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 遍历
阅读量:6854 次
发布时间:2019-06-26

本文共 1704 字,大约阅读时间需要 5 分钟。

什么是遍历?

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

图示解释:

  • <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞(拥有相同的父元素)。
  • 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

提示:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

这些 jQuery 方法用于向上遍历 DOM 树:

  • parent()只会向上一级对 DOM 树进行遍历。
  • parents()返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
  • parentsUntil()

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:

实例

$(document).ready(function(){  $("span").parentsUntil("div");});复制代码

向下遍历 DOM 树

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

  • children()返回被选元素的所有直接子元素
  • find()返回被选元素的后代元素,一路向下直到最后一个后代

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

实例

$(document).ready(function(){  $("div").children("p.1");});复制代码

实例

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

$(document).ready(function(){  $("div").find("span");});复制代码

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

实例

$(document).ready(function(){  $("div").find("*");});复制代码

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历:

  • siblings()返回被选元素的所有同胞元素
  • next()返回被选元素的下一个同胞元素。
  • nextAll()返回被选元素的所有跟随的同胞元素
  • nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev()
  • prevAll()
  • prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

jQuery 遍历 - 过滤

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。下面的例子返回带有类名 "intro" 的所有 <p> 元素:

实例

$(document).ready(function(){  $("p").filter(".intro");});复制代码

not() 方法返回不匹配标准的所有元素。

提示:not() 方法与 filter() 相反。

转载于:https://juejin.im/post/5b2b6a55e51d4558c5392d7d

你可能感兴趣的文章
基于回归幅度的反转交易策略
查看>>
《萌萌守卫塔防》隐私政策
查看>>
容器(docker)中运行java需关注的几个小问题
查看>>
ipad安卓协议最新6.7.4
查看>>
浅谈Docker三两事
查看>>
想学习大数据?这才是完整的大数据学习体系
查看>>
解决多个VMware虚拟机运行慢的问题
查看>>
tkprof程序产生的格式化文件详解
查看>>
ftp下实现文件和mysql验证虚拟用户
查看>>
Android 五大布局
查看>>
mysql部署
查看>>
软件项目管理流程总结
查看>>
简单去桌面小箭头
查看>>
bash常用功能
查看>>
ARP表、MAC地址表、通信过程
查看>>
我的友情链接
查看>>
qt 信号与槽
查看>>
在Linux下安装tftp服务器NFS服务器以及Samba服务器
查看>>
systemd (简体中文)
查看>>
CentOS5.5部署zlib导致yum使用不了,报错Yum Segmentation Fault (core Dumped)
查看>>