srcmini在开始使用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="https://code.jquery.com/jquery-3.4.1.js" 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"); }); }); }输出如下：
点击按钮之前
单击按钮后
评论前必须登录！
注册