Angular6开发：引入jquery

痛定思痛。 2021-09-28 04:16 443阅读 0赞

# Angular6开发：引入jquery #

## 方法一：npm安装 ##

第一步：进入项目目录，下载jquery

npm install--save jquery

在angular-cli.json 中引入 jquery.min.js

“scripts”: [“../node_modules/jquery/dist/jquery.min.js”]

第二步：进入项目目录，下载@types/jquery

npm install @types/jquery --save

第三步：前两步成功的话，会在package.json文件中多处这两行

"@types/jquery":"^3.2.12",
    "jquery":"^3.2.1",

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]

**第四步**：在需要使用jquery的地方引用就好了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]

## 方法二：js文件导入 ##

１．下载 jquery.min.js 放到 assets/jquery下

２．引入jquery: “scripts”: \[“assets/jquery/jquery.min.js”\]

３．在 typings.d.ts 下新增两句

declare var $: any;
    
    declare var jQuery: any;

４．这样你就可以直接使用 $ 了，当然你也可以通过这样的方式引入 bootstrap　而不是使用 npm 安装引入

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]: /images/20210923/818fe1975aff487bbea82a85252c0fe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]: /images/20210923/83067115d48542d798c1cf32985b5ca9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery引入----练习

jQuery引入----练习 html <!DOCTYPE html> <html> <head> <title

忘是亡心i/ 2024年03月22日 11:09/ 0 赞/ 45 阅读

相关 angular6 mysql_Angular6项目搭建

安装工具： Nodejs, npm 最新版, https://nodejs.org/en/ Angular CLI, npm install -g @angu

布满荆棘的人生/ 2022年11月03日 05:44/ 0 赞/ 177 阅读

相关开发随笔6 - JQuery

jQuery 的 append 方法特定情况下,在IE中会失效,已经在IE6和IE8上出现此问题. 采用 $('\xxx').html($('\xxx).html(

左手的ㄟ右手/ 2022年09月19日 10:50/ 0 赞/ 141 阅读

相关 Angular4 - 引入第三方jquery

原文出处：[https://blog.csdn.net/it\_rod/article/details/78848311][https_blog.csdn.net_it_rod

太过爱你忘了你带给我的痛/ 2022年05月18日 08:30/ 0 赞/ 249 阅读

相关 angular6学习(四)：引入bootstrap样式框架

两种方法：第一种：引用链接 1、在index.html中添加bootstrap引用链接 bootstrap链接地址可在官网复制：[官网][Link 1] 引用的链接

秒速五厘米/ 2022年05月08日 23:06/ 0 赞/ 343 阅读

相关 Angular6开发移动商城App

Angular、React、Vue是目前最火爆的web前端开发三大框架，本课程将对比三大框架的优势、学习成本、市场流行度及占有率。学习Angular只需要有一定的JS基础，就能

偏执的太偏执、/ 2022年04月08日 11:23/ 0 赞/ 206 阅读

相关 Angular6.x 实战开发总结

最近的一段时间，撸了一些前端的东西，对于前端开发有了一些新的认识，下面主要针对Angular(主要是2.0以后的版本)这个开发框架来对前端的知识点进行一些简单

拼搏现实的明天。/ 2022年02月01日 14:41/ 0 赞/ 284 阅读

相关 Angular6开发学习：引入bootstrap样式框架

文章目录 Angular6开发学习：引入bootstrap样式框架第一种：引用链接第二种方法：安装bootstrap框架 Angu

爱被打了一巴掌/ 2021年09月28日 04:16/ 0 赞/ 344 阅读

相关 Angular6开发：引入jquery

Angular6开发：引入jquery 方法一：npm安装第一步：进入项目目录，下载jquery npm install--save jquery 在

痛定思痛。/ 2021年09月28日 04:16/ 0 赞/ 444 阅读

相关 layui引入jQuery

//第一种：主动加载jquery模块 layui.use(['jquery', 'layer'], function(){ var $ = lay

谁借莪１个温暖的怀抱￠/ 2021年09月23日 08:52/ 0 赞/ 641 阅读