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());

輸出：<h2 class="title Welcome">Hello there!</h2>

解析：.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：可在線免費練習。