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");
});
});
}输出如下：
点击按钮之前
单击按钮后
评论前必须登录！
注册