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()//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]
$('.apple').nextAll().length//=>2

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
$('.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);});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • cheerio是一个node的库,可以理解为一个Node.js版本的jquery,用来从网页中以 css sele...
    LuciferTM阅读 3,891评论 0 2
  • 转载自http://cnodejs.org/topic/5203a71844e76d216a727d2e ,略加美...
    vv源vv阅读 1,218评论 0 50
  • 查询数组很容易,对于数组,我们可以这样理解:数组中每一个元素都是这个键值对键的一个有效值,如下面的例子:我们要查询...
    yzc123446阅读 485评论 0 1
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 980评论 0 2
  • 感赏刘先生很及时地购买了孩子出行的票,这样为孩子节省了不少时间。感赏自己和辅导老师反复沟通,为孩子的夏令营...
    立春暖阳阅读 188评论 0 1