NPM-cheerio服务器端Jquery

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

1
2
3
4
5
6
7
8
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 传进去。 这是首选:

1
2
var cheerio = require('cheerio'),
$ = cheerio.load('<ul id="fruits">...</ul>');

或者通过传递字符串作为内容来加载HTML:

1
2
$ = require('cheerio');
$('ul', '<ul id="fruits">...</ul>');

Or as the root:

1
2
$ = require('cheerio');
$('li', 'ul', '<ul id="fruits">...</ul>');

你也可以传递一个额外的对象给.load()如果你需要更改任何的默认解析选项的话:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ = cheerio.load('<ul id="fruits">...</ul>', {
normalizeWhitespace: true,
xmlMode: true
});
```

这些解析选项都是直接来自htmlparser ,因此任何在htmlparser里有效的选项在Chreeio里也是行得通的。默认的选项如下:
```js
{
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 文档字符串。

1
2
3
4
5
6
7
8
9
10
11
$('.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,则移除这个属性。你也可以传递一对键值,或者一个函数。

1
2
3
4
5
$('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.

1
2
3
4
5
$('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.

1
2
3
4
5
6
7
8
9
$('<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.

1
2
3
4
5
$('input[type="text"]').val()
//=> input_text

$('input[type="text"]').val('test').html()
//=> <input type="text" value="test"/>
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~