旅游景点 旅游攻略 生活知识 文化旅游 旅游景区 昆明旅游 桂林旅游 乡村旅游 上海旅游 知识问答

angular7 中引入jquery库(1.13)

时间:2024-10-23 15:55:49

1、方法一: 可以直接在index.html中通过 <script>标签引入jquery,这种方式引入的jquery是全局的变量,在所有的component中不用额外的声明或者导入就可以直接使用。

angular7 中引入jquery库(1.13)angular7 中引入jquery库(1.13)angular7 中引入jquery库(1.13)

2、方法二:【第一步】在workspace 根目录的angular.json这个文件中, 找到我们的“code”这个剐疫柩缓项目的scripts这个配置项,加入 我们要导入的jquery文件的路径,【第二步】在需要导入jquery的component中,声明我们的jquery,declare var $: any;【第三步】这种方式要重新启动angular项目, ng serve code

angular7 中引入jquery库(1.13)

3、方法三:【第一步】npm install jquery 安装好jquery, 安装完成之后,可以通过npm list jquery查看是否安装成功,如下图。【第二步】 在需要jquery的component 中通过import 语法导入jquery.

angular7 中引入jquery库(1.13)angular7 中引入jquery库(1.13)

4、以上三种方法都可以成功导入不是用typescript语法写的js库到angular7的项目中,大家可以实践一下,欢迎讨论。下面贴出 app.component.ts的代码,用jquery实现一个div左右移动的动画。import { Component, OnInit } from '@angular/core';import * as $ from 'jquery';// declare var $: any;@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent implements OnInit{title = 'Look jQuery Animation working in action!';public ngOnInit() {console.log($);$(document).ready(function () {$("button").click(function () {var div = $("div.ljl")var left = div.css('left');if(left == '300px'){div.animate({left: '0px'});}else{div.animate({left: '300px'});}});});}}

© 2026 途途旅游
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com