angular2_引入第三方文件之jQuery的引入

最新推荐文章于 2022-03-08 16:50:17 发布

web行路人

最新推荐文章于 2022-03-08 16:50:17 发布

阅读量2k

点赞数

分类专栏： angularJS 文章标签： angular_引入第三方文件之jQue angular

本文链接：https://blog.csdn.net/qishuixian/article/details/78797930

版权

angularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

angular_引入第三方文件之jQuery的引入

一、以模块化的方式引入

1.添加jQuery包

npm install jquery --save

2.下载jquery 载入包： npm install @types/jquery --save

3.引用jQuery

在需要的组件中引入：在xx.component.spec.ts中引入import * as $ from "jquery"; //加载外来包

import { Component, OnInit } from '@angular/core';
import * as $ from "jquery"; //加载外来包
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    //可以进行jQuery的任何操作
  	$("p").css("color","red");//jquery的写法 
  	$("p").click(function(){
  		alert("哈哈");
  	})
  }

}

二、以插件包的形式引入

全局引入jQuery，在ng2项目中任意位置可用

1.把下载的jQuery放在assets文件里

2.在根目录下的index.html中引入jquery.js

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp1</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="assets/jquery.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

3.在相应的组件中声明$对象

import { Component, OnInit } from '@angular/core';
declare var $:any;//声明$对象
@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {

  constructor() { }

  ngOnInit() {
  	$("p").css("color","red");//jquery的写法
  	$("p").click(function(){
  		alert("哈哈");
  	})
  }

}

web行路人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular2_引入第三方文件之jQuery的引入

angular_引入第三方文件之jQuery的引入一、以模块化的方式引入 1.添加jQuery包npm install jquery --save 2.下载jquery 载入包： npm install @types/jquery --save 3.引用jQuery
复制链接

扫一扫