Mrcdh技术博客
mrcdh
2021-03-18
目录

cheerio

为服务器特别定制的，快速、灵活、实施的jQuery核心实现。

# 安装

npm i cheerio
1

# 基本使用

var cheerio = require('cheerio'),
  $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>
1
2
3
4
5
6
7
8

文档会一直以下面的html片段作为例子：

<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>
1
2
3
4
5

# 加载

要使用cheerio就必须先加载Html文档。

首选方法：

var cheerio = require('cheerio'),
  $ = cheerio.load('<ul id="fruits">...</ul>');
1
2

# 选择器

# $( selector, [context], [root] )

selector 在 root 的范围内搜索 context。selector和context可以是一个字符串表达式，DOM元素，DOM元素的数组，或cheerio对象。root通常是HTML文档字符串。

这个选择器方法的出发点是遍历和操作文档。就像jQuery，它是选择文档中元素的主要方法，但不像jQuery它基于CSSSelect库来实现大部分的选择器。

$('.apple', '#fruits').text()
//=> Apple

$('ul .pear').attr('class')
//=> pear

$('li[class=orange]').html()
//=> Orange
1
2
3
4
5
6
7
8

# 属性

获取属性和修改属性的方法。

# .attr( name, value )

获取和修改属性

$('ul').attr('id')
//=> fruits

$('.apple').attr('id', 'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>
1
2
3
4
5

# .prop( name, value )

获取和设置属性的方法。获取唯一匹配集的第一元素的属性值。

$('input[type="checkbox"]').prop('checked')
//=> false

$('input[type="checkbox"]').prop('checked', true).val()
//=> ok
1
2
3
4
5

# .data( name, value )

获取和设置自定义数据。

$('<div data-apple-color="red"></div>').data()
//=> { appleColor: 'red' }

$('<div data-apple-color="red"></div>').data('apple-color')
//=> 'red'

var apple = $('.apple').data('kind', 'mac')
apple.data('kind')
//=> 'mac'
1
2
3
4
5
6
7
8
9

# .val( [value] )

获取和设置input, select, and textarea的值的方法。注：对于传递键值,函数的支持尚未实现。

$('input[type="text"]').val()
//=> input_text

$('input[type="text"]').val('test').html()
//=> <input type="text" value="test"/>
1
2
3
4
5

# .removeAttr( name )

通过name属性移除属性

$('.pear').removeAttr('class').html()
//=> <li>Pear</li>
1
2

# .hasClass( className )

检查任何一个匹配的元素中是否有className。

$('.pear').hasClass('pear')
//=> true

$('apple').hasClass('fruit')
//=> false

$('li').hasClass('pear')
//=> true
1
2
3
4
5
6
7
8

# .addClass( className )

在所有匹配的元素中添加类。也像jQuery函数一样接受函数。

$('.pear').addClass('fruit').html()
//=> <li class="pear fruit">Pear</li>

$('.apple').addClass('fruit red').html()
//=> <li class="apple fruit red">Apple</li>
1
2
3
4
5

# .removeClass( [className] )

从选定的元素中删除一个或多个空格分隔的class。如果removeClass函数的className是未定义的(即未传参数)，所有的class值会被删除。也像jQuery函数一样接受函数。

$('.pear').removeClass('pear').html()
//=> <li class="">Pear</li>

$('.apple').addClass('red').removeClass().html()
//=> <li class="">Apple</li>
1
2
3
4
5

# .toggleClass( className, [switch] )

从匹配的元素中添加或删除类，这取决于class的存在或切换参数的值。也像jQuery函数一样接受函数。

$('.apple.green').toggleClass('fruit green red').html()
//=> <li class="apple fruit red">Apple</li>

$('.apple.green').toggleClass('fruit green red', true).html()
//=> <li class="apple green fruit red">Apple</li>
1
2
3
4
5

# is()匹配判断

  • .is( selector | element | selection )
  • .is( function(index) ) 有任何元素匹配selector就返回true。如果使用判定函数，判定函数在选中的元素中执行，所以this指向当前的元素。

# .text( [textString] )

获取元素集合中的每个元素的合并文本内容，包括它们的后代。如果 textString 指定文本字符串，每个元素的内容被新的内容替换。

$('.orange').text()
//=> Orange

$('ul').text()
//=>  Apple
//    Orange
//    Pear
1
2
3
4
5
6
7

# .html( [htmlString] )

获取第一个选中元素的HTML内容字符串。如果htmlstring被指定，那么选中元素的内容被新内容所取代。

$('.orange').html()
//=> Orange

$('#fruits').html('<li class="mango">Mango</li>').html()
//=> <li class="mango">Mango</li>
1
2
3
4
5

# 筛选

# .find(selector | selection | node) 在此查找过滤

通过选择器、jQuery对象或元素来过滤，获取每个匹配元素的后代。

$('#fruits').find('li').length
//=> 3
$('#fruits').find($('.apple')).length
//=> 1
1
2
3
4

# .parent([selector])

获得每个匹配元素的parent,可选择性的通过selector筛选。

$('.pear').parent().attr('id')
//=> fruits
1
2

# .parents([selector])

获得通过选择器筛选匹配的元素的parent集合。

$('.orange').parents().length
// => 2
$('.orange').parents('#fruits').length
// => 1
1
2
3
4

# .parentsUntil([selector][,filter])

获取从匹配元素到其指定的祖先元素之间的所有节点（不包括那个指定的祖先元素）。

$('.orange').parentsUntil('#food').length
// => 1
1
2

# .closest(selector)

获得离他最近的祖先元素(可以包括他自己，但不包括其兄弟节点)。

$('.orange').closest()
// => []
$('.orange').closest('.apple')
// => []
$('.orange').closest('li')
// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')
// => [<ul id="fruits"> ... </ul>]
1
2
3
4
5
6
7
8

# .next([selector])

获取他的下一个兄弟节点。

$('.apple').next().hasClass('orange')
//=> true
1
2

# .nextAll([selector])

获取在他的后面的所有兄弟节点。

$('.apple').nextAll()
//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]
$('.apple').nextAll('.orange')
//=> [<li class="orange">Orange</li>]
1
2
3
4

# .nextUntil([selector], [filter])

获取从他本身到指定节点之间的所有节点(不包括他本身和指定节点)。

$('.apple').nextUntil('.pear')
//=> [<li class="orange">Orange</li>]
1
2

# .prev([selector])

获取选定元素的前一个兄弟节点，可以选择一个选择器筛选。

$('.orange').prev().hasClass('apple')
//=> true
1
2

# .prevAll([selector])

获取在指定元素的前面的所有兄弟节点。

$('.pear').prevAll()
//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]
$('.pear').prevAll('.orange')
//=> [<li class="orange">Orange</li>]
1
2
3
4

# .prevUntil([selector], [filter])

获得从他本身到指定节点之间的所有兄弟节点(不包括他本身和指定节点)。

$('.pear').prevUntil('.apple')
//=> [<li class="orange">Orange</li>]
1
2

# .slice( start, [end] )

获取指定范围匹配的元素

$('li').slice(1).eq(0).text()
//=> 'Orange'

$('li').slice(1, 2).length
//=> 1
1
2
3
4
5

# .siblings([selector])

获取选定元素的所有兄弟，不包括它自己(可以通过传入class改变筛选结果)。

$('.pear').siblings().length
//=> 2

$('.pear').siblings('.orange').length
//=> 1
1
2
3
4
5

# .children([selector])

获取选定元素的孩子元素。

$('#fruits').children().length
//=> 3

$('#fruits').children('.pear').text()
//=> Pear
1
2
3
4
5

# .contents()

获取匹配元素集合中的每个元素的孩子元素，包括文本和注释节点。

$('#fruits').contents().length
//=> 3
1
2

# .each( function(index, element) )

迭代一个cheerio对象，为每个匹配元素执行一个函数。当回调函数执行后，该函数所处的环境是DOM element，所以this指向当前元素，这相当于函数的参数element。要提前打破的each循环，那么返回false。

var fruits = [];

$('li').each(function(i, elem) {
  fruits[i] = $(this).text();
});

fruits.join(', ');
//=> Apple, Orange, Pear
1
2
3
4
5
6
7
8

# .map( function(index, element) )

通过每个在匹配函数产生的匹配集合中的匹配元素，产生一个新的包含返回值的cheerio对象。该函数可以返回一个单独的数据项或一组数据项被插入到所得到的集合中。如果返回一个数组，数组中的元素插入到集合中。如果函数返回空或未定义，则将插入任何元素。

$('li').map(function(i, el) {
  // this === el
  return $(this).text();
}).get().join(' ');
//=> "apple orange pear"
1
2
3
4
5

# filter() 获取通过条件的

  • .filter( selector | selection | element )
  • .filter( function(index) ) 遍历一个cheerio对象，降低通过选择器匹配的元素，或传递函数的测试的选择器元素组。

当一个cheerio的选择是特定的，只返回元素的选择。

当指定元素时，返回该元素（如果它包含在原始选择中）。

如果使用该函数方法，该函数将在选定的元素的环境中执行，所以this是指当前元素。

选择器:

$('li').filter('.orange').attr('class');
//=> orange
1
2

函数:

$('li').filter(function(i, el) {
  // this === el
  return $(this).attr('class') === 'orange';
}).attr('class')
//=> orange
1
2
3
4
5

# .not() 和 .filter 正好相反

  • .not( selector | selection | element )
  • .not( function(index, elem) ) 从匹配的元素集合中删除元素。给定一个jQuery对象表示一组DOM元素，.not() 方法从匹配的元素的子集构造了一种新的jQuery对象。所提供的选择器对每个元素进行了测试；结果中不匹配选择器的元素将被包含在该结果中。.not() 方法可以把一个函数作为参数就像.filter() 一样。将函数返回为真的元素从过滤的集合中排除，所有其他元素都包括在内。

选择器:

$('li').not('.apple').length;
//=> 2
1
2

函数:

$('li').not(function(i, el) {
  // this === el
  return $(this).attr('class') === 'orange';
}).length;
//=> 2
1
2
3
4
5

# .has( selector | element )

匹配一个拥有指定孩子元素的父元素。相当于.filter(':has(selector)')。

选择器:

$('ul').has('.pear').attr('id');
//=> fruits
1
2

元素:

$('ul').has($('.pear')[0]).attr('id');
//=> fruits
1
2

# .first()

选择一个cheerio的对象的第一个元素

$('#fruits').children().first().text()
//=> Apple
1
2

# .last()

选择一个cheerio对象的最后一个元素

$('#fruits').children().last().text()
//=> Pear
1
2

# .eq( i )

根据索引来确定元素。使用 .eq(-i) 的则是倒过来计数。

$('li').eq(0).text()
//=> Apple

$('li').eq(-1).text()
//=> Pear
1
2
3
4
5

# .get( [i] )

检索出匹配的cheerio对象的DOM元素。如果指定索引，检索出一个匹配的cheerio对象的元素：

$('li').get(0).tagName
//=> li
如果没有指定索引，检索出所有匹配的cheerio对象元素：

$('li').get().length
//=> 3
1
2
3
4
5
6

# .index( [selector | nodeOrSelection] )

在匹配元素中搜索给定元素索引值。

$('.pear').index()
//=> 2
$('.orange').index('li')
//=> 1
$('.apple').index($('#fruit, li'))
//=> 1
1
2
3
4
5
6

# .end()

结束当前链中最新的过滤操作，将匹配的元素集合返回到它的前一状态。

$('li').eq(0).end().length
//=> 3
1
2
#node
上次更新: 2023/09/22, 16:54:32
Node常见问题
request

← request→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
×