Node.js 中的 jQuery 方法答案

【问题标题】：jQuery Methods in Node.jsNode.js 中的 jQuery 方法
【发布时间】：2017-06-06 20:27:37
【问题描述】：

刚开始在 node.js 中编码。我做了几页（登录、注册、博客等）。

如果我想要一个效果： 1.我将鼠标悬停在“新闻”按钮上，一个滑块向下出现，

修改ejs标签中的图片（例如）（我想我不能在这里使用css）。
在用户单击按钮（或任何其他事件）时执行某项操作。
现在在我的项目中，如果用户点击“登录”，它会将他带到“/登录”页面。我用谷歌搜索了“弹出登录表单”，大多数教程都是针对 jQuery 的。

使用 jQuery 时，报错：“jQuery 需要一个窗口”，所以我使用了 jsdom，但改用了 Cheerio（许多用户推荐它）。我浏览了文档，但找不到“点击”事件方法。我怎样才能完成上述任务？

注意：我不是要求为上述任务提供特定代码。我已经用 jQuery 在前端完成了这些。我只想知道如何在 node.js 中开始使用 jQuery。

【问题讨论】：

jquery 在浏览器中非常有用 - 在我看来，它在服务器上的有用性为零 - 所以我想说，不要将 jQuery 用于服务器端 code
我同意@jaromanda。我已经完成了一些 Node.js 屏幕抓取类型的项目，其中我使用了一个名为cheerio (npmjs.com/package/cheerio) 的 NPM 包，它基本上是用于服务器端 Node.js 的 jQuery
nodejs 本身不显示网页，因此与用户没有直接交互，因此非常不清楚您在 node.js 中尝试使用 jQuery 做什么。一种猜测是，您应该将常规客户端 jQuery 嵌入到您的 nodejs 服务器发送到浏览器的网页中，然后浏览器将运行它。请记住，网页永远不会在 nodejs 上运行。 nodejs 的工作是将网页发送到浏览器，它们的 Javascript 就像所有客户端 Javascript 一样在浏览器中运行。
起初，我以为您可能正在尝试抓取一些数据并在抓取的数据上使用 jQuery，但是一旦您开始谈论单击按钮，这听起来像是客户端界面和操作。如果您真的想在服务器端全面“运行”网页，那么您需要一个模拟浏览器的环境。有一些 npm 模块可以部分做到这一点。
当您说“我应该在网页中嵌入常规客户端 jQuery”时，您的意思是创建一个 .js 文件，在其中编写 jquery 代码，然后在我的 app.js 中需要它（服务器端文件）？

标签： javascript jquery html css node.js

【解决方案1】：

在这里，您使用 Node js 作为网络服务器，它只负责为您提供您所要求的服务。从页面到静态资源包括图片、字体、css甚至js文件。

例如，当您希望用户登录时，您已将 index 页面配置为具有“登录”链接，该链接将他带到 /login 路由：

app.get('/', function(req, res){
  res.render('index', { title: 'home' });
});

index.ejs

<!DOCTYPE html>
<head>
  <title><%= title %></title>
</head>
<html>
  <body>
    <a class="btn" href="/login">LOGIN</a>
  </body>
</html>

现在，当您向http://yourdoamin.com/ 发出请求时，节点将为您提供此索引页面。但是这个页面是一个简单的页面，没有样式也没有脚本，但是您想使用 jQuery 与您的页面进行交互。因此，让我们配置节点以也为我们的 index 页面提供 jQuery：

app.use(express.static(__dirname + '/public'));

并使用您想要的样式和脚本制作公用文件夹：

/public
  /css
    bootstrap.css
    myStyles.css
  /js
    jQuery.js
    bootstrap.js
    myScripts.js
  /images
  /fonts

并在您的 index.ejs 中包含这些样式和脚本：

<!DOCTYPE html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/bootstap.css">
  <link rel="stylesheet" href="/css/myStyles.css">
</head>
<html>
  <body>
    <a class="btn" href="/login">LOGIN</a>
    <!-- scripts -->
    <script src="/js/jQuery.js"></script>
    <script src="/js/myScripts.js"></script>
  </body>
</html>

现在，当我使用索引页面向http://yourdoamin.com/ 发出请求时，节点还将向客户端提供jQuery，因为它知道如何提供静态资产。（尽管您可以使用 cdn 代替 jquery 静态文件）

现在您可以在您的客户端代码上使用 jQuery，例如，当用户单击“登录”时，默认行为是转到由后端节点提供的“/登录”页面，但现在您可以阻止它来自客户端-向他们展示一个弹出式（模态或对话框）登录表单（这里我使用了bootstrap modals）：

myScripts.js

$('.btn').click(function(event) {
  event.preventDefault();
  var modalTemplate = $('#modalTemplate').html();
  $('#modal').html(modalTemplate);
  $('#modal').modal('show');
});

index.ejs

<!DOCTYPE html>
<head>
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/bootstap.css">
  <link rel="stylesheet" href="/css/myStyles.css">
</head>
<html>
  <body>
    <div id="#modal" class="modal fade"></div>
    <a class="btn" href="/login">LOGIN</a>

    <!-- scripts -->
    <script src="/js/jQuery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/myScripts.js"></script>

    <!-- client-side tempates -->
    <script type="text/template" id="modalTemplate">
      <div class="modal-dialog">
        .
        <!-- look into bootstrap documentation -->
        .
      </div>
    <script>
  </body>
</html>

这些是Progressive enhancement 的原则。正如您所看到的，当单击“登录”时，我们会将他们发送到登录页面，但如果他们有现代浏览器（启用 javascript），我们会向他们显示模式登录表单。

在这里，我们手动完成了所有客户端编码。你的 myScripts.js 文件越来越大，你的客户端模板也越来越大。这就是为什么有Angular、Ember 和其他客户端框架和工具，如backbone、react、...

【讨论】：

这是一个非常详细的答案，谢谢！但是在 myScripts.js 中，我有：` $("input#submit").on("click",function() { var imageURL = $("#image").text(); console.log(imageURL) ; }` 它不工作！一个简单的 console.log 工作完美！
在网页上，我无法处理数据，只有 console.log 工作！有什么建议？ {title : "home"} 有必要吗？
什么类型的数据？这些数据来自哪里以及如何使用它们？然后我们可以决定如何操纵它们。请提供一个关于您的问题的最小示例，以便我们回答您的具体问题。
我有一个表单，用户在 ("input#image) 中输入图像 url，我想对 url 做一些事情（将其设置为背景等），但即使是 e.preventDefault()不工作。
终于让它工作了！我之前没有使用 $(document).ready(function() {..}) 。愚蠢的我！非常感谢，你帮了我这么多！