如何在Angular中使用jQuery(用法代码实例)

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

ng new angular1

这里angular1是应用程序的名称, 它将花费几秒钟, 但是它将创建包含所有必需文件的angular应用程序。
如何在Angular中使用jQuery(用法代码实例)

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

如何在Angular中使用jQuery(用法代码实例)

文章图片
之后, 你的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"]

如何在Angular中使用jQuery(用法代码实例)

文章图片
现在要确认此路径, 请浏览至
node_modules-> jquery-> dist-> jquery.min.js。
如何在Angular中使用jQuery(用法代码实例)

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

如何在Angular中使用jQuery(用法代码实例)

文章图片
现在要使用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

如何在Angular中使用jQuery(用法代码实例)

文章图片
输入上述命令后,转到web浏览器并点击地址https://localhost:4200/来加载应用程序。
输出如下:
如何在Angular中使用jQuery(用法代码实例)

文章图片
在上面的代码中, 我们首先导入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"); }); }); }

输出如下:
点击按钮之前
如何在Angular中使用jQuery(用法代码实例)

文章图片
【如何在Angular中使用jQuery(用法代码实例)】单击按钮后
如何在Angular中使用jQuery(用法代码实例)

文章图片

    推荐阅读