举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历_jquery

一、jQuery的向下遍历

<script src="../JS/Extend.js"></script>
 <script src="../JS/my.js"></script>
 <link type="text/css" rel="stylesheet" href="../CSS3/my.css">

</head>
<body>
<div id="div1">
 <div id="div2">
  <p id="p1">
   <a>hello world</a>
  </p>
 </div>
</div>

#div1{
 width:500px;
 height:200px;
 border:3px solid coral;
}

#div2{
 width:400px;
 height:150px;
 margin-top:10px;
 margin-left:10px;
 border: 3px solid coral;
}

#p1{
 margin-left:10px;
 margin-top:10px;
 width:150px;
 height:80px;
 border:3px solid coral;
}

1.children()方法的元素遍历

$(document).ready( function (){
 $("#div1").children().css({border:"3px solid black"});
});

可以看到此时div1的儿子div2的边框颜色变成了黑色。

2.find()方法的元素遍历

$(document).ready( function (){
 $("#div1").find("a").css({border:"3px solid grey"});
});

可以看到此时div1的重孙子a元素出现了灰色边框。、

.children()与.find()方法的区别是:children只能对元素的儿子元素进行修改,而find则可以对其所有的子元素进行修改。

二、jQuery的向上遍历
顾名思义,向上遍历就是从子集找到父集。

.parent()
$(document).ready( function (){
 $("#div2").parent().css({border:"3px solid black"});
 });

div2的父元素div1边框发生了改变

.parents()
$(document).ready( function (){
 $("a").parents().css({border:"3px solid grey"});
});

a元素除外,a元素的所有父级元素都发生了改变

.parentUntil()
$(document).ready( function (){
  $("a").parentsUntil("#div1").css({border:"3px solid grey"})
});

从a元素到div1元素之前的元素边框发生了改变。

三个方法的区别是,.parent()只能向上遍历一层;.parents()则可以指定父级元素的id进行跨越遍历;.parentUntil()则具有区间性质,将会遍历包含于区间中的所有元素。

三、遍历 - 同级(兄弟)
同级元素拥有相同的父级元素。

在 DOM 树中水平遍历。

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

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

1.JQuery siblings()

siblings() 方法返回被选元素的所有同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>
$(document).ready(function () {
 // 获取h1标签的所有同级元素
 var elem = $('h1').siblings();
 console.log(elem); // p p
});

2.JQuery next()

next() 方法返回被选元素的下一个同胞元素

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>
$(document).ready(function () {
 // 获取h1标签的下一个同级元素
 var elem = $('h1').next();
 console.log(elem); // p
});

3.JQuery nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
</section>
$(document).ready(function () {
 // 获取p标签的后面的所有同级元素
 var elem = $('p').nextAll();
 console.log(elem); // p
});

4.JQuery nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

<section>
 <h1>文章的<span>标题</span>啦</h1>
 <p>文章的内容内容内容内容内容内容</p>
 <p>结尾部分</p>
 <h2>重点注意</h2>
</section>
$(document).ready(function () {
 // 获取
 var elem = $('h1').nextUntil('h2');
 console.log(elem); // p p
});

5.JQuery prev() & prevAll() & prevUntil()

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, jquery
, js
, 遍历
dom
jquery遍历dom节点、js遍历dom树、dom遍历、js遍历dom、遍历dom节点,以便于您获取更多的相关知识。

时间: 2024-10-28 21:55:55

举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历_jquery的相关文章

jQuery操作DOM元素

原文:jQuery操作DOM元素 jQuery操作DOM元素 HTML DOM常见操作: 查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 关于节点的查找,是利用选择器完成的. 在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 首先看一个例子,用原生的JavaScript如何创建并添加元素: <!DOCTYPE html> <html> <head>

jQuery创建DOM元素实例解析_jquery

本文实例讲述了jQuery创建DOM元素的使用技巧.分享给大家供大家参考.具体分析如下: 利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 复制代码 代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript 复制代码

Jquery源码分析---构建Jquery的Dom元素

在jQuery.fn.init函数中,最终的结果是把Dom元素放到jQuery对象的集合, 我们可以传入单个Dom元素或Dom元素集合直接把其存到jQuery对象的集合.但是 如果第一个参数是string类型的话,如#id就要把Dom文档树去查找.对于html的 片断就得生成Dom元素.我们再进一步,传入的单个Dom元素或Dom元素集合参数 又是从那里来的?我们可以通过Dom元素的直接或间接的查找元素的方式. 这一部分首先分析如何从html的片断就得生成Dom元素,然后分析jQuery 是如何通

jQuery中dom元素上绑定的事件详解_jquery

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击"Event Listeners&quo

举例讲解JavaScript中将数组元素转换为字符串的方法_基础知识

首先来看一下从一个数组中选择元素的方法slice(): 源代码: <!DOCTYPE html> <html> <body> ​ <p id="demo">Click the button to extract the second and the third elements from the array.</p> ​ <button onclick="myFunction()">Try it

jQuery 创建Dom元素_jquery

代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb231

jQuery 创建Dom元素简单教程

$(fuction(){ }) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标_jquery

获取页面某一元素的绝对X,Y坐标,可以用offset()方法: 复制代码 代码如下: <span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span styl

jquery中dom操作和事件的实例学习 下拉框应用_jquery

今天这个demo是有关下拉框的. 复制代码 代码如下: <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2