JQuery遍历

已于 2023-03-10 18:30:06 修改
阅读量319 收藏
点赞数
分类专栏： jquery 文章标签： css3 前端 css
于 2023-03-10 18:28:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x2306402025/article/details/129444657
版权

目录

一、祖先

1.1 parent()

1.2 parents()

1.3 parentsUntil()

二、后代

2.1 children()

2.2 find()

三、同胞

3.1 siblings()

3.2 next()

3.3 nextAll()

3.4 nextUntil()

四、过滤

4.1 first()

4.2 last()

4.3 eq()

4.4 filter()

4.5 not()

一、祖先

向上遍历dom树

1.1 parent()

该方法返回被选元素的直接父元素。

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

1.2 parents()

该方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

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

也可以使用可选参数来过滤对祖先元素的搜索。这里使用类型选择器进行选取，选取类型为<ul>无序列表的元素。

$(document).ready(function(){
  $("span").parents("ul");
});

1.3 parentsUntil()

该方法返回介于两个给定元素之间的所有祖先元素。 下面是两个满足类型选择器的元素之间的祖先元素。

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

二、后代

向下遍历dom树

2.1 children()

该方法返回被选元素的所有直接子元素

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

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

<script>
    $(document).ready(function(){
    //下面两种方式都可以
      $("div").children("p.1");
      $("div").children(".2");
    });
</script>

...
<div class="descendants">div (当前元素) 
  <p class="1&#
最低0.47元/天 解锁文章
x2306402025
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动终端编程2020实训作业JQuery编程部分答案
LC_Bicycler
12-11 4123
实训作业中的判题系统是根据右侧目录中的.py文件判断对错，有时候书写格式不一样，答案也会判错。为了不用再去猜测判题方式，减少不必要的时间浪费，这里粘贴了部分题目答案，仅供参考。 ps：有的题目右侧有一个文件夹，可以直接看.py文件，因此不再重复。
jQuery 遍历- 过滤
li514006030的博客
12-13 1142
jQuery 遍历- 过滤
jQuery——遍历DOM元素的后代元素
Andone_hsx的博客
12-12 4082
任务描述 本关任务：用 jQuery 向下遍历 DOM 节点。效果如下： 相关知识 为了完成本关任务，你需要掌握：1.children()，2. find()。 向下遍历DOM节点 基本的html结构如下（CSS已省略）： &lt;div&gt;div (当前元素) &lt;p&gt;p (儿子元素) &lt;span&gt;span(孙子元素)&lt;/span&gt; ...
022-jQuery遍历-过滤
weixin_43404791的博客
01-26 1149
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> </style> <script>
23. jQuery 遍历 - 过滤
enlyhua的专栏
09-02 469
缩写搜索元素的范围 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。 其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。jQuery first() 方法 first() 方法返回被选元素的首个元素。 下面的例子选取首个 < div> 元素内部的第一个 < p> 元素：
jQuery遍历Form示例代码
10-26
总之，jQuery遍历Form是Web开发中常见的需求，通过jQuery提供的API，我们可以轻松地获取、遍历和修改表单数据，从而实现更灵活的交互和动态更新。理解并掌握这一技巧，对于提升前端开发效率至关重要。
jquery遍历select元素(实例讲解)
12-12
本篇文章提供一款jquery遍历select教程代码，主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次，这样所有的select就给查询了一次。 代码如下:[removed][removed]...
jQuery 遍历 – 祖先
12-13
在jQuery库中，遍历DOM树是常见的操作，特别是当你需要查找或操作元素的祖先时。"祖先"在这个上下文中指的是元素的父级、父级的父级，以及更高级别的上级元素，直至文档的根节点`<html>`。jQuery提供了几个方便的...
jQuery 遍历map()方法详解
01-19
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。 二、语法 .map(callback(index,domElement)) 三、详细说明 由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以...
jQuery 遍历函数详解
10-23
介绍了几个在jQuery中非常有用的遍历函数，遍历函数是做么的方便。当在它们一起使用时，它们将更加强大。也就是说，一个函数的输出是另一个函数的输入，它们是链式的。下面我们就来详细探讨下吧。
jquery遍历筛选数组的几种方法和遍历解析json对象
12-09
jquery grep()筛选遍历数组 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filterarray){ alert(filterarray[key]); } } ); jquery each()筛选
jQuery 下部分--头歌（educoder)实训作业题目及答案
最新发布
qq_69173578的博客
04-24 2229
jQuery动画
JQuery遍历后代元素
CodeTerminator的博客
03-12 863
JQuery遍历后代元素向下遍历dom树1.children()2.find()实例：&lt;script&gt; $(function(){ $(function(){ $(".btn1").click(function(){ $("div").children("p.p1").css({"color":"red","border":&quot
jquery(遍历-dom节点)
愿世界和平
05-21 1006
dom元素的父元素向上遍历dom树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() parents() parentsUntil()================== jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 元素的的直接父元素： 实例
jquery之DOM操作（一）
The_upside_of_down的博客
10-11 1708
一般来说，DOM操作分为：DOM core（核心）、HTML-DOM和CSS-DOM。 1、DOM Core DOM Core并不专属于javascript，任何一种支持dom操作的程序都可以使用它。 利用DOM Core来获取表单对象的方法： document.getElementsByTagName("form"); 2、HTML-DOM 它主要是提供一些更简明的符号来描述各种ht...
jQuery基础入门
weixin_46051426的博客
02-15 537
1.jQuery概述 1.1 JavaScript库 library，是一个封装好的特定的集合，是一个JS文件 常见的JS库 jQuery Prototype YUI Dojo Ext JS zepto 1.2 jQuery概念 jQuery是一个快速，简洁的JavaScript库，倡导写更少的代码，做更多的事情 jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互 1.3 jQuery优点 轻量级，不影响页面加载速度 跨浏览器兼容，基本兼容了现在主流的浏
jQuery测试题及答案
热门推荐
huyao的博客
07-26 1万+
一、单选:         1, var obj1 = { a: 'bb', b: 'cc' };var obj2 = { a: 'dd', c: 'ee' };var obj = $.extend(true, obj1, obj2); 则obj = _ __;           Obj1 = ___; obj2 = ___答案 ( C );         正确答案:A;       ...
jQuery 遍历祖先元素
weixin_44432032的博客
12-30 228
//parent() 方法返回被选元素的直接父元素。 $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); //parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。 $(document).ready(function(){ $("span").parents().css({"color":"
jQuery 遍历
Wzc0720的博客
09-19 1173
jQuery 遍历
jQuery 遍历表格
05-19
可以使用 jQuery 的遍历方法来遍历表格。下面是一个使用 jQuery 遍历表格的示例代码： ```html 名称 价格 商品1 $100 商品2 $200 <script src="https://code.jquery....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值