選擇器和篩選器

• 選擇器和篩選器就是用來幫我們獲取 DOM 元素的

選擇器

• jQuery有著相當強大的選擇器

// 按照 id 獲取頁面中的元素
const ele = jQuery('#box') 
const ele = $('#box')

• 上面兩個都可以按照 id 來獲取元素

// 按照類名來選擇
const eles = jQuery('.a')
const eles = $('.a')

• 上面就是按照類名來選擇元素，可以獲取到一組元素

const lis = jQuery('li')
const lis = $('li')

• 上面就是按照標籤名來獲取元素，可以獲取到一組元素

const eles = jQuery('ul > li')
const eles = $('ul > li')

• 上面就是按照選擇器來獲取元素，可以獲取到一組元素

特殊選擇器

• 直接找到第一個

$('li:first') // 找到所有 li 中的第一個

• 直接找到最後一個

$('li:last') // 找到所有 li 中的最後一個

• 直接找到第幾個

$('li:eq(3)') // 找到所有 li 中索引為 3 的那個

• 找到所有奇數個

$('li:odd') // 找到所有 li 中索引為 奇數 的

• 找到所有偶數

$('li:even') // 找到所有 li 中索引為 偶數 的
 

篩選器

• jQuery 的篩選器就是在選擇器選擇到一組元素以後
• 對元素進行篩選，也可以對準確的某一個元素進行判斷和獲取

1. 找到所有元素中的第一個
   $('li').first()
2. 找到所有元素中的最後一個
   $('li').last()
3. 找到某一個元素的下一個兄弟元素
   $('li:eq(3)').next()
4. 找到某一個元素的上一個兄弟元素
   $('li:eq(3)').prev()
5. 找到某一個元素的後面的所有兄弟元素
   $('li:eq(3)').nextAll()
6. 找到某一個元素的前面的所有兄弟元素
   $('li:eq(3)').prevAll()
7. 找到某一個元素的父元素
   $('li:eq(3)').parent()
8. 找到某一個元素的所有結構父級，一直到 html
   $('li:eq(3)').parents()
9. 找到一組元素中的某一個

// 在 li 的所有父級裡面找到所有 body 標籤
$('li').parents().find('body')
​
// 找到 div 標籤下所有後代元素中所有類名為 box 的元素
$('div').find('.box')