当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《我可以在Node.js中使用jQuery吗?》经验,为你挑选了10个好方法。

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



1> Philippe Rat..:

更新(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团队终于jquery在npm 接管了包的管理:

npm install jquery

然后:

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


是否可以使用node.js中的jQuery ajax和npm模块?
不安装在Windows上(没有*重要*工作),在这种情况下我会推荐Cheerio模块:http://matthewmueller.github.com/cheerio/
这将返回`require("...").env不是函数`.
+1显示在哪里得到npm :)大多数人有一个坏习惯,只是提到东西,好像它应该是给定的(常识)
Node JQuery(coolaj86/node-jquery)在WINDOWS上不起作用
@Banderi跟我一样,有什么想法吗?错误:`TypeError:require(...).env不是函数`
JSDom通过重大更改更新了他们的API,但你仍然可以使用他们的旧API ... require('jsdom/lib/old-api').env(我从这里得到了这个:https://github.com/rstacruz /摩卡jsdom /问题/ 27#issuecomment-308793851
到目前为止,我能够使用Windows构建上下文.这对于Windows用户来说现在可以正常工作.

2> Thomas Bloba..:

是的,您可以使用我创建的名为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').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实际上是实时更改用户的页面,因此它甚至比人们预期的更酷.
@Logan nQuery基本上只是jquery.区别在于代码在服务器上运行,而不是将jquery代码传递给浏览器,它在服务器上运行代码并远程执行对连接浏览器的dom操作.另请注意,nQuery是一个实验性项目,虽然我会接受修改错误的pull请求,但它从未为任何特定目的或项目创建,因此它没有多少提交

3> Alfred..:

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

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


不支持像`:gt(1)`这样的很多选择器
为Cheerio +1.另一方面,jsdom在Windows上运行真的很痛苦.

4> 小智..:

使用jsdom你现在可以.只需在examples目录中查看它们的jquery示例即可.



5> Lucio Paiva..:
一个使用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):

node crawler.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

最后:

node crawler.js


以下链接

下一步是关注链接.假设您要在SO上列出每个热门问题的所有海报.您必须先列出所有热门问题(例如上面的代码),然后输入每个链接,解析每个问题的页面以获取相关用户的列表.

当你开始关注链接时,可以开始回调地狱.为了避免这种情况,你应该使用某种承诺,期货或其他什么.我总是在我的工具带中保持异步.所以,这是一个使用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安装请求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

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


使用的库

请求

的iconv - 精简版

cheerio

异步



6> low_rents..:

在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.


这事有进一步更新吗?有同样的问题.

7> 小智..:

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

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


我很遗憾地报告说要在jsdom上运行jQuery需要做更多的工作.然而Sizzle确实有用!我真的希望让jsdom保持尽可能轻,所以在这个时候添加像env.js这样的完整浏览器模拟并不是一个优先事项.

8> 小智..:

npm install jquery --save #note ALL LOWERCASE

npm install jsdom --save

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


$.getJSON('https://api.github.com/users/nhambayi',function(data) {
  console.log(data);
});



9> SUNDARRAJAN ..:

可以使用以下命令安装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


对我不起作用... C:\ ... \\node_modules\jquery\dist\jquery.js:31 throw new Error("jQuery需要一个带文档的窗口"); ^错误:jQuery需要一个带有document.exports文档的窗口(C:\ ...\WebContent\resources\js \node_modules\jquery\dist\jquery.js:31:12)

10> UnchartedWor..:

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

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

推荐阅读
重庆制造漫画社
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有