Cheerio，服務端的JQuery。

什麼是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：可線上免費練習。