关于cheerio的api的学习笔记（二）

关于cheerio的api学习笔记

这一部分包括从manipulation到Utilities的部分，然后api到这里就结束了。
学了这部分内容之后感觉和jquery确实是非常像，相当于复习了部分jquery的感觉吧。
然后这个学习笔记就相当于cheerio api的翻译，翻译的不好或者感觉我的表述由问题的地方我配上了原文的引用，希望对学习这一部分的人有所帮助。

结构操作（manipulation）

cheerio提供一系列修改dom结构的方法。

.append(content, [content, ...])

将content插入到某元素中作为该元素的最后一个子元素。

$('ul').append('<li class="plum">Plum</li>')
$.html()
//=>  <ul id="fruits">
//      <li class="apple">Apple</li>
//      <li class="orange">Orange</li>
//      <li class="pear">Pear</li>
//      <li class="plum">Plum</li>
//    </ul>

.appendTo(target)

Insert every element in the set of matched elements to the end of the target.

将匹配的元素插入到目标元素的最后面。

$('<li class="plum">Plum</li>').appendTo('#fruits')
$.html()
//=>  <ul id="fruits">
//      <li class="apple">Apple</li>
//      <li class="orange">Orange</li>
//      <li class="pear">Pear</li>
//      <li class="plum">Plum</li>
//    </ul>

.prepend(content, [content, ...])

将content插入到某元素中作为该元素的第一个子元素。

$('ul').prepend('<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>

.prependTo(target)

将匹配的元素插入到目标元素的最前面。

$('<li class="plum">Plum</li>').prependTo('#fruits')
$.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>

.after(content, [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>

.insertAfter(target)

在目标之后插入匹配元素集中的元素。

$('<li class="plum">Plum</li>').insertAfter('.apple')
$.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, ...])

将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>

.insertBefore(target)

在目标之前插入匹配元素集中的元素。

$('<li class="plum">Plum</li>').insertBefore('.apple')
$.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])

从DOM中去除匹配的元素和它们的子元素。选择器用来筛选要删除的元素。

$('.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()

移除某个元素所有子节点。

$('ul').empty()
$.html()
//=> <ul id="fruits"><ul>

.html([htmlString])

获得元素的HTML字符串。如果htmlString有内容的话，将会替代原来的HTML。

$('.orange').html()
//=> orange

$('#fruits').html('<li class="mango">Mango</li>').html()
//=> <li class="mango">Mango</li>

.text([textString])

获得匹配元素的文本内容, 包括它们的子元素。如果指定了 textstring，那么每个元素的text内容都会被替换。

$('.orange').text()
//=> Orange

$('ul').text()
//=>  Apple
//    Orange
//    Pear

.wrap(content)

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。

content可能的值:

• HTML 代码 - 比如 ("
  ")
• 新元素 - 比如 (document.createElement(“div”))
• 已存在的元素 - 比如 ($(".div1"))

已存在的元素不会被移动，只会被复制，并包裹被选元素。

const redFruit = $('<div class="red-fruit"></div>')
$('.apple').wrap(redFruit)

//=> <ul id="fruits">
//     <div class="red-fruit">
//      <li class="apple">Apple</li>
//     </div>
//     <li class="orange">Orange</li>
//     <li class="plum">Plum</li>
//   </ul>

const healthy = $('<div class="healthy"></div>')
$('li').wrap(healthy)

//=> <ul id="fruits">
//     <div class="healthy">
//       <li class="apple">Apple</li>
//     </div>
//     <div class="healthy">
//       <li class="orange">Orange</li>
//     </div>
//     <div class="healthy">
//        <li class="plum">Plum</li>
//     </div>
//   </ul>

.css()

.css([propertyName])

.css([propertyNames])

.css([propertyName],[value])

.css([propertyName],[function])

.css([properties])

获取匹配元素集中第一个元素的样式属性的值, 或为每个匹配元素设置一个或多个 css 属性。

渲染(Rendering)

当你想呈现文档时，你可以使用.html()函数

$.html()
//=>  <ul id="fruits">
//      <li class="apple">Apple</li>
//      <li class="orange">Orange</li>
//      <li class="pear">Pear</li>
//    </ul>

如果你想得到outerHTML你可以使用$.html(selector):

outerHTML：包含引用该方法元素自身的标签。

$.html('.pear')
//=> <li class="pear">Pear</li>

By default, html will leave some tags open. Sometimes you may instead want to render a valid XML document. For example, you might parse the following XML snippet:

const $ = cheerio.load('<media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>');

… and later want to render to XML. To do this, you can use the ‘xml’ utility function:

你可以使用.xml()来显示xml文档。

$.xml()
//=>  <media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>

You may also render the text content of a Cheerio object using the text static method:

你可以对一个cheerio对象使用.text()方法，来获取对象的文本内容

const $ = cheerio.load('This is <em>content</em>.')
$.text()
//=> This is content.

.text()方法也可以被cheerio调用，但是需要传入节点。

const $ = cheerio.load('<div>This is <em>content</em>.</div>')
cheerio.text($('div'))
//=> This is content.

实用方法（Miscellaneous & Utilities）

和其他地方不同的DOM方法

.toArray()

将cheerio对象集合转换成真正的数据结构。

$('li').toArray()
//=> [ {...}, {...}, {...} ]

.clone()

克隆cheerio对象

const moreFruit = $('#fruits').clone()

$.root

对某一cheerio对象的根节点进行相关操作。

$.root().append('<ul id="vegetables"></ul>').html();
//=> <ul id="fruits">...</ul><ul id="vegetables"></ul>

$.contains(container,contained)

检查container中是否是否包含contained元素。

$.contains('#fruits', '.pear'); // => true

$.parseHTML(data[,context][keepScripts])

将字符串解析为DOM节点数组。context参数对chreeio没有意义，但是可以用来维护APi的兼容性。

$.load(html[,options])

加载