Node.js中使用jQuery的做法


Posted in Javascript onAugust 17, 2016

首先,我们得安装jquery, npm install jquery 。安装后的版本是 3.1.0

接着,第一感觉我们会使用 var $ = require('jquery') 。

将以下代码保存为app.js

var $ = require('jquery')
$("body").append("<div>TEST</div>");
console.log($("body").html());

运行 node app.js 。提示错误:

Error: jQuery requires a window with a document

那么我们该怎么做呢?

在npm的jquery安装包首页 ,我们看到可以使用jsdom 进行模拟一个document。

require("jsdom").env("", function(err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
$("body").append("<div>TEST</div>");
console.log($("body").html());
});

运行,结果OK。

上面的代码,有一个让我不太舒服的地方就是要在回调函数中进行操作。那么我们如何做才可以不在回调函数中进行引入jquery呢?

var $ = require('jquery')(require("jsdom").jsdom().defaultView);
$("body").append("<div>TEST</div>");
console.log($("body").html());

一样运行OK。

Javascript 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
Vue组件开发技巧总结
Mar 04 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
微信小程序实现图片上传
May 23 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
学习Angular中作用域需要注意的坑
Aug 17 #Javascript
js enter键激发事件实例代码
Aug 17 #Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 #Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 #Javascript
在javascript中使用com组件的简单实现方法
Aug 17 #Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 #Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 #Javascript
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
javascript静态的url如何传递
2007/05/03 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Djang中静态文件配置方法
2015/07/30 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
利用python实现逐步回归
2020/02/24 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
python实现双链表
2022/05/25 Python