JQuery让我们更容易操作dom。由于其易用性和可扩展性，jQuer在全球范围内也很受欢迎，各种插件不胜枚举。

相信很多人都做不到前端直接远离jQuery，因为它太好用了。我们之前做的大多数事情都是基于jQuery及其插件的。而且现在Angular2的组件生态还不完善，所以我们在写Angular的时候可能要用到jQuery。本文简要介绍了jQuery在Angular2中的使用

如果您不知道如何构建Angular2开发环境，请参考本文：//www . JB 51 . net/article/94934 . htm。

设置好环境后，首先运行，然后我们将继续执行以下步骤

首先，引用index.html的jquery，就像我们之前做的那样

然后我们编写我们的应用程序。协作。

从“@angular/core”导入{ Component，on init }；申报var $ :any@ Component({ selector : ' app-root '，templateUrl: '。/app.component.html '，styleurls 3360[]。/app.component.css']})导出类AppComponent实现了OnInit{ ngOnInit() { $('#title ')。html(' p这是来自jQuery html设置/p的字符串')；}}首先，我们需要使用declare使我们的jQuery成为一个可用的变量。然后，我们需要导入OnInit模块并实现它。我们编写的jquery代码在这里。问题显示我们用id为title的标签替换内容。这个网页看起来像这样

Div id='title' class='title'/div然后，下一个运行效果是这样的

这意味着我们可以在Angular2中正常使用jQuery

接下来，给出一个简单的jQuery插件示例。首先，找到一个我们想要使用的jQuery插件

首次在index.html引用

然后在我们的应用程序中用ngOnInit编写下面的初始化插件代码。协作. ts刚刚

ngOnInit() { $('。卡片')。face cursor({ })；$('#title ')。html(' p这是来自jQuery html设置/p的字符串')；}然后我们编写html

div id=' title ' class=' title '/div div class=' container ' div class=' card ' img src=' http :/assets/me . jpg ' style=' width :100%；'alt='me' /div/divcss。卡片{ background: # fffbox-shadow : 0.5 em 0 1.25 em # CCC；border-radius : 3 em；飞越：隐藏；最大宽度：20em；高度： 450 px；margin: 0 autodisplay:块；}.title { text-align : center；}.容器{宽度：100%；}这些任务完成后，我们运行后可以得到如下结果。

注意：在需要使用jQuery的地方，声明以下内容，比如在其他组件文件中。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。