What are the commonly used selectors in Cheerio? How to use selectors efficiently?

Cheerio supports almost all jQuery selector syntax, making it easy for developers familiar with jQuery to get started. Here are the commonly used selector types in Cheerio:

1. Basic Selectors

javascript
// Element selector
$('div')
$('p')
$('a')

// ID selector
$('#header')
$('#main-content')

// Class selector
$('.container')
$('.active')

// Multiple selector
$('div, p, a')
$('.class1, .class2')

2. Hierarchy Selectors

javascript
// Descendant selector
$('div p')          // All p elements inside div
$('.container a')   // All a elements inside .container

// Child selector
$('ul > li')        // Direct child li elements of ul

// Adjacent sibling selector
$('h2 + p')         // p element immediately following h2

// General sibling selector
$('h2 ~ p')         // All sibling p elements after h2

3. Attribute Selectors

javascript
// Has attribute
$('[href]')
$('[data-id]')

// Attribute value match
$('[class="active"]')
$('[href="https://example.com"]')

// Attribute value contains
$('[class*="btn"]')      // class contains "btn"
$('[href*="/api/"]')

// Attribute value starts with
$('[class^="col-"]')     // class starts with "col-"
$('[href^="https://"]')

// Attribute value ends with
$('[src$=".jpg"]')       // src ends with ".jpg"
$('[href$=".html"]')

// Multiple attribute selector
$('a[href^="http"][target="_blank"]')

4. Pseudo-class Selectors

javascript
// Position pseudo-classes
$('li:first')           // First li
$('li:last')            // Last li
$('li:even')            // Even-positioned li
$('li:odd')             // Odd-positioned li
$('li:eq(2)')           // Third li (0-indexed)
$('li:gt(2)')           // li with index greater than 2
$('li:lt(5)')           // li with index less than 5

// Content pseudo-classes
$('p:contains("Hello")') // p containing "Hello" text
$('p:empty')            // Empty p element
$('div:has(p)')         // div containing p

// Form pseudo-classes
$('input:checked')      // Checked checkbox/radio
$('input:disabled')     // Disabled input
$('input:enabled')      // Enabled input
$('input:focus')        // Focused input
$('option:selected')    // Selected option

5. Form Selectors

javascript
$(':text')              // Text input
$(':password')          // Password input
$(':radio')             // Radio button
$(':checkbox')          // Checkbox
$(':submit')            // Submit button
$(':reset')             // Reset button
$(':button')            // Button
$(':file')              // File upload
$(':image')             // Image button

6. Combined Selector Examples

javascript
// Complex selector combination
$('.container > .row:first-child .col-md-4 a[href^="http"]')

// Multiple condition filtering
$('div.active[data-type="article"]:not(.hidden)')

// Nested selection
$('.content').find('p').filter('.highlight')

Performance Optimization Tips

1. Use specific selectors: $('#content p') is faster than $('p')
2. Avoid excessive use of wildcards: $('*') has poor performance
3. Cache selector results: Save to variable when reusing
4. Use find() instead of hierarchy selectors: Better performance in some cases
5. Limit search scope: Select parent element first, then find children

javascript
// Good practice
const $content = $('#content');
const $paragraphs = $content.find('p');

// Avoid
$('p').each(function() {
  if ($(this).parents('#content').length) {
    // Process
  }
});