node环境下如何使用jquery？

最新推荐文章于 2025-04-27 12:50:19 发布
原创 最新推荐文章于 2025-04-27 12:50:19 发布 · 1w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#node #环境 #使用 #引入 #jquery

本文介绍如何通过Node.js环境下的JSDom加载一个简单的HTML文档，并引入jQuery进行DOM操作测试，确保jQuery可以在非浏览器环境中正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

（测试环境：node 7.6.0       npm  5.6.0            jquery  3.3.1              jsdom  11.6.2）


第一步，下载jquery包

              命令：npm install jquery 


第二步 , 下载jsdom包

              命令：npm install jsdom


第三步，我们新建一个index.js

             代码如下：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);
const $ = require('jQuery')(window);
console.log($); //测试jquery是否可以正常工作

第四步：执行命令 node index.js

             查看输出信息：

              

              证明jquery可以正常使用了；


NodeJs中使用jQuery
技术博客记录
01-20 1267
// const $ = require('jquery')(require("jsdom").jsdom().defaultView);//老版本 // 参考https://www.cnblogs.com/DonaHero/p/10001804.html const jsdom = require('jsdom'); const {JSDOM} = jsdom; const {document} = (new JSDOM('<!doctype html><html><bo..
node下使用jquery
12-20 1206
node使用jquery的两种方式 在node下，使用jquery有两种方法： 使用jsdom模拟一个window对象 使用cheerio，cheerio只实现了jquery的dom部分功能，相当于jquery的一个子集，jquery还包含网络请求、bom等更为丰富的API。 这两种方法各有利弊，jsdom的方式非常完善稳妥，jquery久经考验，但它的缺点在于速度较慢；cheeri...
node.js(接jquery篇)
weixin_44210475的博客
10-18 1233
node.js js写后台的，不依赖浏览器（不依赖DOM,BOM）,原生js可以 nodejs软件 装好之后node -v:显示版本说明装好了 node 相当于浏览器控制台（不能保存，了解即可） node执行方式 下面是要运行的代码： for(var i = 0 ; i<3;i++){ console.log("大傻吊"); } cd 文件夹路径 ；然后node 文件名执行该文件； [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igTqtQ34-160
nodejs脚本使用jQuery
csdn_meng的博客
01-07 825
首先创建一个文件夹 在文件夹下执行下面的命令 # 执行后一路回车就行 npm init # 然后安装依赖 npm i jsnode jquery 完成后在文件夹下创建一个index.js文件 此时该文件夹下结构如下: / …/node_modules …package-lock.json …package.json index.js代码 const jsdom = require('jsdom') const {JSDOM} = jsdom; const {document} = (ne.
nodejs中如何导入jQuery
最新发布
aini_lovee的博客
04-27 277
随着Node.js的流行，许多开发者开始探索其在日常前端开发中的应用。虽然Node.js是一个后端环境，但我们依然可以在项目中使用一些前端库，如jQuery。这篇文章将阐述如何在Node.js中导入和使用jQuery，并提供相关代码示例。
Node.js中使用jQuery的做法
10-21
在Node.js环境中使用jQuery并不是直接像在浏览器中那样无缝集成，因为Node.js是一个服务器端的JavaScript运行环境，它并不包含浏览器中的DOM（文档对象模型）和Window对象。然而，由于jQuery主要是为了解决前端开发...
node.js+jQuery实现用户登录注册AJAX交互
10-19
Node.js与jQuery结合使用就是前后端分离的一个实践。 知识点四：EJS模板引擎 EJS是一种模板引擎，用于在Node.js中生成HTML页面。它允许嵌入JavaScript代码，并可与Node.js的Express框架无缝配合。案例中的login.ejs...
教你如何在Node.js中使用jQuery
10-21
在Node.js环境中使用jQuery技术知识点 首先，需要明确的是，jQuery主要是在浏览器端运行的JavaScript库，用来简化DOM操作、事件处理、动画效果以及提供Ajax操作等功能。然而，在Node.js环境下，由于jQuery的运行...
DreamOnMessenger:使用Node.js jQuery和Bootstrap的基于套接字的Messenger
03-27
首先，Node.js是DreamOnMessenger的基础，它是一个基于Chrome V8引擎的JavaScript运行环境，以事件驱动、非阻塞I/O模型而著称，非常适合构建高性能的网络应用，尤其是实时通信系统。在DreamOnMessenger中，Node.js...
不使用flash播放器,使用jquery播放flv视频.zip
01-22
标题中的“不使用flash播放器,使用jquery播放flv视频.zip”表明了这个压缩包包含的资源是关于在网页中使用jQuery技术而非Flash播放FLV视频的方法。Flash曾是流媒体视频的标准，但随着HTML5的普及，Flash逐渐被淘汰，...
npm下如何使用jQuery
X_ABU的博客
05-13 5944
安装jQuery npm i jquery -S 配置webpack.config.js const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') // 第一步 引入webpack const webpack = require('webpack') const htmlWebPackPlugin = new HtmlWebPackPlugin({ template: path..
node环境下如何引入Jquery
CrazyQiQi的博客
05-02 2572
node环境下如何引入Jquery–参考文章 下载jquery包 命令 npm install jquery@3.3.1 下载jsdom包 命令 npm install jsdom@11.6.2 新建index.js文件,并添加代码进行测试 const jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } =...
在Node.js中使用jQuery示例
wsdhla的专栏
05-20 396
查看npm官网：https://www.npmjs.com/package/jquery 安装jQuery npm i -g jquery 需要使用jsdom模拟document，安装jsdom npm i -g jsdom 编码： const jsdom = require('jsdom'); const {JSDOM} = jsdom; const {document} = (new JSDOM('<!doctype html><html>&lt..
【杂记】nodejs导入jQuery的方法
Stella的博客
07-30 4263
安装jQuery依赖包 npm install jQuery 安装jsdom依赖包 npm install jsdom 在需要使用jQuery的时候导入相关包，例如，在使用ajax的时候则需要先加载jQuery.js(先后顺序很重要),否则就会报错：$xx is not defined 这样的错误。 如下导入： &lt;script type="text/javascript" src...
JAVA前端JQuery、Vue、Node.js
weixin_42142764的博客
02-20 973
JAVASCRIPT框架封装JQueryVueNode.js JQuery JQuery是一个javascript的框架，是对javascript的一种封装，通过JQuery可以非常方便的操作html的元素，要使用Jquery需要导入一个第三方的javascript库 jquery.js（在< script src=“url”>< /script>） 形式：$ (funct...
node 中使用Jquery
qq_29738977的博客
07-24 297
node 中使用Jquery npm install jquery@3.2.1 npm install jsdom@10.1.0 const jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } = new JSDOM(`<!DOCTYPE html>`); const $ = require('jq...
npm install jquery之后如何在页面中引入
qq_53613764的博客
03-08 881
第二步: 在相应的页面中 import $ from "jquery"；第一步: npm install jquery。之后就可以在全局中使用$来应用jquery。
vue-full-calendar
weixin_43839718的博客
02-12 629
今天做了一个dome，是关于vue-full-calendar的，在公司用的是angluar，自己在家自学vue，遇到了个问题，上网查了好久，都没有遇到的问题，后来找了一个大神的demo，对比了一下，发现了个特别低级的错误，记录一下
如何在使用Vite构建的Vue项目中正确地引入和使用jQuery？
11-18
在使用Vite构建的Vue项目中引入并使用jQuery，可以按照以下步骤操作： 1. **安装jQuery**： 首先需要通过npm或yarn在项目中安装jQuery。如果使用npm，可以在命令行中运行： ``` npm install jquery ``` 或者使用yarn： ``` yarn add jquery ``` 2. **引入jQuery到入口文件**： Vite默认的配置可能会将第三方库排除在外，你需要手动指定`vite.config.js`来处理外部依赖。在`build.rollupOptions.imports`里添加对jQuery的处理： ```js import resolve from 'rollup-plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; export default { build: { rollupOptions: { input: 'src/main.js', plugins: [ resolve(), commonjs({ include: ['node_modules/**'], }), ], }, }, }; ``` 3. **在Vue组件中使用jQuery**： 现在你可以像在任何JavaScript环境中一样，在Vue组件内部导入并使用jQuery了。例如，在`src/components/YourComponent.vue`中： ```vue <template> <!-- ... --> </template> <script> import $ from 'jquery'; // 使用 this.$ = $ 进行注入，如果你的组件需要直接操作DOM export default { mounted() { // 在这里使用jQuery $('body').append('<p>Hello, jQuery!</p>'); }, } </script> ``` 请注意，由于Vue本身已经提供了一套完整的DOM操作API，所以在现代Vue应用中推荐优先使用原生的Vue API，除非有特殊需求，才考虑使用jQuery。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值