通常情況下,選擇器可以直接定位到我們想要的元素,但是,當我們拿到一個jQuery對象后,還可以以這個對象為基準,進行查找和過濾
最常見的查找是在某個節點的所有子節點中查找,使用find()方法,它本身又接受一個任意的選擇器,例如如下的HTML結構:
<ul class='lang'>
<li class='js dy'>JavaScript</li>
<li class='dy'>Python</li>
<li id='swift'>Swift</li>
<li class='dy'>Scheme</li>
<li name='haskell'>Haskell</li>
</ul>
用find()查找:
var ul = $('ul.lang');//獲取ul
var dy = ul.find('.dy');// 獲得JavaScript, Python, Scheme
var swf = ul.find('#swift');// 獲得Swift
var hsk = ul.find('[name=haskell]');// 獲得Haskell
如果要從當前節點往上找使用parent();
var = swf = $('#swift');
var = parent = swf.parent();// 獲得Swift的上層節點<ul>
var a = swf.parent('div.red');// 從Swift的父節點開始向上查找，直到找到某個符合條件的節點并返回
對于位于同一級的節點,可以通過next()和prev()方法例如:
當我們已經拿到swift節點后
var swift = $('#swift');
swift.next();//Scheme
swift.next('[name=haskell]');// Haskell，因為Haskell是后續第一個符合選擇器條件的節點
swift.prev();// Python
swift.prev('.js');// JavaScript，因為JavaScript是往前第一個符合選擇器條件的節點
過濾
和函數式編程的map,filter類似,jQuery對象也有類似的方法
filter()方法可以過濾到不符合條件的節點
var langs = $('ul.lang li');// 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy');// 拿到JavaScript, Python, Scheme
或者傳入一個函數,要特別注意函數內部的this被綁定為DOM對象,不是jQuery對象
var langs = $('ul.lang li');
langs.filter(function () {
return this.innertHTML.indexOf('S') === 0;
});// 拿到Swift, Scheme
map()方法把一個jQuery對象包含的若干DOM節點轉化為其他對象:
var langs = $('ul.lang li');// 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function(){
return this.innertHTML;
}).get();// 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
一個jQuery對象如果包含了不止一個DOM節點，first()、last()和slice()方法可以返回一個新的jQuery對象，把不需要的DOM節點去掉：
var = langs = $('ul.lang li');// 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first();// JavaScript，相當于$('ul.lang li:first-child')
vas haskerll = langs.last();// Haskell, 相當于$('ul.lang li:last-child')
var sub = langs.slice(2,4);// Swift, Scheme, 參數和數組的slice()方法一致
