什么是cheerio？

cheerio 是nodejs特别为服务端定制的，能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上，且解析、操作、呈送都很高效。

安装 npm install cheerio

PS:本课程环境中，已经进行了安装。

特征熟悉的语法：cheerio实现了jQuery核心的一个子集。 cheerio删除了从jQuery库中和不同浏览器不一致的东西，揭示其真正华丽的API。

极快：cheerio适用于一个非常简单的，一致的DOM模型。 这样解析，操作和呈现是令人难以置信的高效率。

灵活性：cheerio可以解析几乎所有的HTML或XML文档。

hello world

为了更加直观的学习 cheerio ，我们开始 hello world：

//模块引用 var cheerio = require('cheerio'), $ = cheerio.load('<h2 class="title">Hello world</h2>'); $('.title').text('Hello there!'); $('.title').addClass('Welcome'); //输出 console.log($.html()); 输出： Hello there!

解析：.load() 引入我们要解析的html。text() 设置 h2 中的文本。addClass() 给 h2 添加新的class。

载入 html

要想解析html，首先我们需要加载html。这一步在jQuery是自动完成的，因为jQuery的运行在一个即时的DOM环境中。我们需要将HTML文档传入Cheerio中，那么如何加载呢？

这是需要加载的html：

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

PS: 在后文示例中加载的 html，都将是上述中的这段代码。

首选： var cheerio = require('cheerio'), $ = cheerio.load(html); 将HTML作为字符串参数传入: $ = require('cheerio'); $('ul', html); 或者作为根结点： $ = require('cheerio'); $('li', 'ul', html); 小结

本文简单的认识了 cheerio 和 如何载入需要解析的 html 的几种方法。 PS:cheerio 的 API 和jQuery是非常相似的，可以说是服务器端的jQuery，下面举两个简单的例子说明下：

selectors

语法：

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

语法讲解： selector 是目标选择器， context 是目标选择器的上下文， root 是上下文 context 的上下文。 selector 和 context 可以是 字符串表达式 、 dom元素 、 dom元素集合 、 cheerio对象 ，而 root 一般都是html文档字符串。

PS: 通常参数context和root都会省略。

这个方法一般用于遍历和处理DOM。像jQuery中，它是对DOM中选择目标选择器的主要方法，但又不同于jQuery是建立在顶部的 CSSSelect 库，它实现了大部分的Sizzle选择器。

PS:Sizzle是一个纯javascript CSS选择器引擎。jquery1.3开始使用sizzle。感兴趣的同学可以自己了解一下。

示例：

$('.apple') // 选择器定位到class 为apple的目标 $('ul .pear') // 选择器定位到 ul 中 class 为 pear 的目标 $('li[class=orange]') // 选择器定位到 li 中 class 为arange的目标 看到上述中的选择器的API是不是和jQuery中很相似。 attribute

在应用中我们经常会遇到需要对属性进行获取和修改，现在我们来讲解一下都有哪些方法。

.attr(name[, value])

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

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

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

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

内容参考：

http://www.hubwiz.com/course/5636b7a11bc20c980538e998/

ps：可在线免费练习。