在开始使用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");
});
});
}
输出如下:
点击按钮之前
文章图片
【如何在Angular中使用jQuery(用法代码实例)】单击按钮后
文章图片
推荐阅读
- 互斥与信号量(Mutex和Semaphore)有什么区别()
- C++基本语法和知识点总结合集
- C++面向对象编程知识点合集总结和解释
- Web全栈工程师应该会什么
- (服务运维)Linux内核防火墙Netfilter和iptables用户工具
- WGCLOUD的web ssh是做什么用的
- 使用Windows的KVM虚拟机与CentOS宿主机互通
- MacBook安装rar解压工具
- rsync使用介绍