我可以在 Node.js 中使用 jQuery 吗?

IT技术 javascript jquery node.js
2021-02-05 22:23:20

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

6个回答

更新(27-Jun-18):看起来有一个重大更新jsdom导致原始答案不再有效。我发现这个答案解释了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);

注意:原始答案没有提到您还需要使用 jsdom 安装npm install jsdom

更新(2013 年末):官方 jQuery 团队终于接管了jquerynpm上的管理

npm install jquery

然后:

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

是否可以将 node.js 中的 jQuery ajax 与该 npm 模块一起使用?
2021-03-10 22:23:20
不安装在 Windows 上(没有大量工作),在这种情况下,我会推荐Cheerio模块:matthewmueller.github.com/cheerio
2021-03-13 22:23:20
参考链接,如果该模块不能在服务器上运行以进行 dom 遍历,那么需要什么?
2021-03-13 22:23:20
这返回require("...").env is not a function.
2021-04-04 22:23:20
到今天为止,我能够使用 Windows 很好地构建上下文。这对于 Windows 用户现在可能很好用。
2021-04-08 22:23:20

是的,您可以使用我创建的名为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);
请注意,nodeQuery 实际上是在实时更改用户的页面,因此它比人们想象的更酷。
2021-03-22 22:23:20
@Logan nQuery 基本上只是 jquery。不同之处在于代码在服务器上运行,而不是将 jquery 代码交付给浏览器,而是在服务器上运行代码,并对连​​接的浏览器远程执行 dom 操作。另请注意,nQuery 是一个实验项目,虽然我会接受修复错误的拉取请求,但它从未为任何特定目的或项目而创建,因此它没有太多提交
2021-03-29 22:23:20
@ThomasBlobaum不是为我工作,错误:, express = Express.createServer();TypeError: Express.createServer is not a function任何想法?
2021-04-03 22:23:20
当我在这里偶然发现时,我正在搜索类似的东西......我刚刚查看了 nQuery 和 jquery 节点包,nQuery 在一年前更新,而 jquery 是昨天...... nQuery 不再开发了吗?jquery 会像 nQuery 一样影响客户端吗?有没有人尝试过它们?
2021-04-09 22:23:20
@ThomasBlobaum 看起来您还没有获得最新版本的 Express。npm install --save express在您的命令提示符下尝试
2021-04-09 22:23:20

在撰写本文时,还有维护的Cheerio

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

Cheerio 可以使用延迟事件和 ajax 调用吗?
2021-03-23 22:23:20
不支持很多选择器,如 :gt(1)
2021-03-25 22:23:20
@Hoffmann,我花了一秒钟为您检查文档。不,不是的。Cheerio 只有与 DOM 相关的方法。
2021-03-29 22:23:20
根据我的经验,这个效果最好。它比 JSDOM 快很多。
2021-04-03 22:23:20

使用 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

并运行(假设上面的脚本在 file 中crawler.js):

节点爬虫.js


编码

某些页面将包含特定编码的非英语内容,您需要将其解码为UTF-8. 例如,巴西葡萄牙语(或任何其他源自拉丁语的语言)的页面可能会被编码为ISO-8859-1(又名“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

然后最后:

节点爬虫.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

运行测试:

节点爬虫.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

这是开始制作自己的爬虫时应该知道的基本知识:-)


使用的库

2016 年的事情要容易得多。使用控制台将 jquery 安装到 node.js:

npm install jquery

将它绑定到$node.js 代码中的变量(例如 - 我已经习惯了):

var $ = require("jquery");

做东西:

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

也适用于 gulp,因为它基于 node.js。

@AJP,你确定你是先做的npm install jquery
2021-03-21 22:23:20
@AJP 好吧,这很奇怪。
2021-03-23 22:23:20
您使用的是什么版本的节点?在 Mac 上,Node 6.10.2,jquery 2.2.4,var $ = require("jquery"); $.ajax // undefined (暂时不赞成)。
2021-03-26 22:23:20
是的。 > console.log(require("jquery").toString());给了我工厂函数:function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); } 我必须在 jsdom 中使用上面的答案: stackoverflow.com/a/4129032/539490
2021-04-01 22:23:20
我得到与@AJP 完全相同的工厂函数。你用的是什么版本的 jquery,@low_rents?
2021-04-02 22:23:20