jQuery 不适用于 Express答案

【问题标题】：jQuery not working with ExpressjQuery 不适用于 Express
【发布时间】：2017-12-24 02:50:56
【问题描述】：

我的 jquery.js 适用于使用 JavaScript，但不适用于 jQuery。 jQuery 文件不起作用。

下面是我的 app.js

var express = require('express')

var app = express();

app.set('view engine', 'ejs')

app.get('/', function(req, res){
  res.sendfile(__dirname +'/views/index.html');
})

app.get('/about', function(req, res){
  res.send('this is the about page');
})

app.get('/roster', function(req, res){
  res.send('this is the roster page');
})

app.get('/contact', function(req, res){
  res.send('this is the conact page');
})


app.use(express.static('public'));

app.listen(3000);

下面是我的 index.html

<head>
  <script type="text/javascript" src="/js/jquery.js"></script>
  <link href="/css/index.css" rel="stylesheet" type="text/css" />

</head>
<p>hi<p>
<h1><a href="/contact">contact</a></h1>

<body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="yellow"></div>
        <div id="green"></div>
</body>

下面是我的 jQuery.js。我知道所有的路由都正确，因为我运行了一个警报 JavaScript 并且它工作正常。

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       });
   });
   $('div').click(function() {
       $(this).toggle(1000);
   });
});

【问题讨论】：

这是一个非商业的社区网站。不要给钱。
“任何帮助我解决这个问题的人，我都会向你开 5 美元” - 如果有 200 人回答，你准备好支付 1000 美元了吗？无论如何，您的页面上似乎没有包含 jQuery 库。
还有另一个库用于在 express 中使用 jQuery。参考这里github.com/cheeriojs/cheerio
"jquery 文件不工作。"关于堆栈溢出，这里不是一个好问题。请解释预期的行为是什么，观察到的行为是什么以及您需要帮助的确切问题是什么。此外，请解释您自己采取了哪些调试步骤以及从中学到了什么。此外，我们需要知道浏览器控制台中显示的错误。
对于 5 美元的报价，我深表歉意。我会确保我在这里发布的下一个问题会更专业。顺便说一句，添加 JQuery 库来表达是什么意思？你的意思是仅仅包括

标签： javascript jquery node.js express

【解决方案1】：

尝试将 jQuery 添加到您的页面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

修复你的 HTML 之后（你的元素应该都在 <body> 内并修复你的动画目标它可以工作。

$(document).ready(function() {
  $('div').mouseenter(function() {

    $(this).animate({
      height: 60
    });
  });
  $('div').mouseleave(function() {
    var h = ($(this).height() + '').replace('px', '');
    var hto = Number(h) - 10;
    $(this).animate({
      height: 20
    });
  });
  $('div').click(function() {
    $(this).toggle(1000);
  });
});

#red {
  width: 100%;
  height: 20px;
  background: red;
}

#blue {
  width: 100%;
  height: 20px;
  background: blue;
}

#yellow {
  width: 100%;
  height: 20px;
  background: yellow;
}

#green {
  width: 100%;
  height: 20px;
  background: green;
}

<!DOCTYPE html>
<html lang="html">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery.js"></script>
  <link href="/css/index.css" rel="stylesheet" type="text/css" />

</head>


<body>

  <p>hi</p>
      <h1><a href="/contact">contact</a></h1>
      <div id="red"></div>
      <div id="blue"></div>
      <div id="yellow"></div>
      <div id="green"></div>
</body>


</html>

【讨论】：

非常感谢！！！如果你想要 5 美元，请告诉我。无论哪种方式都有巨大的帮助。所以我认为它不起作用的原因是因为没有正确的 html 标头并忘记了这一点？
是的，你没有 jQuery 并且那个标签会加载它。我不要你的钱。您可以阅读此stackoverflow.com/help/someone-answers 并花一些时间熟悉此站点的工作原理。
当我在目录中安装 jquery localy 时它不会工作，奇怪不知道为什么

【解决方案2】：

检查是否添加了将 jquery 文件连接到主 javascript 文件的静态文件路径。它可能会起作用。

--全局安装 bower
--然后，凉亭安装jquery
--添加连接文件到HTML/pug文件的脚本标签，script(src='/js/main.js')

然后--在主js文件中，
app.use(express.static('/public'));

【讨论】：

【解决方案3】：

可能是因为 jQuery 没有绑定到动态元素。考虑使用静态元素的父选择器。

$('body').on("click", "red", func(e){

//do something 

});

等等等等等等

这显然取决于 jQuery 的加载情况。

另外，您的 HTML 格式不正确。没有 HTML 应该位于 </head> 和 <body> 之间

另外，请考虑在结束 </body> 标记之前调用您的库。

【讨论】：

【解决方案4】：

app.set('view engine', 'ejs')
app.use(express.static('./public'));

// use static middleware before all your routes


app.get('/', function(req, res){
  res.sendfile(__dirname +'/views/index.html');
})

app.get('/about', function(req, res){
  res.send('this is the about page');
})

app.get('/roster', function(req, res){
  res.send('this is the roster page');
})

app.get('/contact', function(req, res){
  res.send('this is the conact page');
})

【讨论】：