如何在 Ionic 2 中使用 jQuery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42305422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use jQuery with Ionic 2?
提问by Bill Noble
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?
我得到了一些需要用于 ionic 2 项目的 JQuery 代码。如何包含它和 JQuery 库？
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 );
});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.
我想在 index.htm 中为 JQuery 库和我提供的 jquery 代码文件放置一个脚本 src 标记，但我不知道如何将代码导入到我的 ionic 2 项目中。
回答by Fran Sandi
Updated at:12/04/2018
更新于：12/04/2018
1.First of all, install jQuery in your ionic project:
1.首先，在你的 ionic 项目中安装 jQuery：
$ npm install jquery --save
$ npm install jquery --save
2.After that, install jQuery global derectory to typings (so you can import it):
2.之后，将 jQuery global derectory 安装到typings（以便您可以导入它）：
$ npm install @types/jquery
3.Then, you can import JQuery in the page/component where you want to use it (for example: home.ts), with the following code:
3.然后，您可以在要使用的页面/组件中导入JQuery（例如：home.ts），代码如下：
import * as $ from 'jquery'
import * as $ from 'jquery'
And that's all, now it should be working.
就是这样，现在它应该可以工作了。
Checking:
检查：
To check if it worked , you can simply try the following:
要检查它是否有效，您可以简单地尝试以下操作：
1.In your component/page (for example: home.html) add an element with an specific id (in this case: myButton), and a method:
1.在您的组件/页面（例如： home.html）中添加一个具有特定 id（在本例中为 myButton）的元素和一个方法：
<button id="myButton" (click)="changeTextColor()">Click Me!</button>
<button id="myButton" (click)="changeTextColor()">Click Me!</button>
2.In your component/page: (in this case: home.ts) add the method:
2.在您的组件/页面中：（在本例中为 home.ts）添加方法：
changeColor(){
$('#myButton').text('white');
}
changeColor(){
$('#myButton').text('white');
}
And that should change the text of the button.
这应该会改变按钮的文本。
