个性化阅读
专注于IT技术分析

如何在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?1

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

cd angular1
npm install jquery --save
如何在Angular中使用jQuery?2

之后, 你的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"]
如何在Angular中使用jQuery?3

现在要确认此路径, 请浏览至

node_modules-> jquery-> dist-> jquery.min.js。

如何在Angular中使用jQuery?4

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

ng serve -open
如何在Angular中使用jQuery?5

现在要使用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?6

输入上述命令后,转到web浏览器并点击地址https://localhost:4200/来加载应用程序。

输出如下:

如何在Angular中使用jQuery?7

在上面的代码中, 我们首先导入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?8

单击按钮后

如何在Angular中使用jQuery?9

赞(0) 打赏
未经允许不得转载:srcmini » 如何在Angular中使用jQuery?用法代码实例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏