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>

ps：可在線免費練習。