如何在Angular中使用jQuery（用法代码实例） _Angular开发

在开始使用angular jQuery之前, 我们需要在系统上安装它。现在基本上有两种安装jQuery的通用方法：
注意：在开始本教程之前, 你必须了解此处使用的软件是Microsoft Visual Studio代码, 其中已安装NodeJ和typescript以与angular一起使用。
1. 使用NPM方法：
现在要使用NPM方法安装jQuery, 我们需要通过在VS Code Terminal运行该命令来创建一个新的angular应用程序。

ng new angular1

这里angular1是应用程序的名称, 它将花费几秒钟, 但是它将创建包含所有必需文件的angular应用程序。

文章图片
现在我们” cd” 进入应用程序文件夹以安装jquery。我们在VS Code终端执行以下命令：

cd angular1 npm install jquery --save

文章图片
之后, 你的angular应用程序就可以与jquery一起使用了。
2. 使用jQuery CDN：
在浏览https://jquery.com/download/时，你可以轻松地找到jQuery CDN并下载它。
始终建议你使用官方CDN的最新版本, 因为它支持子资源完整性(SRI)。现在要使用jQuery CDN, 你需要直接从jQuery CDN域引用script标记中的文件。具有Subresource Integrity属性的代码将像这样。此处使用jQuery 3.4.1。

< script src="http://img.readke.com/220604/203T54V1-2.jpg" integrity="sha256–2z0P7MLoyxByUtvAk/xjkmindefS4auh4Pfzbm7y6g0=" crossorigin="anonymous"> < /script>

上面的代码将包含在HTML文件的head标签中(app.component.html)。
安装jQuery之后, 我们需要将其设置为全局。在jQuery模块中, ” dis” 文件夹下的jquery.min.js不公开。为了使jQuery具有全局性, 我们需要执行以下操作：
这个步骤包括浏览到“angular-cli”文件。它位于Angular CLI项目文件夹的根目录下，找到script:[]属性，并按照给定的路径包含jQuery文件夹

"scripts" :["./node_modules/jquery/dist/jquery.min.js"]

文章图片
现在要确认此路径, 请浏览至
node_modules-> jquery-> dist-> jquery.min.js。

文章图片
你将看到路径, 这意味着你已在该应用程序中全局添加了jQuery库。为了使这些更改在应用程序中平稳过渡, 我们必须使用serve重新运行该应用程序。

ng serve -open

文章图片
现在要使用jQuery, 剩下的就是将其导入到要使用jquery的任何组件中。

import * from jquery

注意：所有示例程序都是使用Microsoft Visual Studio代码执行的。
例子：
现在要继续本教程, 我们需要在app.component.html中包含HTML代码

< !DOCTYPE html> < html> < head> < title> Jquery in Angular< /title> < /head> < body> < h1 style = "color:green"> srcmini< /h1> < h2> Jquery in Angular< /h2> < button> click me < /button> < /body> < /html>

我们需要在app.component.ts中包含以下代码, 以使按钮执行操作。

import * as $ from 'jquery' import { Component, OnInit } from‘ @angular /core’; export class AppComponent implements OnInit { ngOnInit() { $(‘button’).click(function() { alert(‘srcmini’); }); } }

要运行此应用程序：
在你应用的HTML和组件部分中包含上述代码后, 我们将在终端中输入以下命令来运行该应用：

ng serve

文章图片
输入上述命令后，转到web浏览器并点击地址https://localhost:4200/来加载应用程序。
输出如下：

文章图片
在上面的代码中, 我们首先导入jquery以使用其组件。然后, 我们需要实现可以从Angular Core导入的ngOnInit生命周期挂钩。我们可以在ngOnInit方法中编写jQuery代码, 要将操作添加到在app.component.html中创建的按钮, 请在ngOnInit方法中添加一个button.click事件。
现在运行上面的程序
例子：
在这个例子中，我们在angular中使用jquery来动画Html中的一个字段。我们在app.controller.html中编写Html代码，在app.controller.ts中编写angular代码/jquery。
HTML代码：

< !DOCTYPE html> < html> < head> < title> Jquery in Angular< /title> < /head> < body> < h1 style = "color:green"> srcmini < /h1> < h2> Jquery in Angular< /h2> < button> Start Animation < /button> < div style="border:1px solid; border-radius:3px; color:white; background:green; height:105px; width:260px; position:relative; "> jQuery in Angular < /div> < /body> < /html>

angular代码：

import { Component, OnInit} from ‘@angular/core’; import * as $ from 'jquery' export class AppComponent implements OnInit { ngOnInit(){ $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'}, "slow"); div.animate({fontSize:'5em'}, "slow"); }); }); }

输出如下：
点击按钮之前