这篇参考手册是对cheerio 官方文档的中文翻译

cheerio是jquery核心功能的一个快速灵活而又简洁的实现,主要是为了用在服务器端需要对DOM进行操作的地方

简介

 

让你在服务器端和html愉快的玩耍

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>

安装

npm install cheerio

  

特点

  • 熟悉的语法:cheerio实现了jQuery的一个子集,去掉了jQuery中所有与DOM不一致或者是用来填浏览器的坑的东西,重现了jQuery最美妙的API

  • 快到没朋友:cheerio使用了及其简洁而又标准的DOM模型, 因此对文档的转换,操作,渲染都极其的高效。基本的端到端测试显示它的速度至少是JSDOM的8倍

  • 极其灵活:cheerio使用了@FB55编写的非常兼容的htmlparser2,因此它可以解析几乎所有的HTML和XML

关于JSDOM

cheerio产生的原因是出于对JSDOM的失望,主要体现在以下三点:

  • JSDOM的解析规则太过于严格:JSDOM的解析器无法处理现在许多的流行网站的内容

  • JSDOM太慢了:解析大的网站甚至可以产生可察觉的延迟

  • JSDOM太过于重量级:JSDOM的目标是提供与浏览器一样的DOM环境,但是我们往往不需要这样。我们需要的只是一种简单,熟悉的方式来操作我们的HTML

什么时候你应该用JSDOM

cheerio并非万能,当你需要一个浏览器一样的环境时,你最好还是用JSDOM,尤其是你需要进行自动化的功能测试时

API

后面的例子中用到的HTML模板如下:

<ul id="fruits">
<li class="apple">Apple</li>
<li class="orange">Orange</li>
<li class="pear">Pear</li>
</ul>

  

1. 解析html(load)

首先你需要先加载你的HTML。jQuery会自动完成这一步,因为jQuery操作的DOM是固定的。但是在使用cheerio时我们要手动加载我们的HTML文档

首选的方式如下:

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

其次,直接把HTML字符串作为上下文也是可以的:

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

或者把HTML字符串作为root

$ = require('cheerio');
$('li', 'ul', '<ul id = "fruits">...</ul>');

如果你需要自定义一些解析选项,你可以多传递一个对象给load方法:

$ = cheerio.load('<ul id = "fruits">...</ul>', {
ignoreWhitespace: true,
xmlMode: true
});

更多的解析选项可以参考domhandlerparser-options

2. 选择器(selectors)

cheerio的选择器几乎和jQuery一模一样,所以语法上十分相像

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

selectorcontext的范围内搜索,context的范围又包含在root的范围内。selectorcontext可以是一个字符串,DOM元素,DOM数组或者cheerio实例。root一般是一个HTML文档字符串

选择器是文档遍历和操作的起点。如同在jQuery中一样,它是选择元素节点最重要的方法,但是在jQuery中选择器建立在CSS选择器标准库上。cheerio的选择器实现了大部分的方法

$('.apple', '#fruits').text()
//=> Apple $('ul .pear').attr('class')
//=> pear $('li[class=orange]').html()
//=> <li class = "orange">Orange</li>

3. 属性操作(atrributes)

用来获取和更改属性的方法:

.attr(name, value)

这个方法用来获取和设置属性。获取第一个符合匹配的元素的属性值。如果某个属性值被设置成null,那么该属性会被移除。你也可以把mapfunction作为参数传递进去,就像在jQuery中一样

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

更多信息请查看 http://api.jquery.com/attr/

.removeAtrr(name)

移除名为name的属性

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

.hasClass(className)

检查元素是否含有此类名

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

.addClass(className)

添加类名到所有的匹配元素,可以用函数作为参数

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

参见 http://api.jquery.com/addClass/

.remoteClass([className])

移除一个或者多个(空格分隔)的类名,如果className为空,则所有的类名都会被移除,可以传递函数作为参数

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

参见http://api.jquery.com/removeClass/

遍历

.find(selector)

在当前元素集合中选择符合选择器规则的元素集合

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

.parent()

获取元素集合第一个元素的父元素

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

.next()

选择当前元素的下一个兄弟元素

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

.prev()

.next()相反

.siblings()

获取元素集合中第一个元素的所有兄弟元素,不包含它自己

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

.children( selector )

.each( function(index, element) )

遍历函数返回false即可终止遍

var fruits = [];

$('li').each(function(i, elem) {
fruits[i] = $(this).text();
}); fruits.join(', ');
//=> Apple, Orange, Pear

.map( function(index, element) )

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

.filter( selector )

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

.filter( function(index) )

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

.first()

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

.last()

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

.eq( i )

缩小元素集合,可以用负数表示倒数第 i 个元素被保留

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

操作DOM

操作DOM结构的方法

.append( content, [content, ...] )

.prepend( content, [content, ...] )

.after( 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, ...] )

$('.apple').before('<li class = "plum">Plum</li>')
$.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>

.empty()

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

.html( [htmlString] )

$('.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

解析和渲染

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

输出包含自己在内的HTML(outer HTML)

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

杂项

.toArray()

$('li').toArray()
//=> [ {...}, {...}, {...} ]

.clone()

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

常用工具

$.root()

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

$.contains( container, contained )

cheerio中文文档的更多相关文章

  1. Phoenix综述(史上最全Phoenix中文文档)

    个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...

  2. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  3. Knockout中文开发指南(完整版API中文文档) 目录索引

    a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...

  4. ReactNative官方中文文档0.21

    整理了一份ReactNative0.21中文文档,提供给需要的reactnative爱好者.ReactNative0.21中文文档.chm  百度盘下载:ReactNative0.21中文文档 来源: ...

  5. java中文文档官方下载

    一直在寻找它,今天无意之间终于发现它了! http://download.oracle.com/technetwork/java/javase/6/docs/zh/api/overview-summa ...

  6. Spring中文文档

    前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...

  7. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  8. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  9. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  10. Weex中文文档

    这里整理当前已译出的Weex中文文档,如需查阅完整Weex文档,请访问http://alibaba.github.io/weex/doc/ . 同时也欢迎大家参与Weex中文文档翻译 [Guide] ...

随机推荐

  1. GET请求数据量大造成的问题

    在实际的开发过程中,我们偶尔或者遇到过要导出列表中所有的数据.假设列表中有十万条数据,那么导出所有,意味着要大批量的走查询接口,通常我们的后台的API接口GET请求支持的查询长度不得大于1000,(比 ...

  2. vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...

  3. python3.7安装Anaconda3+tensorflow2.1中遇到的问题

    最近想搞深度学习,就开始装tensorflow,其中也是遇到了一些问题,希望给遇到同类问题的童鞋一些提示.... 因为之前一直用的python3.7,虽然网上很多建议装python3.5版本tenso ...

  4. (0319) uvm 库的安装编译:

    https://mp.weixin.qq.com/s/jCSp89UYsEZGRU2BN5IloA

  5. CNN模型踩坑记录

    刚刚在跑textCNN的模型,加载了字典后,在同样的输入下模型的输出一直在变化,先发现损失函数一直在变化,不停debug之后发现是模型的输出一直在变化,在模型输入一直不变下模型输出不同,最后发现是模型 ...

  6. class_man

    #!/usr/bin/python # -*- coding: UTF-8 -*- class Man():          def __init__(self, name="" ...

  7. 国产电源芯片DP4054 软硬件兼容TP4054 规格书资料

    DP4054 是一款完整的采用恒定电流/恒定电压单 节锂离子电池充电管理芯片.其SOT小封装和较少的外部元件数目使其成为便携式应用的理想器件,DP4054 可以适合USB 电源和适配器电源工作.跟进口 ...

  8. [转]cfs 调度

    https://www.cnblogs.com/LoyenWang/p/12495319.html 背景 Read the fucking source code! --By 鲁迅 A picture ...

  9. 删除 gnome自带的Videos软件

    gnome3自带的Videos粗看感觉听简洁挺流畅的,可是细看不仅电影中文名乱码显示还搞得字幕慢半拍,这一点完全不能忍,太难受了. 还是Vlc牛.而且Videos在应用商店不能卸载,命令行搜索已安装软 ...

  10. Dell CS24-SC 服务器详情

    详情介绍: https://www.viziotech.com/servers/58-dell-cs24-sc-dual-xeon-quad-core-l5420-25ghz-16gb-4x146gb ...