我可以用Node.js使用jQuery吗？

是否有可能在服务器端使用Node.js使用jQuery选择器/ DOM操作？

Answer 1

更新 ：（2013年末）官方的jQuery团队终于接管了对npm的jquery包的管理：

 npm install jquery 

然后：

 require("jsdom").env("", function(err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); }); 

Answer 2

是的，你可以使用我创建的名为nodeQuery的库https://github.com/tblobaum/nodeQuery

 var Express = require('express') , dnode = require('dnode') , nQuery = require('nodeQuery') , express = Express.createServer(); var app = function ($) { $.on('ready', function () { // do some stuff to the dom in real-time $('body').append('Hello World'); $('body').append('<input type="text" />'); $('input').live('click', function () { console.log('input clicked'); // ... }); }); }; nQuery .use(app); express .use(nQuery.middleware) .use(Express.static(__dirname + '/public')) .listen(3000); dnode(nQuery.middleware).listen(express); 

Answer 3

在写这篇文章的时候，还保存着Cheerio 。

为服务器专门设计的核心jQuery的快速，灵活和精益执行。

Answer 4

现在可以使用jsdom了 。 在示例目录中查看他们的jquery示例。

Answer 5

使用Cheerio的简单爬虫

这是我的公式在Node.js中创建一个简单的爬虫。 这是想要在服务器端进行DOM操作的主要原因，也许这就是你来到这里的原因。

首先，使用request下载要解析的页面。 下载完成后，将其处理为cheerio并开始DOM操作，就像使用jQuery一样。

工作示例：

 var request = require('request'), cheerio = require('cheerio'); function parse(url) { request(url, function (error, response, body) { var $ = cheerio.load(body); $('.question-summary .question-hyperlink').each(function () { console.info($(this).text()); }); }) } parse('http://stackoverflow.com/'); 

这个例子将在控制台上显示SO主页上显示的所有主要问题。 这就是为什么我喜欢Node.js及其社区。 它不能比这更容易:-)

安装依赖关系：

npm安装请求cheerio

并运行（假设上面的脚本在文件crawler.js ）：

节点crawler.js

---

编码

某些网页在某些编码中会有非英文内容，您需要将其解码为UTF-8 。 例如，巴西葡萄牙语（或任何拉丁语来源的其他语言）的页面可能会被编码为ISO-8859-1 （aka“latin1”）。 当需要解码时，我告诉request不要以任何方式解释内容，而是使用iconv-lite来完成这项工作。

工作示例：

 var request = require('request'), iconv = require('iconv-lite'), cheerio = require('cheerio'); var PAGE_ENCODING = 'utf-8'; // change to match page encoding function parse(url) { request({ url: url, encoding: null // do not interpret content yet }, function (error, response, body) { var $ = cheerio.load(iconv.decode(body, PAGE_ENCODING)); $('.question-summary .question-hyperlink').each(function () { console.info($(this).text()); }); }) } parse('http://stackoverflow.com/'); 

运行之前，安装依赖关系：

npm安装请求iconv-lite欢呼声

最后：

节点crawler.js

---

以下链接

下一步将是跟随链接。 假设你想列出SO上每个顶级问题的所有海报。 您必须首先列出所有热门问题（上面的例子），然后输入每个链接，解析每个问题的页面，以获取涉及的用户列表。

当你开始下面的链接， 回调地狱可以开始。 为了避免这一点，你应该使用某种承诺，期货或其他。 我总是在我的工具栏中保持异步 。 所以，下面是一个使用异步的爬行器的完整示例：

 var url = require('url'), request = require('request'), async = require('async'), cheerio = require('cheerio'); var baseUrl = 'http://stackoverflow.com/'; // Gets a page and returns a callback with a $ object function getPage(url, parseFn) { request({ url: url }, function (error, response, body) { parseFn(cheerio.load(body)) }); } getPage(baseUrl, function ($) { var questions; // Get list of questions questions = $('.question-summary .question-hyperlink').map(function () { return { title: $(this).text(), url: url.resolve(baseUrl, $(this).attr('href')) }; }).get().slice(0, 5); // limit to the top 5 questions // For each question async.map(questions, function (question, questionDone) { getPage(question.url, function ($$) { // Get list of users question.users = $$('.post-signature .user-details a').map(function () { return $$(this).text(); }).get(); questionDone(null, question); }); }, function (err, questionsWithPosters) { // This function is called by async when all questions have been parsed questionsWithPosters.forEach(function (question) { // Prints each question along with its user list console.info(question.title); question.users.forEach(function (user) { console.info('\t%s', user); }); }); }); }); 

运行之前：

npm安装请求异步cheerio

运行测试：

节点crawler.js

示例输出：

 Is it possible to pause a Docker image build? conradk Thomasleveil PHP Image Crop Issue Elyor Houston Molinar Add two object in rails user1670773 Makoto max Asymmetric encryption discrepancy - Android vs Java Cookie Monster Wand Maker Objective-C: Adding 10 seconds to timer in SpriteKit Christian K Rider 

这就是开始制作自己的抓取工具的基本知识:-)

---

使用的库

• 请求
• 的iconv -精简版
• cheerio
• 异步

Answer 6

在2016年的事情更容易。 用你的控制台安装jquery到node.js：

 npm install jquery 

绑定到变量$ （例如 – 我习惯了）在你的node.js代码：

 var $ = require("jquery"); 

做东西：

 $.ajax({ url: 'gimme_json.php', dataType: 'json', method: 'GET', data: { "now" : true } }); 

也适用于吞咽，因为它是基于node.js。

Answer 7

我相信现在的答案是肯定的。
https://github.com/tmpvar/jsdom

 var navigator = { userAgent: "node-js" }; var jQuery = require("./node-jquery").jQueryInit(window, navigator); 

Answer 8

jQuery模块可以使用：

 npm install jquery 

例：

 var $ = require('jquery'); var http = require('http'); var options = { host: 'jquery.com', port: 80, path: '/' }; var html = ''; http.get(options, function(res) { res.on('data', function(data) { // collect the data chunks to the variable named "html" html += data; }).on('end', function() { // the whole of webpage data has been collected. parsing time! var title = $(html).find('title').text(); console.log(title); }); }); 

Node.js中引用的jQuery **：

• http://quaintous.com/2015/07/31/jqery-node-mystery/
• http://www.hacksparrow.com/jquery-with-node-js.html

Answer 9

警告

Golo Roden提到的这个解决方案是不正确的 。 这只是一个快速的解决方案，帮助人们使用Node应用程序结构来运行实际的jQuery代码，但这不是Node的理念，因为jQuery仍然运行在客户端而不是服务器端。 我很抱歉给出了错误的答案。

---

你也可以用节点渲染Jade，并把你的jQuery代码放在里面。 这里是玉文件的代码：

 !!! 5 html(lang="en") head title Holamundo! script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js') body h1#headTitle Hello, World p#content This is an example of Jade. script $('#headTitle').click(function() { $(this).hide(); }); $('#content').click(function() { $(this).hide(); }); 

Answer 10

npm install jquery --save #note ALL LOWERCASE

npm install jsdom --save

 const jsdom = require("jsdom"); const dom = new jsdom.JSDOM(`<!DOCTYPE html>`); var $ = require("jquery")(dom.window); $.getJSON('https://api.github.com/users/nhambayi',function(data) { console.log(data); }); 

Answer 11

模块jsdom是一个很好的工具。 但是如果你想评估整个页面，并在服务器端做一些时髦的东西，我建议在他们自己的上下文中运行它们：

 vm.runInContext 

因此，像在现场的require / CommonJS不会吹你的节点过程本身。

你可以在这里找到文档。 干杯!

Answer 12

不，将浏览器环境移植到节点将是一项相当大的工作。

我目前正在研究单元测试的另一种方法是创建“模拟”版本的jQuery，当调用选择器时提供回调。

这样你可以单元测试你的jQuery插件，而不需要真正的DOM。 您仍然需要在真正的浏览器中进行测试，看看您的代码是否可以正常工作，但是如果您发现浏览器特定的问题，则可以轻松地在单元测试中“模拟”这些问题。

一旦准备好展示，我会把一些东西推给github.com/felixge。

Answer 13

我的工作代码是：

 npm install jquery 

接着：

 global.jQuery = require('jquery'); global.$ = global.jQuery; 

或者如果该窗口存在，则：

 typeof window !== "undefined" ? window : this; window.jQuery = require('jquery'); window.$ = window.jQuery; 

Answer 14

您可以使用Electron ，它允许混合browserjs和nodejs。

之前，我试图在nodejs中使用canvas2d，但最后我放弃了。 它不受nodejs默认支持，而且很难安装（很多… dependeces）。 在使用Electron之前，我可以轻松使用我以前的所有browserjs代码，甚至是WebGL，并将结果值（例如结果base64图像数据）传递给nodejs代码。

Answer 15

从来没听说过。 DOM是客户端的东西（jQuery不解析HTML，但DOM）。

以下是一些当前的Node.js项目：

http://wiki.github.com/ry/node

SimonW的djangode真是太酷了

Answer 16

另一种方法是使用Underscore.js 。 它应该提供你可能想要从JQuery服务器端。