我可以使用jQuery和Node.js吗?

Is it possible to use jQuery selectors/DOM manipulation on the server-side using Node.js?

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

18 个解决方案

#1

Update: (late 2013) The official jQuery team finally took over the management of the jquery package on npm:

更新:(2013年末)官方jQuery团队最终接管了npm的jQuery包管理:

npm install jquery

Then:

然后:

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

    var $ = require("jquery")(window);
});

#2

Yes you can, using a library I created called nodeQuery https://github.com/tblobaum/nodeQuery

是的，您可以使用我创建的一个名为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);

#3

At the time of writing there also is the maintained Cheerio.

在写作的时候，也有保持的Cheerio。

Fast, flexible, and lean implementation of core jQuery designed specifically for the server.

为服务器专门设计的核心jQuery的快速、灵活和精益的实现。

#4

Using jsdom you now can. Just look at their jquery example in the examples directory.

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

#5

A simple crawler using Cheerio

This is my formula to make a simple crawler in Node.js. It is the main reason for wanting to do DOM manipulation on the server side and probably it's the reason why you got here.

这是我在Node.js中创建一个简单的爬虫的公式。这是希望在服务器端进行DOM操作的主要原因，这可能是您来这里的原因。

First, use request to download the page to be parsed. When the download is complete, handle it to cheerio and begin DOM manipulation just like using jQuery.

首先，使用请求下载要解析的页面。下载完成后，将其处理为cheerio，并开始使用jQuery进行DOM操作。

Working example:

工作的例子:

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://*.com/');

This example will print to the console all top questions showing on SO home page. This is why I love Node.js and its community. It couldn't get easier than that :-)

这个示例将打印到控制台，所有的问题都显示在主页上。这就是我喜欢Node的原因。js和它的社区。它不会比这更容易:-)

Install dependencies:

安装的依赖关系:

npm install request cheerio

npm安装请求好呀

And run (assuming the script above is in file crawler.js):

然后运行(假设上面的脚本是文件爬虫。js):

node crawler.js

节点crawler.js

---

Encoding

Some pages will have non-english content in a certain encoding and you will need to decode it to UTF-8. For instance, a page in brazilian portuguese (or any other language of latin origin) will likely be encoded in ISO-8859-1 (a.k.a. "latin1"). When decoding is needed, I tell request not to interpret the content in any way and instead use iconv-lite to do the job.

一些页面将会有非英语的内容在一个特定的编码中，你需要解码到UTF-8。例如，巴西葡萄牙语(或任何其他拉丁语来源)的页面很可能被编码为ISO-8859-1 (a.k.a。“latin1”中的一个)。当需要解码时，我告诉请求不要以任何方式解释内容，而是使用iconv-lite来完成任务。

Working example:

工作的例子:

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://*.com/');

Before running, install dependencies:

在运行之前,安装的依赖关系:

npm install request iconv-lite cheerio

npm安装要求iconv-lite cheerio。

And then finally:

最后:

node crawler.js

节点crawler.js

---

Following links

The next step would be to follow links. Say you want to list all posters from each top question on SO. You have to first list all top questions (example above) and then enter each link, parsing each question's page to get the list of involved users.

下一步是跟踪链接。比如说，你想要列出每个上面的问题的所有海报。您必须首先列出所有的首要问题(例如上面的例子)，然后输入每个链接，解析每个问题的页面以获得相关用户的列表。

When you start following links, a callback hell can begin. To avoid that, you should use some kind of promises, futures or whatever. I always keep async in my toolbelt. So, here is a full example of a crawler using async:

当您开始跟踪链接时，一个回调地狱就可以开始了。为了避免这种情况，你应该使用一些承诺，期货或者其他什么。我总是在我的工具带中保持异步。下面是一个使用async的爬行器的完整示例:

var
    url = require('url'),
    request = require('request'),
    async = require('async'),
    cheerio = require('cheerio');

var
    baseUrl = 'http://*.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);
            });
        });
    });
});

Before running:

跑步前:

npm install request async cheerio

npm安装请求async cheerio。

Run a test:

运行测试:

node crawler.js

节点crawler.js

Sample output:

样例输出:

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

And that's the basic you should know to start making your own crawlers :-)

这就是你应该知道的开始制作你自己的爬虫的基础:-)

---

Libraries used

• request
• 请求
• iconv-lite
• iconv-lite
• cheerio
• 恭喜恭喜
• async
• 异步

#6

in 2016 things are way easier. install jquery to node.js with your console:

在2016年，事情变得容易多了。安装jquery节点。js和你的控制台:

npm install jquery

bind it to the variable $ (for example - i am used to it) in your node.js code:

将其绑定到变量$(例如，我已经习惯了)在您的节点中。js代码:

var $ = require("jquery");

do stuff:

做的东西:

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

also works for gulp as it is based on node.js.

同样适用于gulp，因为它基于node.js。

#7

I believe the answer to this is now yes.
https://github.com/tmpvar/jsdom

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

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

#8

jQuery module can be installed using:

jQuery模块可以使用:

npm install jquery

Example:

例子:

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);
 });
});

References of jQuery in Node.js** :

在节点中引用jQuery。js * *:

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

#9

npm install jquery --save #note ALL LOWERCASE

npm安装jquery—保存#注释全部小写。

npm install jsdom --save

npm安装jsdom——保存

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);
});

#10

WARNING

警告

This solution, as mentioned by Golo Roden is not correct. It is just a quick fix to help people to have their actual jQuery code running using a Node app structure, but it's not Node philosophy because the jQuery is still running on the client side instead of on the server side. I'm sorry for giving a wrong answer.

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

---

You can also render Jade with node and put your jQuery code inside. Here is the code of the jade file:

您还可以使用node渲染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();
      });

#11

My working code is:

我的工作代码是:

npm install jquery

and then:

然后:

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

or if the window is present, then:

或者，如果窗户是存在的，那么:

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

#12

You have to get the window using the new JSDOM API.

您必须使用新的JSDOM API来获取窗口。

const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);

#13

The module jsdom is a great tool. But if you want to evaluate entire pages and do some funky stuff on them server side I suggest running them in their own context:

模块jsdom是一个很好的工具。但是如果你想评估整个页面并在服务器端做一些有趣的事情，我建议在他们自己的环境中运行它们:

vm.runInContext

So things like require / CommonJS on site will not blow your Node process itself.

因此，站点上的require / CommonJS不会影响您的节点进程本身。

You can find documentation here. Cheers!

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

#14

No. It's going to be quite a big effort to port a browser environment to node.

不。将浏览器环境移植到node将是一项很大的努力。

Another approach, that I'm currently investigating for unit testing, is to create "Mock" version of jQuery that provides callbacks whenever a selector is called.

另一种方法，我目前正在调查的单元测试，是创建一个jQuery的“Mock”版本，每当调用一个选择器时，它都会提供回调。

This way you could unit test your jQuery plugins without actually having a DOM. You'll still have to test in real browsers to see if your code works in the wild, but if you discover browser specific issues, you can easily "mock" those in your unit tests as well.

通过这种方式，您可以在不实际拥有DOM的情况下对jQuery插件进行单元测试。您仍然需要在真正的浏览器中进行测试，以查看您的代码是否在野外工作，但是如果您发现了特定于浏览器的问题，您也可以轻松地“模拟”那些在您的单元测试中。

I'll push something to github.com/felixge once it's ready to show.

一旦它准备好了，我就把它推给github.com/felixge。

#15

You can use Electron, it allows hybrid browserjs and nodejs.

你可以使用电子，它允许混合的浏览器和nodejs。

Before, I tried to use canvas2d in nodejs, but finally I gave up. It's not supported by nodejs default, and too hard to install it (many many ... dependeces). Until I use Electron, I can easily use all my previous browserjs code, even WebGL, and pass the result value(eg. result base64 image data) to nodejs code.

以前，我试着在nodejs中使用canvas2d，但最终我放弃了。它不支持nodejs的默认设置，并且很难安装它(很多很多……)dependeces)。在我使用电子之前，我可以很容易地使用所有以前的browserjs代码，甚至WebGL，并传递结果值(如。结果base64图像数据)到nodejs代码。

#16

As of jsdom v10, .env() function is deprecated. I did it like below after trying a lot of things to require jquery:

在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);

Hope this helps you or anyone who has been facing these types of issues.

希望这能帮助你或任何面对这类问题的人。

#17

Not that I know of. The DOM is a client side thing (jQuery doesn't parse the HTML, but the DOM).

据我所知没有。DOM是客户端的东西(jQuery并没有解析HTML，而是DOM)。

Here are some current Node.js projects:

这里是一些当前节点。js项目:

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

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

And SimonW's djangode is pretty damn cool...

SimonW的djangode非常酷…

#18

An alternative is to use Underscore.js. It should provide what you might have wanted server-side from JQuery.

另一种选择是使用Underscore.js。它应该提供您可能想要的JQuery服务器端。