脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → NodeJS使用jQuery选择器操作DOM

NodeJS使用jQuery选择器操作DOM

 更新时间：2015年02月13日 15:58:38   投稿：hebedich  
这篇文章主要介绍了NodeJS使用jQuery选择器操作DOM的相关资料,需要的朋友可以参考下

注* 这是一个两年多的“老”项目，可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的

cheerio

快速，灵活，在服务器端使用的jQuery。

简介

测试你的服务器端HTML:

复制代码 代码如下:

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

安装

npm install cheerio

功能

❤熟悉的语法：Cheerio实现了jQuery核心的一个子集。Cheerio 从jQuery库中删除了所有的DOM不一致和浏览器兼容支持，呈现其真正华丽的API。

ϟ极快：Cheerio 使用一个非常简单的，一致的DOM模型。这样解析，操作和呈现就会带来令人难以置信的性能提升。初步的端至端的基准测试表明Cheerio比JSDOM快大概8倍。

❁令人难以置信的灵活性：兼容htmlparser2API。Cheerio可以解析几乎所有的HTML或XML文档。

JSDOM怎么样?

我写Cheerio，因为我对JSOM越来越感到失望。对于我来说，有我一次又一次的碰到三大症结：

•JSDOM内置的解析器是太过严格：JSDOM捆绑的HTML解析器现在不能处理很多流行的网站。

•JSDOM太慢：解析大网站,JSDOM有明显的延迟。

•JSDOM感觉太沉重：JSDOM的目的是提供一个跟我们在浏览器中看到的相同的DOM环境(注* 可执行JavaScript)。我从来没有真的需要这些东西，我只想要一个简单的，熟悉的方式做HTML操作。

什么时侯使用JSDOM

Cheerio无法解决你所有的问题。如果我需要在一个类似浏览器的环境中工作,我仍然会使用JSDOM，特别是当在服务器上想要进行自动化功能测试时。

API

我们将使用的示例HTML代码：

复制代码 代码如下:

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

加载

首先，你需要在加载HTML。这一步在jQuery是自动完成的，因为jQuery的运行在一个，即时的DOM环境中。我们需要将HTML文档传入Cheerio中。

这是首选的方法：

复制代码 代码如下:

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

另外，您还可以将HTML作为字符串参数传入:

复制代码 代码如下:

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

或者作为根结点

复制代码 代码如下:

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

您也可以通过一个额外的.load（）加载您需要修改的默认解析选项：

复制代码 代码如下:

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

这些解析选项是直接从 htmlparser2 借来的，因此可以在htmlparser2使用的任何参数在cheerio也有效。默认的选项是：

复制代码 代码如下:

{
    normalizeWhitespace: false,
    xmlMode: false,
    decodeEntities: true
}

Selectors选择器

Cheerio的选择器几乎与jQuery的完全相同，所以API是非常相似的。

复制代码 代码如下:

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

选择器按照: 根[root,可选]->上下文[context,可选]->选择器 的顺序选择元素。选择器和上下文可以是一个字符串表达式，DOM元素，DOM元素数组。根通常document 是 HTML文档的根元素。

像jQuery一样,此选择方法会从起点遍历和操纵文档。它是从文档中选择的元素的主要方法，但不像jQuery那样构建CSSSelect库(Sizzle 选择器)。

复制代码 代码如下:

$('.apple', '#fruits').text()
//=> Apple
$('ul .pear').attr('class')
//=> pear
$('li[class=orange]').html()
//=> <li class="orange">Orange</li>

Attributes属性

获取和修改属性的方法。

.attr( name, value )

用于获取和设置属性的方法。仅获取匹配的第一个元素的属性值。如果设置属性的值设置为null，则删除该属性。您也可以像jQuery一样传入map和function。

复制代码 代码如下:

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

.data( name, value )

用于获取和设置数据属性的方法。获取或设置仅用于匹配的第一个元素。

复制代码 代码如下:

$('<div data-apple-color="red"></div>').data()
//=> { appleColor: 'red' }
$('<div data-apple-color="red"></div>').data('data-apple-color')
//=> 'red'
var apple = $('.apple').data('kind', 'mac')
apple.data('kind')
//=> 'mac'
.val( [value] )

用于获取和设置input，select和textarea值的方法。注：支持map，function尚未添加。

复制代码 代码如下:

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

更多API请参见官网

您可能感兴趣的文章:

相关文章

  • 深入探秘jquery瀑布流的实现

    深入探秘jquery瀑布流的实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。
    2016-01-01
  • 基于jQuery实现火焰灯效果导航菜单

    基于jQuery实现火焰灯效果导航菜单

    这篇文章主要介绍了jQuery实现火焰灯效果导航菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery操作cookie的示例代码

    jQuery操作cookie的示例代码

    这篇文章主要介绍了jQuery操作cookie的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • jQuery实现可兼容IE6的遮罩功能详解

    jQuery实现可兼容IE6的遮罩功能详解

    这篇文章主要介绍了jQuery实现可兼容IE6的遮罩功能,详细分析了jQuery遮罩层的布局、样式及功能实现技巧,需要的朋友可以参考下
    2017-09-09
  • CSS3,HTML5和jQuery搜索框集锦

    CSS3,HTML5和jQuery搜索框集锦

    小编收集了13个有用的CSS3,HTML5和jQuery搜索表单脚本来帮助大家从头开始创建一个搜索框。希望能够帮助到大家，让我们一起来看看吧！
    2014-12-12
  • jquery.validate使用攻略 第二部

    jquery.validate使用攻略 第二部

    jQuery.validate.js API说明
    2010-07-07
  • 遍历jquery对象的代码分享

    遍历jquery对象的代码分享

    今天遇到一个问题需要获取tagName，使用jquery，查询了一下，大家说用$("dd").attr("tagName")能获取到，但是得到的返回值是undefined，于是又查询饿了许久，返回遍历了一下jquery封装的对象
    2011-11-11
  • jQuery实现百度登录框的动态切换效果

    jQuery实现百度登录框的动态切换效果

    这篇文章主要介绍了jQuery实现百度登录框的动态切换效果,需要的朋友可以参考下
    2017-04-04
  • jquery弹窗时禁止body滚动条滚动的例子

    jquery弹窗时禁止body滚动条滚动的例子

    今天小编就为大家分享一篇jquery弹窗时禁止body滚动条滚动的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 教你一步步用jQyery实现轮播器

    教你一步步用jQyery实现轮播器

    相信大家应该都会看到在各大网站上都有一个轮播器的效果，于是自己不禁也想做一个，查了资料，看了轮播器的原理，慢慢的试着做了做，最终效果勉勉强强，但还是想总结出来，或许对有需要的朋友们带来一定的帮助，下面来一起看看吧。
    2016-12-12

最新评论