是否可以使用Node.js在服务器端使用jQuery选择器/ DOM操作?
答案 0 :(得分:538)
更新(27-Jun-18):看起来有jsdom
的重大更新导致原始答案不再有效。我找到了this回答,解释了现在如何使用jsdom
。我已复制下面的相关代码。
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
注意:原始答案没有提及您需要使用npm install jsdom
安装jsdom
更新(2013年末):官方jQuery团队最终接管了npm上jquery
包的管理:
npm install jquery
<击> 然后:击>
<击>require("jsdom").env("", function (err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
击> <击> 撞击>
答案 1 :(得分:54)
是的,您可以使用我创建的名为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);
答案 2 :(得分:50)
在撰写本文时,还保留了Cheerio。
设计核心jQuery的快速,灵活和精益实现 专门针对服务器。
答案 3 :(得分:38)
现在可以使用jsdom。只需看看examples目录中的jquery示例。
答案 4 :(得分:32)
这是我在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 install request cheerio
并运行(假设上面的脚本在文件crawler.js
中):
node crawler.js
某些网页将以特定编码包含非英文内容,您需要将其解码为UTF-8
。例如,巴西葡萄牙语(或拉丁语的任何其他语言)的页面可能会编码在ISO-8859-1
(a.k.a。“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 cheerio
最后:
node crawler.js
下一步是关注链接。假设您要在SO上列出每个热门问题的所有海报。您必须先列出所有热门问题(例如上面的例子),然后输入每个链接,解析每个问题的页面以获取相关用户的列表。
当您开始关注链接时,可以开始callback hell。为了避免这种情况,你应该使用某种承诺,期货或其他什么。我总是将async保留在我的工具箱中。所以,这是一个使用async的爬虫的完整示例:
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 install request async cheerio
运行测试:
node 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
这是开始制作自己的抓取工具时应该知道的基本知识: - )
答案 5 :(得分:19)
npm install jquery
在node.js代码中将它绑定到变量$
(例如 - 我习惯了):
var $ = require("jquery");
做的事情:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
也适用于gulp,因为它基于node.js。
答案 6 :(得分:17)
我相信现在的答案是肯定的 https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
答案 7 :(得分:11)
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);
});
答案 8 :(得分: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的引用**:
答案 9 :(得分:5)
您必须使用新的JSDOM API获取窗口。
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
答案 10 :(得分:3)
我的工作代码是:
npm install jquery
然后:
global.jQuery = require('jquery');
global.$ = global.jQuery;
或如果窗口存在,则:
typeof window !== "undefined" ? window : this;
window.jQuery = require('jquery');
window.$ = window.jQuery;
答案 11 :(得分:2)
警告强>
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();
});
答案 12 :(得分:2)
首先安装
npm install jquery -S
安装后,您可以按以下方式使用它
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
您可以在此处查看完整的教程:https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
答案 13 :(得分:1)
模块jsdom是一个很棒的工具。但是如果你想评估整个页面并在服务器端做一些时髦的东西我建议在他们自己的上下文中运行它们:
vm.runInContext
因此,网站上require
/ CommonJS
之类的内容不会破坏您的Node流程。
您可以找到文档here。干杯!
答案 14 :(得分:1)
从jsdom v10开始,不推荐使用.env()函数。在尝试了很多需要jquery的事情后,我就像下面这样做了:
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
希望这可以帮助您或任何遇到过这类问题的人。
答案 15 :(得分:0)
这些解决方案都没有对我的Electron App有所帮助。
我的解决方案(解决方法):
npm install jquery
在您的index.js
文件中:
var jQuery = $ = require('jquery');
通过以下方式在.js
文件中编写您的jQuery函数:
jQuery(document).ready(function() {
答案 16 :(得分:0)
是的,jQuery
可以与Node.js
一起使用。
将jQuery包含在节点项目中的步骤:-
npm i jquery --save
在代码中包含jQuery
import jQuery from 'jquery';
const $ = jQuery;
我确实一直在node.js项目中使用jquery,尤其是在chrome扩展的项目中。
例如https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
答案 17 :(得分:0)
您可以使用Electron,它允许混合浏览器和节点。
之前,我尝试在nodejs中使用canvas2d,但最后我放弃了。 nodejs默认不支持它,并且很难安装它(许多...依赖)。 在我使用Electron之前,我可以轻松使用我以前的所有browserjs代码,甚至是WebGL,并将结果值(例如结果base64图像数据)传递给nodejs代码。
答案 18 :(得分:0)
没有。将浏览器环境移植到节点将会付出相当大的努力。
我正在研究单元测试的另一种方法是创建jQuery的“Mock”版本,只要调用选择器就会提供回调。
这样你就可以在不实际拥有DOM的情况下对你的jQuery插件进行单元测试。您仍然需要在真实的浏览器中进行测试,看看您的代码是否可以正常运行,但如果您发现浏览器特定的问题,您也可以轻松地“模拟”单元测试中的代码。
一旦它准备好显示,我会把东西推到github.com/felixge。
答案 19 :(得分:-10)
不是我知道的。 DOM是客户端的东西(jQuery不解析HTML,但是DOM)。
以下是一些当前的Node.js项目:
http://wiki.github.com/ry/node
SimonW的djangode真是太酷了......
答案 20 :(得分:-18)
另一种方法是使用Underscore.js。它应该从JQuery提供你可能想要的服务器端。