Question

我已经获得了一些我需要与我的离子2项目一起使用的JQuery代码。我如何包含它和JQuery库？

代码看起来像这样（这只是其中的一部分）：

＆＃13;

// 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 );

});

＆＃13;

我正在考虑在index.htm中为jQuery库和我给出的jquery代码文件添加一个脚本src标记，但我无法解决如何将代码导入my ionic 2项目的问题。

Answer 1

更新于： 12/04/2018

1。首先，在离子项目中安装jQuery：

$ npm install jquery --save

2. 之后，将jQuery global derectory安装到typings（这样你就可以导入它）：

$ npm install @types/jquery

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

import * as $ from 'jquery'

这就是全部，现在应该可以了。

<强>检查：

要检查它是否有效，您只需尝试以下操作：

1。在您的组件/页面（，例如：home.html ）中添加一个具有特定ID的元素（在本例中为：myButton ）和方法：

<button id="myButton" (click)="changeTextColor()">Click Me!</button>

2。在您的组件/页面中：（在这种情况下：home.ts ）添加方法：

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

这应该会改变按钮的文字。

如何在Ionic 2中使用jQuery？

1 个答案: