jQuery 3教程(三)：jQuery集合

原文地址：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教程。