angular7 中引入jquery库（1.13）

1、方法一： 可以直接在index.html中通过 <script>标签引入jquery,

这种方式引入的jquery是全局的变量，在所有的component中不用额外的声明或者导入就可以直接使用。

2、方法二：

【第一步】在workspace 根目录的angular.json这个文件中， 找到我们的“code”这个项目的scripts这个配置项，加入 我们要导入的jquery文件的路径，

【第二步】在需要导入jquery的component中，声明我们的jquery, 

declare var $: any;

【第三步】这种方式要重新启动angular项目， ng serve code

3、方法三：

【第一步】npm install jquery 安装好jquery, 安装完成之后，可以通过npm list jquery查看是否安装成功，如下图。

【第二步】 在需要jquery的component 中通过import 语法导入jquery.

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'

});

}

});

});

}

}