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>

2. 常用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() 清空当前元素的所有子元素

标签：Apple,cheerio,元素,pear,cheeio,笔记,用法,content,html
来源： https://blog.csdn.net/qq_42395775/article/details/112797389