jQuery 不适用于 Express
Posted
技术标签:
【中文标题】jQuery 不适用于 Express【英文标题】：jQuery not working with 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 库来表达是什么意思？你的意思是仅仅包括 【参考方案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 并且那个标签会加载它。我不要你的钱。您可以阅读此***.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');
)
【讨论】：
以上是关于jQuery 不适用于 Express的主要内容，如果未能解决你的问题，请参考以下文章