JQuery入門（四）JQuery遍歷元素
阿新 • • 發佈：2018-11-24
前言
通過前面的瞭解，我們知道了基本的JQuery選擇器，本章學習JQuery的元素遍歷
方法
1.概念
我們瞭解了JQuery的選擇器的相關知識，也清楚了層級選擇器的概念，那麼如果說我們要找很深層的元素物件怎麼辦呢？那麼使用層級選擇器當然可以，但是我們為了更加友好的表達，通常使用相關的方法進行獲取。
本章講解的例項程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> </head> <body> <div> <form action="#" method="post" id="ff"> <h5>註冊資訊</h5> 使用者名稱：<input type="text" name="username" id="username" value="張三"/><span id="usernameSpan"></span><br/> 性 別：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/> 愛 好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳 <input type="checkbox" name="hobby" value="棋牌" />棋牌<span></span><br/> 畢業院校：<select name="school" id="school" class="sd"> <option value="--請選擇--">--請選擇--</option> <option value="清華大學">清華大學</option> <option value="北京大學">北京大學</option> <option value="挖掘機技術學院">挖掘機技術學院</option> </select><span></span><br/> 個人簡介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/> <input type="button" value="提交" onclick="sub();"/> <input type="reset" name="" id="" value="重置" /> </form> </div> </body> </html>
2.JQuery元素遍歷
1）查詢父元素
語法1：子元素物件.parent():該方法返回子元素的直接父元素的物件
語法2：子元素物件.parents()：該方法返回子元素的所有父元素
語法3：子元素物件.parents(元素)：該方法返回指定的父元素物件
例項：獲取h5標籤的父元素div
$(function(){
console.log($("h5").parents("div"));
});
2）查詢子元素
語法1：父元素物件.children() :該方法返回父元素物件的所有直接子元素
語法2：父元素物件.children(元素) :該方法返回父元素物件的指定直接子元素
語法3：父元素物件.find(元素)：該方法返回父元素的指定子元素物件
例項：獲取id為ff的元素下的id為school的元素物件
$(function(){
console.log($("#ff").find("#school"));
});
3）查詢兄弟元素
語法1：元素物件.next()：該方法返回元素物件緊挨著的下一個元素物件
語法2：元素物件.prev()：該方法返回元素物件緊挨著的上一個元素物件
例項：獲取h5標籤的下一個元素物件
$(function(){
console.log($("h5").next());
}); 
4）過濾指定元素
語法：元素物件集合.eq(index)：該方法返回元素集合中的指定下標的元素物件，index從0開始，類似於Java陣列下標
例項：遍歷id為ff的元素下所有input子標籤
$(function(){
var ch = $("#ff").find("input");
console.log(ch.length);
for (var i=0; i <ch.length; i++) {
console.log(ch.eq(i));
}
});
以上就是常用的JQuery遍歷的方法，可以適當的替代複雜的選擇器！
下面是其他方法以供參考
附錄：JQuery遍歷方法大全
| 方法 | 描述 |
|---|---|
| add() | 把元素新增到匹配元素的集合中 |
| addBack() | 把之前的元素集新增到當前集合中 |
| andSelf() | 在版本 1.8 中被廢棄。addBack() 的別名 |
| children() | 返回被選元素的所有直接子元素 |
| closest() | 返回被選元素的第一個祖先元素 |
| contents() | 返回被選元素的所有直接子元素（包含文字和註釋節點） |
| each() | 為每個匹配元素執行函式 |
| end() | 結束當前鏈中最近的一次篩選操作，並把匹配元素集合返回到前一次的狀態 |
| eq() | 返回帶有被選元素的指定索引號的元素 |
| filter() | 把匹配元素集合縮減為匹配選擇器或匹配函式返回值的新元素 |
| find() | 返回被選元素的後代元素 |
| first() | 返回被選元素的第一個元素 |
| has() | 返回擁有一個或多個元素在其內的所有元素 |
| is() | 根據選擇器/元素/jQuery 物件檢查匹配元素集合，如果存在至少一個匹配元素，則返回 true |
| last() | 返回被選元素的最後一個元素 |
| map() | 把當前匹配集合中的每個元素傳遞給函式，產生包含返回值的新 jQuery 物件 |
| next() | 返回被選元素的後一個同級元素 |
| nextAll() | 返回被選元素之後的所有同級元素 |
| nextUntil() | 返回介於兩個給定引數之間的每個元素之後的所有同級元素 |
| not() | 從匹配元素集合中移除元素 |
| offsetParent() | 返回第一個定位的父元素 |
| parent() | 返回被選元素的直接父元素 |
| parents() | 返回被選元素的所有祖先元素 |
| parentsUntil() | 返回介於兩個給定引數之間的所有祖先元素 |
| prev() | 返回被選元素的前一個同級元素 |
| prevAll() | 返回被選元素之前的所有同級元素 |
| prevUntil() | 返回介於兩個給定引數之間的每個元素之前的所有同級元素 |
| siblings() | 返回被選元素的所有同級元素 |
| slice() | 把匹配元素集合縮減為指定範圍的子集 |