cheerio api

载入html

首选

 var cheerio = require('cheerio'),
    $ = cheerio.load(html);

将HTML作为字符串参数传入:

$ = require('cheerio');
$('ul', html);

或者作为根结点：

$ = require('cheerio');
$('li', 'ul', html);

selector

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

$('.apple')
// 选择器定位到class 为apple的目标
 
$('ul .pear')
// 选择器定位到 ul 中 class 为 pear 的目标
 
$('li[class=orange]')
// 选择器定位到 li 中 class 为arange的目标

attribute

get 和set

.attr(name[, value])

这个方法可以获取和设置属性，第二个参数是可选的。当第二个参数不存在时表示获取属性的值，当有带有第二个参数时，表示设置属性的值。如果设置一个属性的值设置为null ，则删除该属性。如下示例：

$('ul').attr('id')
//=> fruits
 
$('.apple').attr('id', 'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>

remove

.removeAttr(name)

通过 name 移除某一个属性，同时返回被移除的这个元素。如下示例


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

class操作

.hasClass(className)

判断某元素的 class 中是否包含 className 。如下示例：

$('.pear').hasClass('pear'); //=> true
 
$('apple').hasClass('fruit'); //=> false
 
$('li').hasClass('pear'); //=> true

.addClass(className)

给某元素添加一个名为 className 的样式名。如下示例：

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

.removeClass(className)

将某元素上名为 className 的样式名移除。如果不存在 className ，则移除所有的样式名。如下示例：

$('.pear').removeClass('pear').html();
//=> <li class="">Pear</li>
 
$('.apple').addClass('red').removeClass().html();
//=> <li class="">Apple</li>

添加 DOM

.after(content, [content, ...])

将 content 插入到某元素的后面，并作为其后面第一个兄弟节点。

$('.apple').after('<li class = "plum">Plum</li>');
$.html();
//=> <ul id = "fruits">
//     <li class = "apple">Apple</li>
//     <li class = "plum">Plum</li>
//     <li class = "orange">Orange</li>
//     <li class = "pear">Pear</li>
// </ul>
.before(content, [content, ...])

将 content 插入到某元素的前面，并作为其前面的第一个兄弟节点。

$('.apple').before('

Plum

');

$.html();
//=> <ul id = "fruits">
//     <li class = "plum">Plum</li>
//     <li class = "apple">Apple</li>
//     <li class = "orange">Orange</li>
//     <li class = "pear">Pear</li>
// </ul>

删除和替换

.remove([selector])

移除某一个节点以及他们的孩子节点。

$('.pear').remove();
$.html();
//=> <ul id = "fruits">
//     <li class = "apple">Apple</li>
//     <li class = "orange">Orange</li>
// </ul>

.replaceWith(content)

替换匹配的节点。

var plum = $('<li class = "plum">Plum</li>');
$('.pear').replaceWith(plum);
$.html();
//=> <ul id = "fruits">
//    <li class = "apple">Apple</li>
//    <li class = "orange">Orange</li>
//    <li class = "plum">Plum</li>
// </ul>

清空和获取 DOM

.empty()

清空一个节点，移除其所有的孩子节点。

$('ul').empty();
$.html();
//=> <ul id = "fruits"></ul>

.html([htmlString])

获取某节点的html字符串。如果传入参数，则设置该元素的html结构。

$('.orange').html(); //=> Orange
 
$('#fruits').html('<li class = "mango">Mango</li>').html();
//=> <li class="mango">Mango</li>
.text([textString])

获取某节点的纯文本。

$('.orange').text();
//=> Orange
 
$('ul').text();
//=>  Apple
//    Orange
//    Pear

find

cheerio 亦可以同jQuery那样，通过某一个元素来查找它的父元素、子元素、兄弟元素，并进行操作。

.find(selector)

在某元素下查询满足选择条件的元素。

$('#fruits').find('li').length; //=> 3

.parent()

获取某元素的父元素。

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

.next()

获取某元素的下一个兄弟元素。

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

.perv()

获取某元素的上一个兄弟元素。

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

过滤

.siblings()

获取某元素的所有同级元素。（当然除了它自己）

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

.children([selector])

获取某元素的孩子节点。可以传入参数在所有的孩子节点中进行筛选。

$('#fruits').children().length; //=> 3
 
$('#fruits').children('.pear').text(); //=> Pear

.filter(selector) & .filter(function(index))

在cheerio对象集合中进行条件筛选。

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

.first()

获取cheerio集合中的第一个cheerio对象。

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

.last()

获取cheerio集合中的最后一个cheerio对象。

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

.eq(i)

根据索引获取cheerio集合中的某一个对象。参数可以使负数，表示从尾部开始索引。

$('li').eq(0).text(); //=> Apple
 
$('li').eq(-1).text(); //=> Pear

遍历

.each(function(index, element){...})

和jquery类似的 each 迭代器，对每一个元素进行处理。

var fruits = [];

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

fruits.join(', '); //=> Apple, Orange, Pear

.map(function(index, element){...})

和jquery类似的 each 迭代器，对每一个元素进行处理并返回一个值。

$('li').map(function(i, el) {
    // this === el
    return $(this).attr('class');
}).get().join(', '); //=> apple, orange, pear

克隆和复制

.clone

对 cheerio 中的对象进行复制

var moreFruit = $('#fruits').clone();

$.root

当你需要和顶级DOM一起完成任务时，我们就用到了 $.root。如下：

$.root().append('<ul id="vegetables"></ul>').html();
 
//=> <ul id="fruits">...</ul><ul id="vegetables"></ul>
$.contains(container, contained)

检查 container 中是否包含 contained 元素。注意，container和contained 参数都应当是DOM元素：

var c1 = $("#fruits")[0];
var c2 = $(".pear")[0];
var ret = $.contains(c1, c2); 
console.log(ret); // => true