专栏首页极客编程Cheerio,服务端的JQuery。

Cheerio,服务端的JQuery。

什么是cheerio?

cheerio 是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现。它工作于DOM模型上,且解析、操作、呈送都很高效。

安装

  npm install cheerio

PS:本课程环境中,已经进行了安装。

特征 熟悉的语法:cheerio实现了jQuery核心的一个子集。 cheerio删除了从jQuery库中和不同浏览器不一致的东西,揭示其真正华丽的API。

极快:cheerio适用于一个非常简单的,一致的DOM模型。 这样解析,操作和呈现是令人难以置信的高效率。

灵活性:cheerio可以解析几乎所有的HTML或XML文档。

hello world

为了更加直观的学习 cheerio ,我们开始 hello world:

//模块引用
var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');
 
$('.title').text('Hello there!');
$('.title').addClass('Welcome');
//输出
console.log($.html());

输出:<h2 class="title Welcome">Hello there!</h2>

解析:.load() 引入我们要解析的html。text() 设置 h2 中的文本。addClass() 给 h2 添加新的class。

载入 html

要想解析html,首先我们需要加载html。这一步在jQuery是自动完成的,因为jQuery的运行在一个即时的DOM环境中。我们需要将HTML文档传入Cheerio中,那么如何加载呢?

这是需要加载的html:

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

PS: 在后文示例中加载的 html,都将是上述中的这段代码。

首选:

 var cheerio = require('cheerio'),
    $ = cheerio.load(html);

将HTML作为字符串参数传入:

$ = require('cheerio');
$('ul', html);

或者作为根结点:

$ = require('cheerio');
$('li', 'ul', html);

小结

本文简单的认识了 cheerio 和 如何载入需要解析的 html 的几种方法。 PS:cheerio 的 API 和jQuery是非常相似的,可以说是服务器端的jQuery,下面举两个简单的例子说明下:

selectors

语法:

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

语法讲解: selector 是目标选择器, context 是目标选择器的上下文, root 是上下文 context 的上下文。 selector 和 context 可以是 字符串表达式 、 dom元素 、 dom元素集合 、 cheerio对象 ,而 root 一般都是html文档字符串。

PS: 通常参数context和root都会省略。

这个方法一般用于遍历和处理DOM。像jQuery中,它是对DOM中选择目标选择器的主要方法,但又不同于jQuery是建立在顶部的 CSSSelect 库,它实现了大部分的Sizzle选择器。

PS:Sizzle是一个纯javascript CSS选择器引擎。jquery1.3开始使用sizzle。感兴趣的同学可以自己了解一下。

示例:

$('.apple')
// 选择器定位到class 为apple的目标
 
$('ul .pear')
// 选择器定位到 ul 中 class 为 pear 的目标
 
$('li[class=orange]')
// 选择器定位到 li 中 class 为arange的目标
 
看到上述中的选择器的API是不是和jQuery中很相似。

attribute

在应用中我们经常会遇到需要对属性进行获取和修改,现在我们来讲解一下都有哪些方法。

.attr(name[, value])

这个方法可以获取和设置属性,第二个参数是可选的。当第二个参数不存在时表示获取属性的值,当有带有第二个参数时,表示设置属性的值。如果设置一个属性的值设置为null ,则删除该属性。如下示例:

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

内容参考: http://www.hubwiz.com/course/5636b7a11bc20c980538e998/ ps:可在线免费练习。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用PHP生成以太坊钱包和密钥对 原

    本文将提供有关如何生成ECDSA私钥的指南,然后使用PHP7.0++导出到以太坊钱包地址。

    笔阁
  • Meteor——不一般的全栈开发平台!

    Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个 采用单一开发语言的全栈开发的平台:开发者可以使用JavaScr...

    笔阁
  • 8个写完以后就可以让你成为顶尖开发者的有趣应用程序

    只有不断的努力才能成为伟大的开发人员。想象一下 ——你不能通过阅读大量关于健身,成为一个身体健康的人。你实际上需要去健身房,把时间和汗水放进去!同样的概念也适...

    笔阁
  • MapReduce之分区器(Partitioner)

      Partitioner 组件可以对 MapTask后的数据按Key进行分区,从而将不同分区的Key交由不同的Reduce处理。这个也是我们经常会用到的功能。

    用户4919348
  • 基于 Go 语言开发在线论坛(四):通过 Cookie + Session 实现用户认证

    在此之前,我们现在 handlers 目录下创建一个 helper.go 文件,用于定义一些全局辅助函数(主要用在处理器中):

    学院君
  • 1056 组合数的和 (15 分)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    韩旭051
  • Java反射机制深入详解

      反射是java语言的一个特性,它允程序在运行时(注意不是编译的时候)来进行自我检查并且对内部的成员进行操作。例如它允许一个java的类获取他所有的成员变量和...

    Java团长
  • 你能说说Java中的反射机制吗?

    JavaBean 是 reflection 的实际应用之一,它能让一些工具可视化的操作软件组件。这些工具通过 reflection 动态的载入并取得 Java ...

    好好学java
  • Java中的反射机制你知道多少?

    JavaBean 是 reflection 的实际应用之一,它能让一些工具可视化的操作软件组件。这些工具通过 reflection 动态的载入并取得 Java ...

    用户5546570
  • 面试官问我:Java反射是什么?我回答竟然不上来......

    参考链接: Java中的util.Arrays与Reflection.Array的示例

    用户7886150

扫码关注云+社区

领取腾讯云代金券