NPM-cheerio服务器端Jquery

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

let cheerio = require('cheerio')
let $ = 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不一致性和浏览器尴尬的部分，揭示了它真正优雅的API。
• 闪电般的块:Cheerio 工作在一个非常简单，一致的DOM模型之上。解析，操作，呈送都变得难以置信的高效。基础的端到端的基准测试显示Cheerio 大约比JSDOM快八倍(8x)。
• 巨灵活: Cheerio 封装了兼容的htmlparser。Cheerio 几乎能够解析任何的 HTML 和 XML document

这是我们将会在所有的API例子中用到的HTML标记

加载

首先你需要加载HTML。这一步对jQuery来说是必须的，通过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>', {
    normalizeWhitespace: true,
    xmlMode: true
});

这些解析选项都是直接来自htmlparser ，因此任何在htmlparser里有效的选项在Chreeio里也是行得通的。默认的选项如下:

{
    withDomLvl1: true,
    normalizeWhitespace: false,
    xmlMode: false,
    decodeEntities: true
}

想看选项清单和它们都效果，看这个和这个

选择器

Cheerio的选择器用起来几乎和jQuery一样，所以API也很相似。 $(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元素

Attributes

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

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

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

 

.prop( name, value )

Method for getting and setting properties. Gets the property value for only the first element in the matched set.

$('input[type="checkbox"]').prop('checked')
//=> false

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

.data( name, value )

Method for getting and setting data attributes. Gets or sets the data attribute value for only the first element in the matched set.

$('<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( [value] )

Method for getting and setting the value of input, select, and textarea. Note: Support for map, and function has not been added yet.

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

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