NodeJS使用jQuery选择器操作DOM_jquery

注* 这是一个两年多的“老”项目,可以让你在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请参见官网

时间: 2024-10-28 07:28:25

NodeJS使用jQuery选择器操作DOM_jquery的相关文章

NodeJS使用jQuery选择器操作DOM

 注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题: Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML:   代码如下: var cheerio = require('cheerio'), $ = c

浅谈jQuery 选择器和dom操作_jquery

浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

jQuery 选择器、DOM操作、事件、动画_jquery

Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

使用HTML5的JS选择器操作页面中的元素

使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>使用HTML5的JS选择器操作页面中的元素</title> </head> <body>

jQuery选择器选择dom元素

jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它 的每个操作符到底是干什么的,很容易出错,经过我的多次测试,终于对一些比较难理解或 容易出错的选择操作进行总结,既方便自己将来查询又方便初学者学习.如果哪里有不对的 还望大家帮我指出来,这里是一个相互学习的地方. 1. 先说说通过位置选择的几个 操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页 面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且

jQuery选择器全面总结

 本篇文章主要是对jQuery选择器进行了全面的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法      $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素   $("div")           选择所有的div标签元素,返回div元素数组   $(".myCla

jquery选择器大全

 jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房.得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性.当然想一下子掌握所有选择器也是很困难的,这个得靠实践和积累 选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1.简化代码的编写 2.隐式迭代 3.无须判断对象是否存在 其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQ

事件-jquery选择器this的问题

问题描述 jquery选择器this的问题 {foreach key=key item=item from=$hicList} {$item.NAME}设备正常运转 {/foreach} 这是html中的源代码,我想在每次点击a事件时就弹出dialog,并传值 $("".equipState span:nth-child(2)"").bind(""click""function(){ $("".tishi&

强大的jQuery选择器 (详解)[转]

from:http://bbs.chinaandroid.com/showtopic-89.aspx 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id") ·element 根据给定的元素名匹配所有元素.例如:$("div") ·.class 根据给定的类匹配元素.例如:$(".style1");  ·* 匹配所有元素.例如:$("*") ·selector1,selector2,selectorN 将每一