cheerio 笔记

简介

cheerio是一个node的库，可以理解为一个Node.js版本的jquery，用来从网页中以 css selector取数据，使用方式和jquery基本相同。

npm install cheerio --save

var cheerio = require('cheerio')
var $ = cheerio.load('<h2 class="title">Hello world</h2>')

$('h2.title').text('Hello there!')
$('h2').addClass('welcome')

$.html()
//=> <h2 class="title welcome">Hello there!</h2>
复制代码

可以看出Cheerio 与jquery拥有相似的语法。事实上，Cheerio 从jQuery库中去除了所有 DOM不一致性和浏览器尴尬的部分，性能更优。

load 装载DOM

首先你需要加载HTML。这一步对jQuery来说是必须的，通过Cheerio,我们需要把HTML document 传进去,下面的代码都针对如下代码

var html = '<ul id="fruits"> <li class="apple">Apple</li> <li class="orange">Orange</li> <li class="pear">Pear</li> </ul>'
//DOM结构如下
<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>

var cheerio = require('cheerio'),
$ = cheerio.load(html);
复制代码

选择器

$(selectior,[context],[root]) 复制代码

选择器在 Context 范围内搜索，Context又在Root范围内搜索。注意：这里是root在右，context在左。selector 和context可以是一个字符串表达式，DOM元素，和DOM元素的数组，或者chreeio对象。root 是通常是HTML 文档字符串。

$('.apple', '#fruits').text()
//=> Apple
//id为fruits，class为apple的元素，先root后context

$('ul .pear').attr('class')
//=> pear
//class为pear的ul元素

$('li[class=orange]').html()
//=> Orange
//class属性为orange的li元素
复制代码

　attr()修改属性

attr(name,value) 复制代码

获得和修改属性。在匹配的元素中只能获得第一元素的属性。如果设置一个属性的值为null，则移除这个属性。你也可以传递一对键值，或者一个函数。

$('ul').attr('id')
//=> fruits

$('.apple').attr('id', 'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>

$('.apple').attr('class', 'favorite').html()
//=> <li class="favorite">Apple</li>
复制代码

removeAttr(name)

通过name删除属性 $(‘.pear’).removeAttr(‘class’).html() //=> pear

　prop()修改状态值

$('input[type="checkbox"]').prop('checked') //=> false $('input[type="checkbox"]').prop('checked', true).val() //=> ok 复制代码

data()自定义属性

$('<div data-apple-color="red"></div>').data() //=> { appleColor: 'red' } $('<div data-apple-color="red"></div>').data('apple-color') //=> 'red' var apple = $('.apple').data('kind', 'mac') apple.data('kind') //=> 'mac' 复制代码

val()赋值

$('input[type="text"]').val()
//=> input_text

$('input[type="text"]').val('test').html()
//=> <input type="text" value="test"/>
复制代码

hasClass( className )

检查匹配的元素是否有给出的类名

$('.pear').hasClass('pear')//=> true $('apple').hasClass('fruit')//=> false $('li').hasClass('pear')//=> true 复制代码

addClass(name)

增加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()//=>Pear
$('.apple').addClass('red').removeClass().html()//=>Apple
复制代码

查询语法

find(selector)

获得一个在匹配的元素中由选择器滤过的后代

$('#fruits').find('li').length//=> 3 复制代码

parent([selector])

获得通过选择器筛选匹配的元素的parent集合

$('.orange').parents().length// => 2 $('.orange').parents('#fruits').length// => 1 复制代码

next()获得第一个本元素之后的同级元素

$('.apple').next().hasClass('orange')//=> true
$('.pear').next().html()//=> null
复制代码

.nextAll()

获得本元素之后的所有同级元素 $(‘.apple’).nextAll()//=> [

Orange, Pear]

$(‘.apple’).nextAll().length//=>2

prev() 获得本元素之前的第一个同级元素 $(‘.orange’).prev().hasClass(‘apple’)//=> true

preAll()

获得本元素前的所有同级元素 $(‘.pear’).prevAll()//=> [

Orange, Apple]

　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 $(‘.pear’).siblings(‘.pear’).length//=> 0

first()

会选择chreeio对象的第一个元素 (‘#fruits’).children().first().text()//=> Apple

last()

会选择chreeio对象的最后一个元素 $(‘#fruits’).children().last().text()//=> Pear

eq(i)

通过索引筛选匹配的元素。使用.eq(-i)就从最后一个元素向前数。 $(‘li’).eq(0).text()//=> Apple $(‘li’).eq(-1).text()//=> Pear

children(selector)

获被选择元素的子元素 $(‘#fruits’).children().length//=> 3 $(‘#fruits’).children(‘.pear’).text()//=> Pear

each(function(index,element))

迭代一个cheerio对象，为每个匹配元素执行一个函数。要提早跳出循环，返回false.

var fruits = []; $('li').each(function(i, elem) { fruits[i] = $(this).text(); }); fruits.join(', '); //=> Apple, Orange, Pear 复制代码

map(function(index,element))

迭代一个cheerio对象，为每个匹配元素执行一个函数。Map会返回一个迭代结果的数组。

$('li').map(function(i, el) { return $(this).attr('class'); }).join(', '); //=> apple, orange, pear 复制代码

filter(selector)

迭代一个cheerio对象，滤出匹配选择器或者是传进去的函数的元素。如果使用函数方法，这个函数在被选择的元素中执行，所以this指向的手势当前元素。

$('li').filter('.orange').attr('class');//=> orange $('li').filter(function(i, el) { // this === el return $(this).attr('class') === 'orange'; }).attr('class') //=> orange 复制代码

改变DOM结构的方法

append(content,[content…])

在每个元素最后插入一个子元素

$('ul').append('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
// <li class="plum">Plum</li>//
复制代码

prepend(content,[content,…])

在每个元素最前插入一个子元素

$('ul').prepend('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
复制代码

after(content,[content,…])

在每个匹配元素之后插入一个元素

$('.apple').after('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="apple">Apple</li>
// <li class="plum">Plum</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
复制代码

before(content,[content,…])

在每个匹配的元素之前插入一个元素

$('.apple').before('<li class="plum">Plum</li>')
$.html()
//=>
// <li class="plum">Plum</li>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="pear">Pear</li>
复制代码

remove( [selector] )

从DOM中去除匹配的元素和它们的子元素。选择器用来筛选要删除的元素。

$('.pear').remove()
$.html()//=>

// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
复制代码

replaceWith( content )

替换匹配的的元素

var plum = $('<li class="plum">Plum</li>')
$('.pear').replaceWith(plum)
$.html()
//=>
// <li class="apple">Apple</li>
// <li class="orange">Orange</li>
// <li class="plum">Plum</li>//
复制代码

empty()

清空一个元素，移除所有的子元素

$('ul').empty()$.html()
复制代码

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 复制代码

cheerio 实践

下载类

var http = require("http"); function download(url, callback) { http.get(url, function(res) { var data = ""; res.on('data', function (chunk) { data += chunk; }); res.on("end", function() { callback(data); }); }).on("error", function() { callback(null); }); } exports.download = download; 复制代码

下载类的使用

var cheerio = require("cheerio"); var loadUrl = require("./loadUrl"); var url = "http://www.example.com" loadUrl.download(url, function(data) {console.log(data);}); 复制代码