舉例講解jQuery對DOM元素的向上遍曆、向下遍曆和水平遍曆，jquerydom

最後更新：2016-07-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、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 樹中沿著同胞元素向後遍曆，而不是向前）。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More