如何在Ionic 2中使用jQuery? [英] How can I use jQuery with Ionic 2?
问题描述
我已经获得了一些我需要用于离子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标记,但我无法弄清楚如何将代码导入my 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。首先,在离子项目中安装jQuery:
1. First of all, install jQuery in your ionic project:
$ npm install jquery --save
2。之后,安装jQuery global derectory到打字(所以你可以导入):
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:
从'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屋!