cheerio是nodejs的抓取頁面模組，為伺服器特別定製的，快速、靈活、實施的jQuery核心實現。適合各種Web爬蟲程式。
基本介紹
- 外文名：cheerio
- 歸屬：node.js
說明,作用,安裝方法,特性,使用方法,
說明
cheerio為伺服器特別定製的，快速、靈活、實施的jQuery核心實現.
作用
將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 核心的子集。Cheerio 從jQuery庫中去除了所有 DOM不一致性和瀏覽器尷尬的部分，揭示了它真正優雅的API。
閃電般的快:Cheerio 工作在一個非常簡單，一致的DOM模型之上。解析，操作，呈送都變得難以置信的高效。基礎的端到端的基準測試顯示Cheerio 大約比JSDOM快八倍(8x)。
巨靈活: Cheerio 封裝了兼容的htmlparser。Cheerio 幾乎能夠解析任何的 HTML 和 XML document。
使用方法
首先你需要載入HTML。這一步對jQuery來說是必須的，since jQuery operates on the one, baked-in DOM。通過Cheerio,我們需要把HTML document 傳進去。
載入
這是首選:
var cheerio = require('cheerio'), $ = cheerio.load('<ul id="fruits">...</ul>');
或者通過傳遞字元串作為內容來載入HTML:
$ = require('cheerio');$('ul', '<ul id="fruits">...</ul>');
Or as the root:
$ = require('cheerio');$('li', 'ul', '<ul id="fruits">...</ul>');
你也可以傳遞一個額外的對象給.load()如果你需要更改任何的默認解析選項的話:
$ = cheerio.load('<ul id="fruits">...</ul>', { ignoreWhitespace: true, xmlMode: true});
這些解析選項都是直接來自htmlparser ，因此任何在htmlparser里有效的選項在Chreeio里也是行得通的。默認的選項如下:
{ ignoreWhitespace: false, xmlMode: false, lowerCaseTags: false}
選擇器
Cheerio的選擇器用起來幾乎和jQuery一樣，所以API也很相似。
$(selectior,[context],[root])
選擇器在 Context 範圍內搜尋，Context又在Root範圍內搜尋。selector 和context可是是一個字元串表達式，DOM元素，和DOM元素的數組，或者chreeio對象。root 是通常是HTML 文檔字元串。
$('.apple', '#fruits').text()
//=> Apple
$('ul .pear').attr('class')
//=> pear
$('li[class=orange]').html()
//=> <li class="orange">Orange</li>
獲得和修改屬性
.attr(name,value)
獲得和修改屬性。在匹配的元素中只能獲得第一元素的屬性。如果設定一個屬性的值為null，則移除這個屬性。你也可以傳遞一對鍵值，或者一個函式。
$('ul').attr('id')
//=> fruits
$('.apple').attr('id', 'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>
value([value])
獲得和修改input,select,textarea的value.注意: 對於傳遞鍵值和函式的支持還沒有被加進去。
$('input[type="text"]').val()
=> input_text
$('input[type="text"]').val('test').html()
=> <input type="text" value="test"/>
.removeAttr(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)
增加class(es)給所有匹配的elements.也可以傳函式。
$('.pear').addClass('fruit').html()
//=> <li class="pear fruit">Pear</li>
$('.apple').addClass('fruit red').html()
//=> <li class="apple fruit red">Apple</li>
.removeClass([className])
從選擇的elements里去除一個或多個有空格分開的class。如果className 沒有定義，所有的classes將會被去除，也可以傳函式。
$('.pear').removeClass('pear').html()
//=> <li class="">Pear</li>
$('.apple').addClass('red').removeClass().html()
//=> <li class="">Apple</li>
.is.(selector)
.is(function(index))
有任何元素匹配selector就返回true。如果使用判定函式，判定函式在選中的元素中執行，所以this指向當前的元素。
篩選
.find(selector)
獲得一個在匹配的元素中由選擇器濾過的後代。
$('#fruits').find('li').length
//=> 3
.parent([selector])
獲得每個匹配元素的parent,可選擇性的通過selector篩選。
$('.pear').parent().attr('id')
//=> fruits
.parents([selector])
獲得通過選擇器篩選匹配的元素的parent集合。
$('.orange').parents().length
// => 2
$('.orange').parents('#fruits').length
// => 1
.closest([selector])
對於每個集合內的元素，通過測試這個元素和DOM層級關係上的祖先元素，獲得第一個匹配的元素
$('.orange').closest()
// => []
$('.orange').closest('.apple')
// => []
$('.orange').closest('li')
// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')
// => [<ul id="fruits"> ... </ul>]
.next()獲得第一個本元素之後的同級元素
$('.apple').next().hasClass('orange')
//=> true
.nextAll()
獲得本元素之後的所有同級元素
$('.apple').nextAll()
//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]
.prev()
獲得本元素之前的第一個同級元素
$('.orange').prev().hasClass('apple')
//=> true
.preAll()
$('.pear').prevAll()
//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]
獲得本元素前的所有同級元素
.slice(start,[end])
獲得選定範圍內的元素
$('li').slice(1).eq(0).text()
//=> 'Orange'$('li').slice(1, 2).length
//=> 1
.siblings(selector)
獲得被選擇元素的同級元素，本元素除外
$('.pear').siblings().length
//=> 2
$('.pear').siblings('.orange').length
//=> 1
.children(selector)
獲被選擇元素的子元素
$('#fruits').children().length
//=> 3
$('#fruits').children('.pear').text()
//=> Pear
.each(function(index,element))
疊代一個cheerio對象，為每個匹配元素執行一個函式。When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element.要提早跳出循環，返回false.
var fruits = [];
$('li').each(function(i, elem) { fruits[i] = $(this).text();});fruits.join(', ');
//=> Apple, Orange, Pear
.map(function(index,element))
疊代一個cheerio對象，為每個匹配元素執行一個函式。Map會返回一個疊代結果的數組。the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element
$('li').map(function(i, el) {
// this === el return
$(this).attr('class');}).join(', ');
//=> apple, orange, pear
.filter(selector)
.filter(function(index))
疊代一個cheerio對象，濾出匹配選擇器或者是傳進去的函式的元素。如果使用函式方法，這個函式在被選擇的元素中執行，所以this指向的手勢當前元素。
Selector:
$('li').filter('.orange').attr('class');
//=> orange
Function:
$('li').filter(function(i, el) {
// this === el return
$(this).attr('class') === 'orange';}).attr('class')
//=> orange
.first()
會選擇chreeio對象的第一個元素
$('#fruits').children().first().text()
//=> Apple
.last()
$('#fruits').children().last().text()
//=> Pear
會選擇chreeio對象的最後一個元素
.eq(i)
通過索引篩選匹配的元素。使用.eq(-i)就從最後一個元素向前數。
$('li').eq(0).text()
//=> Apple
$('li').eq(-1).text()
//=> Pear
Manipulation
改變DOM結構的方法
.append(content,[content…])
在每個元素最後插入一個子元素
$('ul').append('<li class="plum">Plum</li>')
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// <li class="plum">Plum</li>
// </ul>
.prepend(content,[content,…])
在每個元素最前插入一個子元素
$('ul').prepend('<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>
.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] )
從DOM中去除匹配的元素和它們的子元素。選擇器用來篩選要刪除的元素。
$('.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] )
獲得元素的HTML字元串。如果htmlString有內容的話，將會替代原來的HTML
$('.orange').html()
//=> Orange
$('#fruits').html('<li class="mango">Mango</li>').html()
//=> <li class="mango">Mango</li>
.text( [textString] )
獲得元素的text內容，包括子元素。如果textString被指定的話，每個元素的text內容都會被替換。
$('.orange').text()
//=> Orange$('ul').text()
//=> Apple
// Orange
// Pear
Rendering
如果你想呈送document，你能使用html多效用函式。
$.html()
//=> <ul id="fruits">
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// </ul>
如果你想呈送outerHTML,你可以使用 $.html(selector)
$.html('.pear')
//=> <li class="pear">Pear</li>
默認的,html會讓一些標籤保持開標籤的狀態.有時候你想呈現一個有效的XML文檔.例如下面這個:
$ = cheerio.load('<media:thumbnail url="xxx.jpg" width="75" height="50" time="12:05:01.123"/>');
然後為了呈現這個XML,你需要使用xml這個函式:
$.xml()
//=> <media:thumbnail url="xxx.jpg" width="75" height="50" time="12:05:01.123"/>
Miscellaneous
不屬於其它地方的DOM 元素方法
.toArray()
取得所有的在DOM元素，轉化為數組、
$('li').toArray()
//=> [ {...}, {...}, {...} ]
.clone()
克隆cheerio對象
var moreFruit = $('#fruits').clone()
Utilities
$.root有時候你想找到最上層的root元素,那么$.root()就能獲得:
$.root().append('<ul id="vegetables"></ul>').html();
//=> <ul id="fruits">...</ul><ul id="vegetables"></ul>
$.contains( container, contained )
查看cotained元素是否是container元素的子元素
$.parseHTML( data [, context ] [, keepScripts ] )
將字元串解析為DOM節點數組。context參數對chreeio沒有意義，但是用來維護APi的兼容性。
