选择器和筛选器

• 选择器和筛选器就是用来帮我们获取 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')