cheeio常见用法学习笔记

cheeio是jquery核心功能的一个快速灵活而又简洁的实现,主要是为了用在服务器端需要对DOM进行操作的地方官方文档

  1. 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>
  1. 常用api
    • load 解析html
    <ul id="fruits">
        <li class="apple">Apple</li>
        <li class="orange">Orange</li>
        <li class="pear">Pear</li>
    </ul>
    
    使用cheeio手动加载html文档
    方法一
    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)
    $('ul').attr('id')
    //=> fruits
    $('.apple').attr('id', 'favorite').html()
    //=> <li class = "apple" id = "favorite">Apple</li>
    
    removeAttr(name)移除名为name的属性
    $('.pear').removeAttr('class').html()
    //=> <li>Pear</li>
    
    .hasClass(className)检查元素是否含有此类名
    $('.pear').hasClass('pear')
    //=> true
    
    $('apple').hasClass('fruit')
    //=> false
    
    $('li').hasClass('pear')
    //=> true
    
    .addClass(className) 添加类名到所有的匹配类名
    $('.pear').addClass('fruit').html()
    //=> <li class = "pear fruit">Pear</li>
    
    $('.apple').addClass('fruit red').html()
    //=> <li class = "apple fruit red">Apple</li>
    
    .find(selector) 在当前元素集合中选择符合选择器规则的元素集合
    $('#fruits').find('li').length
    //=> 3
    
    .parent() 选择元素的父元素
    .next() 选择当前元素的下一个兄弟元素
    .prev() 选择当前元素的上一个兄弟元素
    .siblings() 获取元素集合中第一个元素的所有兄弟元素,不包含它自己
    $('.pear').siblings().length
    //=> 2
    
    .each( function(index, element) ) 遍历函数返回false即可终止遍历
    var fruits = [];
    $('li').each(function(i, elem) {
    fruits[i] = $(this).text();
    });
    
    fruits.join(', ');
    //=> Apple, Orange, Pear
    
    .map( function(index, element) )
    $('li').map(function(i, el) {
    // this === el
    return $(this).attr('class');
    }).get().join(', ');
    //=> apple, orange, pear
    
    .filter( selector )
    $('li').filter('.orange').attr('class');
    //=> orange
    
    .first() 集合中的第一个元素
    .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() 清空当前元素的所有子元素

上一篇:操作系统第2次实验报告:创建进程


下一篇:JS爬虫 利用axios和cheerio爬取好大夫病历并生成xlsx