如何在 Ionic 2 中使用 jQuery? [英] How can I use jQuery with Ionic 2?

问题描述

我已经获得了一些需要用于我的 ionic 2 项目的 JQuery 代码.如何包含它和 JQuery 库?

I have been given some JQuery code that I need to use with my ionic 2 project. How can I include it and the JQuery library?

代码如下(这只是其中的一部分):

The code looks like this (this is just a part of it):

// on 'Left Down' button click:
jQuery('body').on('click', '.left-down', function (e) {
  
	jQuery('body #top-scale').stop();
	jQuery('body .right-hand-weight').stop();
	jQuery('body .left-hand-weight').stop();
	//top of scale animation
	jQuery("body #top-scale").animate({
  		transform: "rotate("+ setWeights(3,0) +"deg)"
	})
	

		//===rotate + reposition each weight *** 
		jQuery("body .right-hand-weight").animate({
		 	transform:"rotate("+ getWeights() +"deg) translateX("+getX("right")+"px,"+getY("right")+"px)"
		 })

		jQuery("body .left-hand-weight").animate({
		 	transform:"rotate("+ getWeights() +"deg) translateX("+getX("left")+"px,"+getY("left")+"px)"
		 })

		//console.log(getWeights());

		// set number value in weight 
		jQuery( "body .text-1" ).text( leftWeightPercentage );

});

我想在 index.htm 中为 JQuery 库和给定的 jquery 代码文件放置一个脚本 src 标记，但我不知道如何将代码导入到我的 ionic 2 项目中.

I was thinking of putting a script src tag in the index.htm for the JQuery library and the jquery code file I have been given, but I can't work out how to import the code into my ionic 2 project.

推荐答案

更新日期: 12/04/2018

Updated at: 12/04/2018

1. 首先，在你的 ionic 项目中安装 jQuery:

1. First of all, install jQuery in your ionic project:

$ npm install jquery --save

2. 之后，将 jQuery 全局目录安装到类型中(以便您可以导入它):

2. After that, install jQuery global derectory to typings (so you can import it):

$ npm install @types/jquery

3.然后，您可以在您要使用它的页面/组件中导入JQuery(例如:home.ts)，代码如下:

3. Then, you can import JQuery in the page/component where you want to use it (for example: home.ts), with the following code:

import * as $ from 'jquery'

就是这样，现在它应该可以工作了.

And that's all, now it should be working.

检查:

要检查它是否有效，您可以简单地尝试以下方法:

To check if it worked , you can simply try the following:

1.在您的组件/页面(例如:home.html)中添加一个具有特定 id 的元素(在本例中为:myButton)，以及一个方法:

1. In your component/page (for example: home.html) add an element with an specific id (in this case: myButton), and a method:

<button id="myButton" (click)="changeTextColor()">点击我！</button>

2. 在您的组件/页面中:(在本例中:home.ts)添加方法:

2. In your component/page: (in this case: home.ts) add the method:

changeColor(){$('#myButton').text('white');}

这应该会改变按钮的文本.

And that should change the text of the button.

这篇关于如何在 Ionic 2 中使用 jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！