原文地址：jQuery 3教程(三)：jQuery集合

Introduction

jQuery選擇器選擇出來的結果很多時候是一個DOM元素集而非單個元素，jQuery可以靈活的訪問和修改DOM元素集，但是所謂的靈活是需要大量的函數的。
由于篇幅和排版問題，本文的demo只是示意用法，完整的用法還請參考在線文檔。

從DOM集合中選擇元素

get([index])

獲取DOM元素集中一個或者多個匹配元素，如：

var ret = $('h3').get(0);

index([element])

和get()相反，index()將獲取元素在元素集中的序號，如：

var ret = $('#content').index($('h3'));

將選取h3集合中的第一個元素。

first()

獲取DOM元素集中第一個元素，如：

var ret = $('h3').first();

或者

var ret = $('h3:first');

last()

獲取DOM元素集中最后一個元素，如：

var ret = $('h3').last();

或者

var ret = $('h3:last');

toArray()

將獲取的DOM元素集轉換成數組，如：

var ret = $('h3').toArray();

根據相對關系選擇元素

children([selector])

獲取DOM元素集中，符合選擇器條件的子元素集，如：

var ret = $('#context').children($('h3'));

parent([selector])

和children()相反，獲取DOM元素集中，符合選擇器條件的父元素集，如：

var ret = $('h3').parent($('#context'));

closest([selector])

獲取DOM元素集中，符合選擇器條件的第一個父/祖先元素，如：

var ret = $('#context').closest($('h3'));

contents()

獲取DOM元素集中的子元素，包含注釋和文本，如：

var ret = $('#context').contexts();

find([selector])

獲取DOM元素集中滿足選擇器條件的所有元素，如：

var ret = $('#context').find($('h3'));

next([selector])

獲取DOM元素集中，當前元素后面的滿足選擇器條件的下一個元素，如：

var ret = $('#context').next($('h3'));

prev([selector])

和next()相反，獲取DOM元素集中，當前元素前面的滿足選擇器條件的下一個元素，如：

var ret = $('#context').prev($('h3'));

nextAll([selector])

類似next()，獲取DOM元素集中，當前元素后面的滿足選擇器條件的所有元素，如：

var ret = $('#context').nextAll($('h3'));

prevAll([selector])

類似prev()，獲取DOM元素集中，當前元素前面的滿足選擇器條件的所有元素，如：

var ret = $('#context').prevAll($('h3'));

nextUntil([selector])

獲取DOM元素集中，直到遇到選擇器條件的元素之前的同輩元素，如：

var ret = $('#context').nextUntil($('h3'));

prevUntil([selector])

獲取DOM元素集中，直到遇到選擇器條件的元素之后的同輩元素，如：

var ret = $('#context').prevUntil($('h3'));

siblings([selector])

獲取DOM元素集中，滿足選擇器條件的所有兄弟元素，如：

var ret = $('#context').siblings($('h3'));

從next開始可能比較繞口，要真正理解其中的差別，需要在實際運用中加以理解。

Summary

本文簡要的列出了jQuery集合中篩選DOM元素的函數，列舉只是表明常用的函數的范圍，更多細節還請參考W3C的jQuery教程。

總結

以上是生活随笔為你收集整理的jQuery 3教程(三)：jQuery集合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。