節點存取的方法：1、children()，可存取被選元素的所有直接子元素；2、closest()，可存取被選元素的第一個祖先元素；3、find( )，可存取被選元素的後代元素；4、first()，存取被選元素的第一個元素；5、last()等。
本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。
jquery可對節點進行存取的方法
| 方法 |
描述 |
| add() |
把元素加入到符合元素的集合中 |
| 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() | 把符合元素集合縮減為指定範圍的子集 |
#其中，存取並查詢同級元素一般有七個方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()
siblings()方法，主要用於獲得指定元素的同級所有元素
#next()方法，主要用於獲得指定元素的下一個同級元素
nextAll()方法，主要用於獲得指定元素的下一個同級的所有元素
nextUntil()方法，主要用來取得指定元素的下一個同級元素，這個同級元素必須為指定元素與nextUntil()方法設定元素之間的元素
prev()方法，主要用於獲得指定元素的上一級同級元素
prevAll()方法，主要用於獲得指定元素上一級所有的同級元素
#prevUntil()方法，主要用來取得指定元素的上一個同級元素，這個同級元素必須為指定元素與prevUntil()方法設定元素之間的元素
範例：
siblings()方法
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>登入後複製
##next()方法
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
</body>
</html>
登入後複製
prev()方法#
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>登入後複製
存取並查詢子元素有兩種方法：find() 和children()- children()方法：取得該元素下的直接子集元素
##find()方法：取得該元素下的所有（包含子集的子集）子集元素<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*background-color: pink;*/
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class="no1">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined
// $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
</script>
</html>登入後複製
此時我們再把find 這項開啟註解
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*background-color: pink;*/
}
</style>
</head>
<body>
<div>
<span>11</span>
<span>
<ul>
<li class="no1">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</span>
<span>222</span>
<ul>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
// console.log($("div").children(".no1")[0]);
$("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
console.log($("div").find(".no1")[0]);
</script>
</html>登入後複製
對應截圖：
【推薦學習：
jQuery影片教學、web前端】
以上是jquery有哪些節點存取的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
