載入html

首選

var cheerio = require('cheerio'),$ = cheerio.load(html);

將HTML作為字符串參數(shù)傳入:

$ = require('cheerio'); $('ul', html);

或者作為根結(jié)點(diǎn)：

$ = require('cheerio'); $('li', 'ul', html);

selector

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

$('.apple') // 選擇器定位到class 為apple的目標(biāo)$('ul .pear') // 選擇器定位到 ul 中 class 為 pear 的目標(biāo)$('li[class=orange]') // 選擇器定位到 li 中 class 為arange的目標(biāo)

attribute

get 和set

.attr(name[, value])

這個方法可以獲取和設(shè)置屬性，第二個參數(shù)是可選的。當(dāng)?shù)诙€參數(shù)不存在時表示獲取屬性的值，當(dāng)有帶有第二個參數(shù)時，表示設(shè)置屬性的值。如果設(shè)置一個屬性的值設(shè)置為null ，則刪除該屬性。如下示例：$('ul').attr('id') //=> fruits$('.apple').attr('id', 'favorite').html() //=> <li class="apple" id="favorite">Apple</li>

remove

.removeAttr(name)

通過 name 移除某一個屬性，同時返回被移除的這個元素。如下示例$('.pear').removeAttr('class').html(); //=> <li>Pear</li>

class操作

.hasClass(className)

判斷某元素的 class 中是否包含 className 。如下示例：

$('.pear').hasClass('pear'); //=> true$('apple').hasClass('fruit'); //=> false$('li').hasClass('pear'); //=> true

.addClass(className)

給某元素添加一個名為 className 的樣式名。如下示例：

$('.pear').addClass('fruit').html(); //=> <li class = "pear fruit">Pear</li>$('.apple').addClass('fruit red').html(); //=> <li class = "apple fruit red">Apple</li>

.removeClass(className)

將某元素上名為 className 的樣式名移除。如果不存在 className ，則移除所有的樣式名。如下示例：

$('.pear').removeClass('pear').html(); //=> <li class="">Pear</li>$('.apple').addClass('red').removeClass().html(); //=> <li class="">Apple</li>

添加 DOM

.after(content, [content, ...])

將 content 插入到某元素的后面，并作為其后面第一個兄弟節(jié)點(diǎn)。

$('.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, ...])

將 content 插入到某元素的前面，并作為其前面的第一個兄弟節(jié)點(diǎn)。

$('.apple').before('

Plum'); $.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])

移除某一個節(jié)點(diǎn)以及他們的孩子節(jié)點(diǎn)。

$('.pear').remove(); $.html(); //=> <ul id = "fruits"> // <li class = "apple">Apple</li> // <li class = "orange">Orange</li> // </ul>

.replaceWith(content)

替換匹配的節(jié)點(diǎn)。

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>

清空和獲取 DOM

.empty()

清空一個節(jié)點(diǎn)，移除其所有的孩子節(jié)點(diǎn)。

$('ul').empty(); $.html(); //=> <ul id = "fruits"></ul>

.html([htmlString])

獲取某節(jié)點(diǎn)的html字符串。如果傳入?yún)?shù)，則設(shè)置該元素的html結(jié)構(gòu)。

$('.orange').html(); //=> Orange$('#fruits').html('<li class = "mango">Mango</li>').html(); //=> <li class="mango">Mango</li> .text([textString])

獲取某節(jié)點(diǎn)的純文本。

$('.orange').text(); //=> Orange$('ul').text(); //=> Apple // Orange // Pear

find

cheerio 亦可以同jQuery那樣，通過某一個元素來查找它的父元素、子元素、兄弟元素，并進(jìn)行操作。

.find(selector)

在某元素下查詢滿足選擇條件的元素。

$('#fruits').find('li').length; //=> 3

.parent()

獲取某元素的父元素。

$('.pear').parent().attr('id'); //=> fruits

.next()

獲取某元素的下一個兄弟元素。

$('.apple').next().hasClass('orange'); //=> true

.perv()

獲取某元素的上一個兄弟元素。

$('.orange').prev().hasClass('apple'); //=> true

過濾

.siblings()

獲取某元素的所有同級元素。（當(dāng)然除了它自己）

$('.pear').siblings().length; //=> 2

.children([selector])

獲取某元素的孩子節(jié)點(diǎn)。可以傳入?yún)?shù)在所有的孩子節(jié)點(diǎn)中進(jìn)行篩選。

$('#fruits').children().length; //=> 3$('#fruits').children('.pear').text(); //=> Pear

.filter(selector) & .filter(function(index))

在cheerio對象集合中進(jìn)行條件篩選。

$('li').filter('.orange').attr('class'); //=> orange$('li').filter(function(i, el) {// this === elreturn $(this).attr('class') === 'orange'; }).attr('class') //=> orange

.first()

獲取cheerio集合中的第一個cheerio對象。

$('#fruits').children().first().text(); //=> Apple

.last()

獲取cheerio集合中的最后一個cheerio對象。

$('#fruits').children().last().text(); //=> Pear

.eq(i)

根據(jù)索引獲取cheerio集合中的某一個對象。參數(shù)可以使負(fù)數(shù)，表示從尾部開始索引。

$('li').eq(0).text(); //=> Apple$('li').eq(-1).text(); //=> Pear

遍歷

.each(function(index, element){...})

和jquery類似的 each 迭代器，對每一個元素進(jìn)行處理。

var fruits = [];

$('li').each(function(i, elem) {fruits[i] = $(this).text(); });

fruits.join(', '); //=> Apple, Orange, Pear

.map(function(index, element){...})

和jquery類似的 each 迭代器，對每一個元素進(jìn)行處理并返回一個值。

$('li').map(function(i, el) {// this === elreturn $(this).attr('class'); }).get().join(', '); //=> apple, orange, pear

克隆和復(fù)制

.clone

對 cheerio 中的對象進(jìn)行復(fù)制

var moreFruit = $('#fruits').clone();

$.root

當(dāng)你需要和頂級DOM一起完成任務(wù)時，我們就用到了 $.root。如下：

$.root().append('<ul id="vegetables"></ul>').html();//=> <ul id="fruits">...</ul><ul id="vegetables"></ul> $.contains(container, contained)

檢查 container 中是否包含 contained 元素。注意，container和contained 參數(shù)都應(yīng)當(dāng)是DOM元素：

var c1 = $("#fruits")[0]; var c2 = $(".pear")[0]; var ret = $.contains(c1, c2); console.log(ret); // => true

轉(zhuǎn)載于:https://www.cnblogs.com/oneboi/p/8205809.html

總結(jié)

以上是生活随笔為你收集整理的cheerio api的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。