jQuery的DOM操作之遍历节点

最新推荐文章于 2024-05-17 03:32:17 发布
最新推荐文章于 2024-05-17 03:32:17 发布
阅读量426 收藏
点赞数

1. children()方法：

该方法用于取得匹配元素的子元素集合。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var $body=$("body").children();
		var $p=$("p").children();
		var $ul=$("ul").children();
		alert($body.length);
		alert($p.length);
		alert($ul.length);
		for(var i=0,len=$ul.length;i<len;i++){
			alert($ul[i].innerHTML);
		}
	});
</script>
</head>
<body>
<p></p>
<ul>
	<li>java</li>
	<li>python</li>
	<li>c++</li>
</ul>
</body>
</html>

2. next()方法：

该方法用于取得匹配元素后面紧邻的同辈元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var $p_next=$("p").next();
		alert($p_next.html());
	});
</script>
</head>
<body>
<p></p>
<ul>
	<li>java</li>
	<li>python</li>
	<li>c++</li>
</ul>
</body>
</html>

3. prev()方法：

该方法用于取得匹配元素前面紧邻的同辈元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var $ul_prev=$("ul").prev();
		alert($ul_prev.text());		
	});
</script>
</head>
<body>
<p>我是一个段落</p>
<ul>
	<li>java</li>
	<li>python</li>
	<li>c++</li>
</ul>
</body>
</html>

4. siblings()方法：

该方法用于取得匹配元素前后所有的同辈元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.c1{
	color:red;
	font-weight:bold
}
</style>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").click(function(){
			$("#d2").siblings().removeClass("c1");
		});
	});
</script>
</head>
<body>
<p class="c1">我是第一段</p>
<p class="c1" id="d2">我是第二段</p>
<p class="c1">我是第三段</p>
<input type="button" value="测试siblings()方法">
</body>
</html>
访问这个页面：

单击按钮后页面变为：

除此之外，jQuery还有很多遍历节点的方法，例如closest()，find()，filter()，nextAll()，prevAll()，parent()和parents()等


yw987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery DOM节点的遍历方法小结
10-19
本篇文章主要介绍了jQuery DOM节点的遍历方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQuery遍历DOM节点的方法
10-24
主要介绍了JQuery遍历DOM节点的方法,实例分析了jQuery遍历DOM节点的相关技巧,需要的朋友可以参考下
jquery(遍历-dom节点)
愿世界和平
05-21 1005
dom元素的父元素向上遍历dom树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() parents() parentsUntil()================== jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 元素的的直接父元素： 实例
jquery--DOM遍历
weixin_38091374的博客
02-08 300
jquery--DOM遍历:1、祖先1.1  parent（）----向上一级对DOM树遍历，返回被选元素的直接父元素1.2  parents（）----返回被选元素的所有祖先元素 1.3  parentsUntil（）---返回介于两个给定元素之间的所有祖父元素     eg： $("span ").parentsUntil("div"),返回介于span和div元素之间的所有祖先元素 2、后代...
前端提高篇(八十九)：jQuery的DOM的遍历操作（二）(1)
2401_84092778的博客
05-17 1049
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JQueryDOM和遍历
m0_73050509的博客
08-30 404
JQueryDOM的操作和遍历对象
3.2.11: jQuery的DOM操作之遍历节点
confirmAname的专栏
01-02 602
占地
jQuery之dom操作(遍历节点)
龙腾四海365的专栏
12-05 1046
jQuery之dom操作(遍历节点) children()/children(selector)  --  只考虑子元素，不考虑其他后代元素 next()/next(selector)  --  下一个兄弟节点 prev()/prev(selector)  --  上一个兄弟节点 siblings()/siblings(selector)   --  其他兄弟节点 find(se
jQuery遍历DOM节点操作之filter()方法详解
10-22
主要介绍了jQuery遍历DOM节点操作之filter()方法,结合实例形式详细分析了filter的功能及4种具体用法,需要的朋友可以参考下
jQuery遍历DOM元素与节点方法详解
10-22
在jQuery中，遍历DOM元素和节点是常见的任务，这有助于我们高效地查找、操作和管理页面上的元素。以下是对jQuery遍历DOM元素与节点方法的详细解释： **一、向上遍历（祖先元素）** 1. `$(selector).parent([filter...
jQuery 添加元素和删除元素
weixin_34221112的博客
09-07 120
jQuery - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 <script> $(function(){ $("#btn").click(function()...
jQuery DOM 遍历
紫罗兰的博客
07-05 440
children()//查找合集里面的子元素 $('.violet').children(':last'); find()$('.violet').find($('span')); //查找后代元素里的所有 span 元素 $('span', '.violet'); //此写法和上面的方式等价 parent()//查找合集里面的父元素 $('.violet').parent(':last');
jquery dom 遍历
sobigring的博客
12-12 72
1. 交替为表格行添加样式 $(document).ready(function() { $('tr:odd').addClass('odd'); /** odd is one class in css **/ $('tr:even').addClass('even'); /** The code can be rewrote as $('tr').filter...
jQuery遍历DOM
u012975706的专栏
01-21 1103
DOM是Docment Object Model的缩写，中文翻译为文档对象模型       jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。      1、用于向上遍历 DOM 树： parent()：          parent() 方法返回被选元素的直接
jQuery DOM元素的遍历
菜鸟记录
06-30 1156
⏹DOM元素的遍历
java dom遍历_jQuery DOM节点的遍历
weixin_35480412的博客
03-04 158
children()方法jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈，这里可以理解为就是父亲-儿子的关系)节点查找关系1代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div...
Jquery中的DOM操作 (八.遍历节点)
妖怪的博客
03-06 559
1.childrend()方法 该方法用于取得匹配元素的子元素集合. 2.next()方法 该方法用于取得匹配元素后面紧邻的同辈元素 3.prev()方法 该方法用于取得匹配元素前面紧邻的同辈元素 4.sliblings()方法 该方法用于取得匹配元素前后所有的同辈元素 5.parent() 获取集合中每个匹配元素的父级元素 6.parents() 获取集合中
jQuery DOM操作
Mr·小五
06-08 227
jQuery DOM操作概念: 1.DOM -&gt; 即文档对象模型(Document Object Model),简单来说,DOM给予了Web设计师和开发者一套标准的方法,让他们能够轻松获取操作网页中的数据,脚本和表现层对象.2.在实现DOM操作之前,必须要选择要操作的元素(使用jQuery强大的选择器)-&gt; 基本选择器 层次选择器 内容选择器 过滤选择器......DOM操作1、节点操...
JQuery学习笔记（三）DOM操作，JQuery遍历
asdasd1fdsyrt的博客
06-12 375
JQuery基础用法一、DOM操作（增删改查） 一、DOM操作（增删改查） 1、新增节点 $(selector).append(content) //在匹配元素内部最后面新增一个节点 $(content).appendTo(selector) //把新节点追加到匹配元素内部最后面 $(selector).prepend(content) //在匹配元素内部最前面新增一个节点 $(content).prependTo(selector) //把新节点追加到匹配元素内部最前面 $(selec
jquery遍历节点
最新发布
06-13
在jQuery中，遍历节点主要通过选择器（selectors）来选取HTML元素，并提供一系列的方法来操作这些元素。这里有几个常见的方法： 1. `$(selector)`：选择匹配指定CSS选择器的元素。 2. `.each(function(index, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值