载入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