在NodeJs中使用jQuery？

有时候在项目中需要使用jq在node中，但是使用起来却不是那么友好，那么现在该怎么做？改写JQ插件？将JQ插件打包成npm包，再在项目中进行引用？显然这些相比较于难度都比较大。接下来介绍一种简单的方法。

首先安装jquery以及jsdom。

jquery：https://www.npmjs.com/package/jquery

jsdom：https://www.npmjs.com/package/jsdom

命令如下：

npm install jquery

npm install jsdom

安装完成之后，在项目中引入

const $ = require('jquery')(require("jsdom").jsdom().defaultView);

以上代码为老版本的代码，在jsdom更新后，不可用

新版本的使用方法为：

const jsdom = require('jsdom');

const {JSDOM} = jsdom;

const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;

global.document = document;

const window = document.defaultView;

const $ = require('jquery')(window);

将这些文件引入到jq所在的目录中，并且将原来jq声明的立即执行函数进行替换。

(function($) {

//some var

//some function

//dosometing

})(jQuery);

最终的形式类似于这样

const jsdom = require('jsdom');

const {JSDOM} = jsdom;

const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;

global.document = document;

const window = document.defaultView;

const $ = require('jquery')(window);
//some var

//some function

//dosometing




然后可以根据node的写法，将自己的函数暴露出去。
												


											
NodeJs中使用jQuery？的更多相关文章
	

    
						
  1. 通读cheerio API ——NodeJs中的jquery
		
    通读cheerio API ——NodeJs中的jquery 所谓工欲善其事,必先利其器,所以通读了cheerio的API,顺便翻译了一遍,有些地方因为知道的比较少,不知道什么意思,保留了英文,希望各 ...
    
		
    2. 
								
  2. nodejs中使用cheerio爬取并解析html网页
		
    nodejs中使用cheerio爬取并解析html网页 转 https://www.jianshu.com/p/8e4a83e7c376 cheerio用于node环境,用法与语法都类似于jquery ...
    
		
    3. 
						
  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
		
    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
    
		
    4. 
						
  4. nodejs中获取时间戳、时间差
		
    Nodejs中获取时间戳的方法有很多种,例如: new Date().getTime() Date.now() process.uptime() process.hrtime() 平时想获取一个时间戳 ...
    
		
    5. 
						
  5. 在Nodejs中如何调用C#的代码
		
    最近需要在Nodejs中用到C#的代码,从网上了解到可以采用Edgejs来实现Nodejs与C#的代码交互, 直接复制网上的代码运行总是出各种错,填了不少坑,现在把自己的案例代码大致整理一下,方便以后 ...
    
		
    6. 
						
  6. IE7中使用Jquery动态操作name问题
		
    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
    
		
    7. 
						
  7. 关于angularjs中的jQuery
		
    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
    
		
    8. 
						
  8. nodejs 中自定义事件
		
    经常看到 req.on('error', function(){...}); 这种代码. 在nodejs中,可以使用 EventEmitter来实现. 具体的关键词有如下几个: var reqEven ...
    
		
    9. 
						
  9. 在.NET中使用JQuery 选择器精确提取网页内容
		
    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 如何给apk文件签名
			
    1.签名的意义 为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package Name来混淆替换已经安装的程序,我们需要对我们发布的APK文件进行唯一签名,保证我们每次发布的版本 ...
    
			
    2. 
						
  2. snmp实用篇
			
    简单网络管理协议(SNMP)是 TCP/IP协议簇的一个应用层协议.在1988年被制定,并被Internet体系结构委员会(IAB)采纳作为一个短期的网络管理解决方案:由于 SNMP的简单性,在Int ...
    
			
    3. 
						
  3. webpack插件url-loader使用规范
			
    其实说到性能优化,他的范围太广了,今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧. 简单说下工作中遇到的问题吧,我们做的一个项目中首页用了十多张图片,每张图片都是一个静态资源,所 ...
    
			
    4. 
						
  4. PowerDesigner16 修改表或表的字段Name的时候不让Code不自动跟着变
			
    在修改表或表的字段Name的时候不让Code不自动跟着变,设置如下: tools-> General   Options-> Dialog 去掉勾选 Name To Code mirror ...
    
			
    5. 
						
  5. PowerDesigner16 活动图
			
    活动是某件事情正在进行的状态.活动在状态机中表现为一个由一系列动作组成 的非原子的执行过程. 活动图是一种描述系统行为的图,它用于展现 参与行为的实体所进行的各种活动的顺序关系.活动图(Activit ...
    
			
    6. 
						
  6. RSA host key has changed 错误
			
    RSA host key for mysharebook.cn has changed and you have requested strict checking.Host key verifica ...
    
			
    7. 
						
  7. 省队集训 Day7 选点游戏
			
    [题目大意] 维护一个$n$个点的图,$m$个操作,支持两个操作: 1. 连接$(u, v)$这条边: 2. 询问$u$所在的联通块中,能选出的最大合法的点数. 一个方案是合法的,当且仅当对于所有被选 ...
    
			
    8. 
						
  8. iOS多线程 
iOS开发Demo(示例程序)源代码
			
    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址(2013年12月29日更新版)   iOS程序源代码下载链接:01.大任务.zip22 ...
    
			
    9. 
						
  9. urllib3使用指南
			
    对比urllib,用urllib3处理http请求十分方便,可以嵌入web服务后端用于访问其它web实例提供的接口 一.安装 pip install urllib3 二.初始化 导入urllib3 i ...
    
			
    10. 
						
  10. 加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC
			
    1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...
    
			
    11.