我可以將 jQuery 與 Node.js 一起使用嗎？

Question

是否可以使用 jQuery 在服務器端使用 Node.js 選擇器/DOM 操作？

Answer 1

更新（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);

注意：原始答案沒有提到您還需要使用npm install jsdom

更新（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的庫

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 ）：

節點爬蟲.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-litecheerio

然后最后：

節點爬蟲.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

這是開始制作自己的爬蟲時應該知道的基本知識:-)

---

使用的庫

• 請求
• iconv-lite
• 啦啦隊
• 異步

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

也適用於 gulp，因為它基於 node.js。

Answer 7

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

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

Answer 8

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 9

可以使用以下方法安裝 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 10

您必須使用新的 JSDOM API 獲取窗口。

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

Answer 11

首先安裝它

npm install jquery -S

安裝后，您可以如下使用

import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();

你可以查看我在這里寫的完整教程： https : //medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7

Answer 12

警告

Golo Roden提到的這個解決方案是不正確的。 這只是幫助人們使用 Node 應用程序結構運行他們的實際 jQuery 代碼的快速修復，但這不是 Node 哲學，因為 jQuery 仍在客戶端而不是服務器端運行。 我很抱歉給出了錯誤的答案。

---

您還可以使用 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();
      });

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 應用程序有幫助。

我的解決方案（解決方法）：

npm install jquery

在您的index.js文件中：

var jQuery = $ = require('jquery');

在您的.js文件中，以這種方式編寫您的 jQuery 函數：

jQuery(document).ready(function() {

Answer 15

模塊jsdom是一個很好的工具。 但是如果你想評估整個頁面並在它們的服務器端做一些時髦的事情，我建議在它們自己的上下文中運行它們：

vm.runInContext

所以網站上的require / CommonJS類的東西不會破壞你的 Node 進程本身。

您可以在此處找到文檔。 干杯!

Answer 16

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

希望這對您或任何遇到此類問題的人有所幫助。

Answer 17

是的， 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

Answer 18

我沒有任何額外的包或代碼，手動簡單地完成了它。

npm i jquery

然后我將jquery.min.js文件從node_modules/jquery/dist目錄復制到public/js

<script type='text/javascript' src='/js/jquery.min.js'></script>
<script>
  $(document).ready(function() { console.log( "ready!" ); });
</script>

它會起作用的。 測試它

注意復制/粘貼文件不是理想的事情，您可以通過將文件啟用為 static 來啟用文件作為 static 文件，以便 expressJS 可以讀取它。 但是我直接復制到static public目錄下比較方便。

Answer 19

不。將瀏覽器環境移植到節點需要很大的努力。

我目前正在研究單元測試的另一種方法是創建 jQuery 的“Mock”版本，該版本在調用選擇器時提供回調。

通過這種方式，您可以在沒有實際 DOM 的情況下對 jQuery 插件進行單元測試。 您仍然需要在真實瀏覽器中進行測試以查看您的代碼是否可以正常工作，但是如果您發現瀏覽器特定問題，您也可以輕松地在單元測試中“模擬”這些問題。

准備好展示后，我會將其推送到 github.com/felixge。

Answer 20

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

之前嘗試在nodejs中使用canvas2d，最后放棄了。 nodejs 默認不支持它，而且安裝它太難了（很多很多......依賴）。 在我使用 Electron 之前，我可以輕松地使用我以前所有的 browserjs 代碼，甚至是 WebGL，並將結果值（例如結果 base64 圖像數據）傳遞給 nodejs 代碼。

Answer 21

從來沒聽說過。 DOM 是客戶端的事情（jQuery 不解析 HTML，而是解析 DOM）。

以下是一些當前的 Node.js 項目：

https://github.com/ry/node/wiki ( https://github.com/nodejs/node )

SimonW 的djangode非常酷...

Answer 22

另一種方法是使用Underscore.js 。 它應該提供您可能希望從 JQuery 提供服務器端的內容。