Cheerio 中常用的选择器有哪些？如何高效使用选择器？ - 面试题

Cheerio 支持几乎所有 jQuery 的选择器语法，这使得熟悉 jQuery 的开发者可以快速上手。以下是 Cheerio 中常用的选择器类型：

1. 基本选择器

javascript
// 元素选择器
$('div')
$('p')
$('a')

// ID 选择器
$('#header')
$('#main-content')

// 类选择器
$('.container')
$('.active')

// 多重选择器
$('div, p, a')
$('.class1, .class2')

2. 层级选择器

javascript
// 后代选择器
$('div p')          // div 内的所有 p 元素
$('.container a')   // .container 内的所有 a 元素

// 子元素选择器
$('ul > li')        // ul 的直接子元素 li

// 相邻兄弟选择器
$('h2 + p')         // 紧跟在 h2 后的 p 元素

// 通用兄弟选择器
$('h2 ~ p')         // h2 之后的所有兄弟 p 元素

3. 属性选择器

javascript
// 存在属性
$('[href]')
$('[data-id]')

// 属性值匹配
$('[class="active"]')
$('[href="https://example.com"]')

// 属性值包含
$('[class*="btn"]')      // class 包含 "btn"
$('[href*="/api/"]')

// 属性值开头
$('[class^="col-"]')     // class 以 "col-" 开头
$('[href^="https://"]')

// 属性值结尾
$('[src$=".jpg"]')       // src 以 ".jpg" 结尾
$('[href$=".html"]')

// 多属性选择器
$('a[href^="http"][target="_blank"]')

4. 伪类选择器

javascript
// 位置伪类
$('li:first')           // 第一个 li
$('li:last')            // 最后一个 li
$('li:even')            // 偶数位置的 li
$('li:odd')             // 奇数位置的 li
$('li:eq(2)')           // 第三个 li（从 0 开始）
$('li:gt(2)')           // 索引大于 2 的 li
$('li:lt(5)')           // 索引小于 5 的 li

// 内容伪类
$('p:contains("Hello")') // 包含 "Hello" 文本的 p
$('p:empty')            // 空的 p 元素
$('div:has(p)')         // 包含 p 的 div

// 表单伪类
$('input:checked')      // 选中的 checkbox/radio
$('input:disabled')     // 禁用的 input
$('input:enabled')      // 启用的 input
$('input:focus')        // 获得焦点的 input
$('option:selected')    // 选中的 option

5. 表单选择器

javascript
$(':text')              // 文本输入框
$(':password')          // 密码输入框
$(':radio')             // 单选按钮
$(':checkbox')          // 复选框
$(':submit')            // 提交按钮
$(':reset')             // 重置按钮
$(':button')            // 按钮
$(':file')              // 文件上传
$(':image')             // 图片按钮

6. 组合选择器示例

javascript
// 复杂选择器组合
$('.container > .row:first-child .col-md-4 a[href^="http"]')

// 多条件筛选
$('div.active[data-type="article"]:not(.hidden)')

// 嵌套选择
$('.content').find('p').filter('.highlight')

性能优化建议

使用具体的选择器：$('#content p') 比 $('p') 更快
避免过度使用通配符：$('*') 性能较差
缓存选择结果：重复使用时保存到变量
使用 find() 代替层级选择器：在某些情况下性能更好
限制搜索范围：先选择父元素再查找子元素

javascript
// 好的做法
const $content = $('#content');
const $paragraphs = $content.find('p');

// 避免
$('p').each(function() {
  if ($(this).parents('#content').length) {
    // 处理
  }
});