Node.js中的jQuery方法
刚开始在node.js中编码。 我做了几页（login，注册，博客等）。
如果我想要一个效果：1.我将鼠标hover在“新闻”button上，一个滑块出现，
-
修改ejs标签中的图像（例如<％blog.image％>）（我不认为我可以在这里使用css）。
-
如果用户点击一个button（或任何其他事件）做某事。
-
现在在我的项目中，如果用户点击“login”，它会把他带到“/login”页面。 我GOOGLE“popuplogin窗体”，大多数教程是为jQuery。
在使用jQuery的时候，它给出了一个错误：“jQuery需要一个窗口”，所以我使用了jsdom，但转向了cheerio（许多用户推荐它）。 我浏览了文档，但找不到“点击”事件方法。 我怎样才能完成上述任务？
注意 ：我没有要求上述任务的具体代码。 我在jQuery前端完成了这些。 我只想知道如何在node.js中开始使用jQuery。
在这里，您已经使用Node js作为networking服务器，它只负责为您提供您所要求的内容。 从页面到静态资产包括图像，字体，CSS甚至js文件。
当你想要一个用户login例如你已经configuration你的索引页面有一个“login”链接，使他到一个/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与你的页面进行交互。 所以让我们configuration节点也服务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提供给客户端，因为它知道如何提供静态资源。 （尽pipe你可以使用cdn来代替jquery静态文件）
现在你可以在你的clinet端代码上使用jQuery，例如当用户点击“login”时，默认行为是转到由后端节点提供服务的“/ login”页面，但现在你可以阻止它从客户端和显示他们popup（模式或对话框）login窗体（在这里我已经使用引导模态 ）：
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>
这些是渐进式增强的原理。 正如你所看到的，当你点击“login”时，我们将它们发送到login页面，但如果他们有一个现代的浏览器（启用JavaScript），我们向他们展示一个模态login表单。
在这里，我们手动完成了所有的客户端编码。 你的myScripts.js文件变得越来越大，也是你的客户端模板。 这就是为什么有Angular ， Ember和其他客户端框架和工具，如骨干 ， 反应 ，…