2019-08-21 09:03·巴黎人手机登录

以下是与jQuery.parseHTML()函数相关的jQuery示例代码,以示范jQuery.parseHTML()函数的切实用法:

猎取和修改input,select,textarea的value.注意: 对于传递键值和函数的支撑还向来不被加进去。

.prev()

获取本成分在此以前的第多个同级成分

$('.orange').prev().hasClass('apple')
//=> true

如此就可以在命令框里面打字与印刷出页面上具备的摄像地址。如下图

实例
利用一个HTML字符串创造三个数组的Dom节点,并将它插入四个div

你也得以传递叁个万分的靶子给.load()假设您供给转移任何的暗中认可分析选项的话:

.filter(function(index))

迭代贰个cheerio对象,滤出相配选用器只怕是传进去的函数的成分。假若选用函数方法,那几个函数在被挑选的因素中实施,所以this指向的手势当前成分。
Selector:

$('li').filter('.orange').attr('class');
//=> orange

Function:

$('li').filter(function(i, el) {
  // this === el
  return $(this).attr('class') === 'orange';
}).attr('class')
//=> orange

Attributes

获取和修改属性

.attr(name,value)

获得和修改属性。在合营的成分中只好获取第一因素的属性。假设设置壹特性质的值为null,则移除那几个特性。你也足以传递一对键值,可能贰个函数。

$('ul').attr('id')
//=> fruits

$('.apple').attr('id','favorite').html()
//=> <li class="apple" id="favorite">Apple</li>

.val([value])

赢得和改换input,select,textarea的value.注意: 对于传递键值和函数的支撑还一贯不被加进去。

$('input[type="text"]').val()
//=> input_text

$('input[type="text"]').val('test').html()
//=><input type="text" value="test"/>

.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)

追加class(es)给具有相配的elements.也得以传函数。

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

$('.apple').addClass('fruit red').html()
//=> <li class="apple fruit red">Apple</li>

.removeClass([className])

从采纳的elements里去除叁个或八个有空格分开的class。尽管className 未有定义,全部的classes将会被删除,也能够传函数。

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

$('.apple').addClass('red').removeClass().html()
//=> <li class="">Apple</li>

.toggleClass( className, [switch] )

加上或删除class,依赖于近来是或不是有该class.

$('.apple.green').toggleClass('fruit green red').html()
//=> <li class="apple fruit red">Apple</li>

$('.apple.green').toggleClass('fruit green red', true).html()
//=> <li class="apple green fruit red">Apple</li>

.is( selector )

.is( element )

.is( selection )

.is( function(index) )

有任何因素相称selector就回去true。借使利用推断函数,剖断函数在当选的因素中实践,所以this指向当前的要素。

默许意况下,若无一点名或给定null 或 undefined,context是近来的document。即使HTML被用在另二个document中,比方多少个iframe,该frame的文件可以行使。

得到二个在同盟的元素中由精选器滤过的遗族。

.removeAttr(name)

因此name删除属性

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

Cheerio安装达成, 大家就足以开端工作了。 首先让大家来看一段javascript代码 这段代码能够下载任性一个网页的开始和结果。将其放入到curl.js中,并导出。

安然思索:大非常多jQuery API都允许HTML字符串在HTML中含有运行脚本。 jQuery.parseHTML()不会运作剖析的HTML中的脚本,除非您精通将参数keepScripts钦赐为true。 可是,大相当多情形还是能直接地试行脚本,比方:通过品质。调用者应该制止那样做,并清理或转义诸如U奥迪Q7L、cookie等源于的另外不受信任的输入,进而防备现身这种情状。 出于今后的包容性牵记,当参数keepScripts被轻便或为false时,调用者应该不借助任何运转脚 本内容的力量。

$('#fruits').children().first().text()
//=> Apple

Traversing

     node index.js

// "<\/script>"必须通过\将/转义,否则JS会认为已经到了脚本结束的位置
var html = 'Hello,<b>CodePlayer</b><script type="text/javascript">alert("执行脚本代码");<\/script>';


var doms = $.parseHTML( html );
// 不会执行脚本代码
$("#n1").append(doms);

alert("分割线");

doms = $.parseHTML( html, true );
// 会执行脚本代码
$("#n1").append(doms);

.toArray()

.is.(selector)

 

语法

var moreFruit = $('#fruits').clone()
.next()

获取第叁个本成分之后的同级成分

$('.apple').next().hasClass('orange')
//=> true

Traversing

.find(selector)

获得一个在合作的元素中由精选器滤过的子孙。

$('#fruits').find('li').length
//=> 3

.parent([selector])

收获各样相称元素的parent,可选拔性的通过selector筛选。

$('.pear').parent().attr('id')
//=> fruits

.parents([selector])

获得通过选取器筛选相配的因素的parent集结。

$('.orange').parents().length
// => 2
$('.orange').parents('#fruits').length
// => 1

.closest([selector])

对于种种集合内的因素,通过测量试验这几个元素和DOM层级关系上的古代人元素,得到第三个分外的成分

$('.orange').closest()// => []
$('.orange').closest('.apple')// => []
$('.orange').closest('li')// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')// => [<ul id="fruits"> ... </ul>]

.next()

收获第一个本成分之后的同级元素

$('.apple').next().hasClass('orange')
//=> true

.nextAll()

获得本成分之后的全数同级元素

$('.apple').nextAll()
//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]

.prev()

获取本成分以前的率先个同级成分

$('.orange').prev().hasClass('apple')
//=> true

.preAll()

$('.pear').prevAll()
//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]

获得本成分前的持有同级成分

.slice(start,[end])

赢得选定范围内的因素

$('li').slice(1).eq(0).text()
//=> 'Orange'

$('li').slice(1,2).length
//=> 1

.siblings(selector)

收获被增选的同级成分,不包含自身

$('.pear').siblings().length
//=> 2

$('.pear').siblings('.orange').length
//=> 1

.children(selector)

获被增选成分的子成分

$('#fruits').children().length
//=> 3

$('#fruits').children('.pear').text()
//=> Pear

.each(function(index,element))

迭代贰个cheerio对象,为各样相称成分试行一个函数。When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element.要提早跳出循环,重返false.

var fruits =[];

$('li').each(function(i, elem){
  fruits[i]= $(this).text();});

fruits.join(', ');
//=> Apple, Orange, Pear

.map(function(index,element))

迭代三个cheerio对象,为每种相配成分施行一个函数。Map会再次回到一个迭代结果的数组。the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element

$('li').map(function(i, el){
// this === el
return $(this).attr('class');
}).join(', ');
//=> apple, orange, pear

.filter(selector)

.filter(function(index))

迭代二个cheerio对象,滤出相称采用器或然是传进去的函数的因素。假设使用函数方法,这一个函数在被选拔的要素中实行,所以this指向的手势当前因素。

Selector:

$('li').filter('.orange').attr('class');
//=> orange

Function:

$('li').filter(function(i, el){
// this === el
return $(this).attr('class')==='orange';
}).attr('class')
//=> orange

.first()

会选拔chreeio对象的第二个成分

$('#fruits').children().first().text()
//=> Apple

.last()

$('#fruits').children().last().text()
//=> Pear

会选用chreeio对象的结尾三个成分

.eq(i)

经过索引筛选相称的成分。使用.eq(-i)就从最后二个因素向前数。

$('li').eq(0).text()
//=> Apple

$('li').eq(-1).text()
//=> Pear

返回值

####Loading首先你需求加载HTML。这一步对jQuery来讲是必得的,since jQuery operates on the one, baked-in DOM。通过Cheerio,大家须求把HTML document 传进去。

Miscellaneous

不属于任哪个地点方的DOM 元素方法

我们先来本人解析一下页面。大家要抓取其一页面中的录像,摄像的地方都在下载的按键里。其中一个下载按键的html的代码如下:

Security Considerations(安全注意事项)

###When I would use JSDOMCheerio 不会一举成功你的富不寻常。笔者人会利用JSDOM假如本人需求用二个在服务器上的浏览器碰到,特别是只要作者想要自动化一些效果测量检验。###API####大家将接纳的标识示例<ul id=“fruits”><li class=“apple”>Apple</li><li class=“orange”>Orange</li><li class=“pear”>Pear</li></ul>

cheerio

为服务器极度定制的,急迅、灵活、实行的jQuery核心达成.

下一场是行使cheerio分析html,找到想要的数据。

<div id="log">
  <h3>Content:</h3>
</div>
<script>
$(function () { 
  var $log = $( "#log" ),
    str = "hello, <b>my name is</b> jQuery.",
    html = $.parseHTML( str ),
    nodeNames = [];
  //添加已解析的HTML
  $log.append( html );
  //集合已解析HTML的节点名称
  $.each( html, function( i, el ) {
    nodeNames[i] = "<li>" + el.nodeName + "</li>";
  });
  // 插入节点名
  $log.append( "<h3>Node Names:</h3>" );
  $( "<ol></ol>" )
    .append( nodeNames.join( "" ) )
    .appendTo( $log );
})
</script>
var cheerio = require('cheerio'),
    $ = cheerio.load('<ul id="fruits">...</ul>');
.siblings(selector)

获得被挑选的同级成分,除去本人??

$('.pear').siblings().length
//=> 2
$('.pear').siblings('.orange').length
//=> 1

Loading

先是你需求加载HTML。这一步对jQuery来讲是必得的,since jQuery operates on the one, baked-in DOM。通过Cheerio,大家必要把HTML document 传进去。

那是首推:

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

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

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

Or as the root:

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

您也足以传递二个外加的靶子给.load()如果您需求更动任何的私下认可解析选项的话:

$ = cheerio.load('<ul id="fruits">...</ul>',{
    ignoreWhitespace:true,
    xmlMode:true});

那么些剖析选项皆以直接来源htmlparser ,因而任何在htmlparser里有效的选项在Chreeio里也是卓有效用的。暗中同意的选项如下:

{
    ignoreWhitespace:false,
    xmlMode:false,
    lowerCaseTags:false
}

注意:

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

Features

❤ 相似的语法:Cheerio 富含了 jQuery 宗旨的子集。Cheerio 从jQuery库中去除了具备DOM分裂性和浏览器窘迫的一部分,揭穿了它的确优雅的API。
ϟ 雷暴般的块:Cheerio 职业在贰个特别简单,一致的DOM模型之上。剖判,操作,呈送都变得不敢相信 无法相信的立时。基础的端到端的基准测验展现Cheerio 大致比JSDOM快八倍(8x)。
❁ 巨灵活: Cheerio 封装了十分的htmlparser。Cheerio 差不离能力所能达到剖判任何的 HTML 和 XML document。

选择如下命令安装cheerio

在3.0中,这种暗中同意行为已经被更动。若无一些名context,恐怕给定值为null 或 undefined,那么将应用贰个新的document。那有望会升高安全性,因为当HTML深入分析时,内嵌的事件将不会实行。一旦深入分析的HTML注入到文书档案中它会实践,不过那给工具贰个火候,遍历成立DOM和删除任何事物被视为不安全。这种革新并不适用于jQuery.parseHTML的中间接选举拔,因为他俩平日传递给当下文书档案。因而,如类似$( "#log" ).append( $( htmlString ) )的宣示,依然受制于恶意代码注入。

.prepend(content,[content,…])

$.root

突发性你想找到最上层的root成分,那么$.root()就能够得到:

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

Rendering

若是你想呈送document,你能应用html多功能函数。

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

假如你想呈送outerHTML,你能够使用 $.html(selector)

$.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:

$ = 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()//=>  <media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>

1. 该函数将应用原生的DOM成分成立函数把HTML字符串调换为二个DOM成分的成团,你可以将那一个DOM成分插入到文书档案中。

$('li').eq(0).text()
//=> Apple

$('li').eq(-1).text()
//=> Pear
.hasClass( className )

自己商议相称的成分是还是不是有付出的类名

$('.pear').hasClass('pear')
//=> true$('apple').hasClass('fruit')
//=> false$('li').hasClass('pear')
//=> true

cheerio中文API [参考]

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

.filter(function(index))

.prepend(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>

下一场实践

$.parseHTML() 函数用于将HTML字符串分析为相应的DOM节点数组。

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

Installationnpm install cheerio

图片 1

绝大大多的jQuery的API接受的HTML字符串将运营所满含在HTML中的脚本。jQuery.parseHTML不运维HTML中解析出来的台本,除非 keepScripts参数为true。不过,它还是是恐怕在大大多条件个中接地执行脚本,比如通过<img onerror>属性。调用者应该发掘到那点,并经过清理或防止任何不可靠赖来源的输入,如U福睿斯L或cookies,来幸免它。为了现在的兼容性,当keepScripts为不分明的或false时,调用者不应当依据于那几个技术来运转任何脚本内容。

.parents([selector])

.parents([selector])

获取通过选择器筛选相配的要素的parent会集。

$('.orange').parents().length
// => 2
$('.orange').parents('#fruits').length
// => 1
<a class="downbtn" href="http://mov.bn.netease.com/mobilev/2013/1/F/G/S8KTEF7FG.mp4" id="M8KTEKR84" target="_blank"></a>
参数 描述
htmlString String类型 需要解析并转为DOM节点数组的HTML字符串
context Element类型 指定在哪个Document中创建元素,默认为当前文档的document
keepScripts Boolean类型 指定传入的HTML字符串中是否包含脚本,默认为false
$.html('.pear')
//=> <li class="pear">Pear</li>

Utilities

Selectors

Cheerio的选择器用起来大致和jQuery同样,所以API也很一般。

$(selectior,[context],[root])

采取器在 Context 范围内寻觅,Context又在Root范围内搜寻。selector 和context可是是二个字符串表达式,DOM成分,和DOM成分的数组,也许chreeio对象。root 是见惯司空是HTML 文书档案字符串。

$('.apple','#fruits').text()
//=> Apple

$('ul .pear').attr('class')
//=> pear

$('li[class=orange]').html()
//=> <li class="orange">Orange</li>

jQuery.parseHTML使用原生方法将字符串转变为三个DOM节点的集中,然后能够插入到文书档案。 那几个艺术渲染全数尾随或指点文本(尽管只是空格)。 为了幸免尾随/前导空格被转移为文本节点,你能够通过将HTML字符串传递给jQuery .trim。

从采用的elements里去除贰个或七个有空格分开的class。假诺className 未有定义,全数的classes将会被删去,也可以传函数。

Manipulation

改动DOM结构的艺术

Manipulation

变动DOM结构的方法

.append(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>

.prepend(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>

.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] )

从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] )

获取成分的text内容,富含子成分。若是textString被内定的话,每种成分的text内容都会被轮换。

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

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

2. 若无一些名context参数,或该参数为null或undefined,则默以为当前document。假如创制的DOM成分用于另叁个文档,比如iframe,则应当钦赐该iframe的document对象。

要么经过传递字符串作为内容来加载HTML:

.remove( [selector] )

从DOM中去除相称的因素和它们的子成分。采取器用来筛选要刨除的要素。

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

计划要写一个公然课网址,缺少数据,就决定去和讯精晓课去抓取一些数码。

概念和用法

不属于别的地方的DOM 成分方法

.children(selector)

获被挑选成分的子元素

$('#fruits').children().length
//=> 3
$('#fruits').children('.pear').text()
//=> Pear

关键是抓取到网页之后怎么样取获得想要的数码吧?然后就意识了cheerio,用来深入分析html特别方便,就像在浏览器中运用jquery同样。

jQuery.parseHTML()函数的归来值为Array类型,重临深入分析内定HTML字符串后的DOM节点数组。

.filter(selector)

.toArray()

赢得富有的在DOM元素,转化为数组

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

我们将动用的号子示例

<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>

那是大家将会在颇具的API例子中用到的HTML标识

示例&说明

{
    ignoreWhitespace: false,
    xmlMode: false,
    lowerCaseTags: false
}
.preAll()

收获本成分前的兼具同级成分

$('.pear').prevAll()
//=> [<li class="orange">Orange</li>, <li class="apple">Apple</li>]

在是实际,大家能够在index.js中写入如下代码

.clone()

所谓工欲善其事,必先利其器,所以通读了cheerio的API,顺便翻译了一回,有个别地方因为知道的比比较少,不清楚怎么意思,保留了立陶宛语,希望各位不吝告诉笔者,然后共同把这几个翻译达成。

咱俩取到在那之中的href属性,只须求开展如下选拔就能够

检查相称的要素是否有付出的类名

.parent([selector])

赢得种种匹配成分的parent,可选拔性的通过selector筛选。

$('.pear').parent().attr('id')
//=> fruits
var cheerio = require("cheerio");
var server = require("./curl");

var url = "http://v.163.com/special/opencourse/englishs1.html"

server.download(url, function(data) {
  if (data) {
    //console.log(data);

    var $ = cheerio.load(data);
    $("a.downbtn").each(function(i, e) {
        console.log($(e).attr("href"));
    });

    console.log("done");
  } else {
      console.log("error");
  } 
});

在各样成分最前插入三个子成分

.eq(i)

因而索引筛选相称的因素。使用.eq(-i)就从最后三个要素向前数。

$('li').eq(0).text()
//=> Apple
$('li').eq(-1).text()
//=> Pear
var http = require("http");

// Utility function that downloads a URL and invokes
// callback with the data.
function download(url, callback) {
  http.get(url, function(res) {
    var data = "";
    res.on('data', function (chunk) {
      data += chunk;
    });
    res.on("end", function() {
      callback(data);
    });
  }).on("error", function() {
    callback(null);
  });
}

exports.download = download;
$('.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>
.closest([selector])

对此每一个集结内的要素,通过测量检验那些因素和DOM层级关系上的先世成分,获得第三个门户十一分的因素

$('.orange').closest()
// => []
$('.orange').closest('.apple')
// => []
$('.orange').closest('li')
// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')
// => [<ul id="fruits"> ... </ul>]
$("a.downbtn").attr("href");

要是你想呈送outerHTML,你能够应用 $.html(selector)

.removeClass([className])

从选择的elements里去除两个或多个有空格分开的class。要是className 未有定义,全部的classes将会被去除,也得以传函数。

$('.pear').removeClass('pear').html()
//=> <li class="">Pear</li>
$('.apple').addClass('red').removeClass().html()
//=> <li class="">Apple</li>

越来越多音信看这里

Miscellaneous

不属于任何地方的DOM 成分方法

.toArray()

得到具有的在DOM成分,转化为数组、

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

.clone()

克隆cheerio对象

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

其一摄像教程是follow-up Nettut的"How to Scrape Web Pages with Node.js and jQuery",用 cheerio而不是JSDOM+JQuery. 这些录制正是显得chreeio多牛B,多快的。

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

     npm install cheerio

  • JSDOM内建的分析太过于严峻: JSDOM附带的HTML剖判不可能管理很多马上的公众的网址。

  • JSDOM太慢:用JSDOM分析大型网址存在可知的延迟。

  • JSDOM太繁琐:JSDOM的对象是提供三个我们在浏览器里面看到的一致的 DOM 景况。小编从未有当真须求全部那个东西,小编只是想要贰个简练的,相似的办法去处理HTML。

.nextAll()

获得本成分之后的全体同级成分

$('.apple').nextAll()
//=> [<li class="orange">Orange</li>, <li class="pear">Pear</li>]

前一阵子看过一段时间的Node.js,何况Node.js也相比较符合做那个工作,就企图用Node.js去抓取数据。

得到每一种相配成分的parent,可选用性的经过selector筛选。

.each(function(index,element))

迭代二个cheerio对象,为各类相配成分推行二个函数。
When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element.
要提前跳出循环,再次来到false.

var fruits = [];
$('li').each(function(i, elem) {
  fruits[i] = $(this).text();
});
fruits.join(', ');
//=> Apple, Orange, Pear

Utilities

$.root

Sometimes you need to work with the top-level root element. To query it, you can use $.root().

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

$.contains( container, contained )

翻看cotained成分是还是不是是container成分的子成分

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

将字符串深入分析为DOM节点数组。context参数对chreeio没风趣,不过用来有限支撑APi的兼容性。

 

明日就到此地了有时机把前边的小程序完善成叁个网页爬虫

原稿链接:

Attributes获得和退换属性

.parent([selector])

.text( [textString] )

收获成分的text内容,包蕴子成分。倘若textString被钦点的话,每一个成分的text内容都会被沟通。

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

.eq(i)

.addClass(className)

日增class(es)给具有相称的elements.也得以传函数。

$('.pear').addClass('fruit').html()
//=> <li class="pear fruit">Pear</li>
$('.apple').addClass('fruit red').html()
//=> <li class="apple fruit red">Apple</li>

越多新闻看这里

$('#fruits').find('li').length
//=> 3

咱俩将利用的标识示例

<ul id=“fruits”>
  <li class=“apple”>Apple</li>
  <li class=“orange”>Orange</li>
  <li class=“pear”>Pear</li>
</ul>

那是我们将会在有着的API例子中用到的HTML标志

$('li').filter('.orange').attr('class');
//=> orange
$.contains( container, contained )

查阅cotained成分是或不是是container成分的子元素

通过索引筛选相配的因素。使用.eq(-i)就从最后一个要素向前数。

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

对于每个集合内的因素,通过测量检验那些元素和DOM层级关系上的祖辈成分,获得第多个地位非凡的因素

Rendering

一旦你想呈送document,你能利用html多效率函数。

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

如果您想呈送outerHTML,你能够选拔 $.html(selector)

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

默许的,html会让部分标签保持开标签的状态.有时候你想表现五个可行的XML文书档案.例如上边那么些:

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

然后为了表现这一个XML,你需求使用xml
本条函数:

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

获得选定范围内的要素

.map(function(index,element))

迭代二个cheerio对象,为各样相配成分实践三个函数。Map会重回四个迭代结果的数组。
the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element

$('li').map(function(i, el) {
  // this === el
  return $(this).attr('class');
}).join(', ');
//=> apple, orange, pear

.hasClass( className )

.empty()

清空叁个成分,移除全体的子元素

$('ul').empty()
$.html()
//=> <ul id="fruits"></ul>
$('.orange').closest()
// => []
$('.orange').closest('.apple')
// => []
$('.orange').closest('li')
// => [<li class="orange">Orange</li>]
$('.orange').closest('#fruits')
// => [<ul id="fruits"> ... </ul>]
.slice(start,[end])

赢得选定范围内的要素

$('li').slice(1).eq(0).text()
//=> 'Orange'
$('li').slice(1, 2).length
//=> 1

.after(content,[content,…])

What about JSDOM

自笔者写cheerio 是因为本身发觉本身要好对JSDOM更加的沮丧。对于笔者来说,总是会一回又三遍的磕碰多少个难题。
JSDOM内建的分析太过火严俊: JSDOM附带的HTML深入分析不可能管理相当多当即的众生的网址。

JSDOM太慢:用JSDOM深入分析大型网址存在可知的延期。

JSDOM太累赘:JSDOM的靶子是提供三个我们在浏览器里面看到的同样的 DOM 遭逢。作者从未有真正要求持有那一个事物,小编只是想要多个粗略的,相似的办法去管理HTML。

.append(content,[content…])

.last()

会选择chreeio对象的末梢多少个因素

$('#fruits').children().last().text()
//=> Pear
$('#fruits').children().length
//=> 3

$('#fruits').children('.pear').text()
//=> Pear
.first()

会采用chreeio对象的第贰个因素

$('#fruits').children().first().text()
//=> Apple