cheeio是jquery核心功能的一个快速灵活而又简洁的实现,主要是为了用在服务器端需要对DOM进行操作的地方官方文档
- cheeio主要用于在服务端处理dom,例如一个get请求请求回来一个html页面,这个时候想要从这个页面中提取出来信息就可以用cheeio
const cheerio = require('cheerio'),
$ = cheerio.load('<h2 class = "title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();//=> <h2 class = "title welcome">Hello there!</h2>
- 常用api
- load 解析html
使用cheeio手动加载html文档<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('<ul id = "fruits">...</ul>');
$ = require('cheerio'); $('ul', '<ul id = "fruits">...</ul>');
- 选择器
selector在context的范围内搜索,context的范围又包含在root的范围内。selector和context可以是一个字符串,DOM元素,DOM数组或者cheerio实例。root一般是一个HTML文档字符串
$( selector, [context], [root] ) // 操作和jquery类似 $('.apple', '#fruits').text() //=> Apple $('ul .pear').attr('class') //=> pear $('li[class=orange]').html() //=> <li class = "orange">Orange</li>
- 属性操作
用来获取和更改属性的方法:.attr(name, value)
removeAttr(name)移除名为name的属性$('ul').attr('id') //=> fruits $('.apple').attr('id', 'favorite').html() //=> <li class = "apple" id = "favorite">Apple</li>
.hasClass(className)检查元素是否含有此类名$('.pear').removeAttr('class').html() //=> <li>Pear</li>
.addClass(className) 添加类名到所有的匹配类名$('.pear').hasClass('pear') //=> true $('apple').hasClass('fruit') //=> false $('li').hasClass('pear') //=> true
.find(selector) 在当前元素集合中选择符合选择器规则的元素集合$('.pear').addClass('fruit').html() //=> <li class = "pear fruit">Pear</li> $('.apple').addClass('fruit red').html() //=> <li class = "apple fruit red">Apple</li>
.parent() 选择元素的父元素$('#fruits').find('li').length //=> 3
.next() 选择当前元素的下一个兄弟元素
.prev() 选择当前元素的上一个兄弟元素
.siblings() 获取元素集合中第一个元素的所有兄弟元素,不包含它自己
.each( function(index, element) ) 遍历函数返回false即可终止遍历$('.pear').siblings().length //=> 2
.map( function(index, element) )var fruits = []; $('li').each(function(i, elem) { fruits[i] = $(this).text(); }); fruits.join(', '); //=> Apple, Orange, Pear
.filter( selector )$('li').map(function(i, el) { // this === el return $(this).attr('class'); }).get().join(', '); //=> apple, orange, pear
.first() 集合中的第一个元素$('li').filter('.orange').attr('class'); //=> orange
.last() 集合中的最后一个元素
.eq( i ) 缩小元素集合,可以用负数表示倒数第 i 个元素被保留$('li').eq(0).text() //=> Apple $('li').eq(-1).text() //=> Pear
-
操作dom
.append( content, [content, …] ).prepend( content, [content, …] )
.after( content, [content, …] )
$('.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, …] )
$('.apple').before('<li class = "plum">Plum</li>') $.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] )
$('.pear').remove() $.html() //=> <ul id = "fruits"> // <li class = "apple">Apple</li> // <li class = "orange">Orange</li> // </ul>
.replaceWith( content )
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>
.empty() 清空当前元素的所有子元素