如何使 jQuery 3.6.0 与 node.js v12.16.1 一起工作

Question

我正在使用一个名为 Replit 的在线 IDE，并且 node.js 项目在节点版本上运行：12.16.1。但我试图让 jQuery 3.6.0 与这个版本的 node.js 一起工作，但是我在网上找到的每一种方法都不起作用。虽然我没有使用 html，但Pug 是一种在 html 文件中插入变量的方法。

我尝试使用的第一种方法是使用 cdn 导入 jQuery：

script(src='https://code.jquery.com/jquery-3.6.0.slim.min.js', integrity='sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=', crossorigin='anonymous')

第二种方法是使用jQuery npm包：

const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM();
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;

const $ = global.jQuery = require( 'jquery' );
console.log( `jQuery ${jQuery.fn.jquery} working! Yay!!!` );

console.log() 确实有效，但代码运行不正确。

代码如下：

const { JSDOM } = require( 'jsdom' );
const jsdom = new JSDOM();
const { window } = jsdom;
const { document } = window;
global.window = window;
global.document = document;

const $ = global.jQuery = require( 'jquery' );
console.log( `jQuery ${jQuery.fn.jquery} working! Yay!!!` );

const users = require('../../../data/user')
const sessions = require('../../../data/session')

let session = {}
let user = {}

$('#createSessionButton').on("click", async () => {
  session = await sessions.create({
    name: $('#session').val(),
    players: $('#players').val(),
    rewardMultiplier: $('#multiplier').val()
  })

  user = await users.create({
    session: session.name,
    username: $('#username').val(),
    email: $('#email').val(),
    password: $('#password').val(),
    isAdmin: true,
    total: 0
  })
})

$('#joinSessionButton').on("click", async () => {
  session = await sessions.findOne({ name: $('#session').val() })

  user = await users.findOne({
    session: session.name,
    username: $('#username').val(),
    email: $('#email').val(),
    password: $('#password').val()
  }) || await users.create({
    session: session.name,
    username: $('#username').val(),
    email: $('#email').val(),
    password: $('#password').val(),
    isAdmin: false,
    total: 0
  })
})

module.exports = session, user

基本上，一旦按下按钮，就会获取多个输入 html 标记的文本值，使用它们的 id（在 pug 中，您使用 # 来声明 id => 示例：h3#test Test == Test)，发送到数据库。

这是使用此脚本的 pug/jade 文件之一：

doctype
html(lang="en")
  head
    include ../includes/header.pug
    link(rel="stylesheet", href="/css/session.css")

  body
    h1.mb-3.font-weight-normal(style="margin-top: 7.5vw; margin-bottom: 5vw;") Please fill in each and everyone of these fields to create a session
      form(style="max-width: 480px; margin: auto;")

        h2.mt-5 Session Information
        h5 (This will create a session for you and your friends to play together)
        input#session.form-control.mb-3(type="text", placeholder="Session Name", required)
        input#players.form-control.mb-2(type="number", min='5', max='25', placeholder="Number of Players", required)
        input#multiplier.form-range(type='range', value="1", min='0.5', max='10', step='0.5', onchange="rangevalue.value = `Reward Multiplier : ${value}`")
        output#rangevalue.h4 Reward Multiplier : 1

        h2.mt-5 User Information
        h5 (This will create or fetch your account)
        input#username.form-control.mb-3(type="text", placeholder="Username", required)
        input#email.form-control.mb-3(type="email", placeholder="Email Address", required)
        input#password.form-control(type="password", placeholder="Password", required)

      div.mt-3.center
        a.btn.btn-lg.btn-primary(href='/session') <-- Back
        a#createSessionButton.btn.btn-lg.btn-primary.btn-block(href="/session/dashboard") Create session -->
        
    script(src="/js/session.js")

但是 jQuery 在我的项目中根本不起作用，即使它在 Web 浏览器控制台中起作用。如果有人可以帮助我，那就太棒了！！！

这里是网络浏览器的链接：Website

Answer 1

@HereticMonkey 说的是真的。您问题顶部的script() 行是正确的方法，因为它将jquery 加载到您的网页，而不是您的服务器。它从 CDN 加载它。这很好。

jquery 使用浏览器端（客户端）javascript 来操作网页中内容的文档对象模型 (DOM)。

你的 nodejs 服务器中没有 DOM（除非你正在做一些非凡的事情——你不是）所以服务器中的 jquery 毫无意义。