如何在Angular2中使用jQuery及其插件的方法


Posted in Javascript onFebruary 09, 2017

jQuery,让我们对dom的操作更加便捷。由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接。

我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件。而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery。本篇文章就简单介绍下在Angular2中使用jQuery

如果你不知道怎么搭建Angular2开发环境,请参考这篇文章:https://3water.com/article/94934.htm

环境搭好只后先跑起来,然后我们进行下面步骤

首先在index.html中引用jquery,就像我们以前做的那样

如何在Angular2中使用jQuery及其插件的方法

然后我们编写我们的app.component.ts

import { Component,OnInit} from '@angular/core';
declare var $:any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 ngOnInit()
 {
  $("#title").html("<p>this is a string from jQuery html setting</p>");
 }
}

首先需要使用declare生命我们的jQuery,使之成为一个可用的变量,然后,我们需要导入OnInit模块并实现,我们编写的jquery代码就在这里,问中展示了我们向id为title的标签替换内容,HTML页面是这样的

<div id="title" class="title">
</div>

然后,接下来的运行效果是这样的

如何在Angular2中使用jQuery及其插件的方法

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

 接下来做个简单的jQuery插件使用的例子,首先找一个我们要使用的jQuery插件

首先在index.html 中引用

如何在Angular2中使用jQuery及其插件的方法

然后在我们刚才的app.component.ts中的ngOnInit中写入以下初始化插件代码

ngOnInit()
 {
  $(".card").faceCursor({}); 
  $("#title").html("<p>this is a string from jQuery html setting</p>");
 }

然后我们编写html

<div id="title" class="title">
</div>
<div class="container">
 <div class="card">
  <img src="../assets/me.jpg" style="width:100%;" alt="me">
 </div>
</div>

css

.card
{
  background: #fff;
  box-shadow: 0.5em 0 1.25em #ccc;
  border-radius: .3em;
  overflow: hidden;
  max-width: 20em;
  height: 450px;
  margin: 0 auto;
  display: block;
}
.title{
  text-align: center;
}
.container
{
  width:100%;
}

这些工作做了之后,我们运行下,就可以得到以下效果

如何在Angular2中使用jQuery及其插件的方法

备注:需要使用到jQuery的地方都要用declare声明以下,比如其他组件文件中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
jQuery实现评论模块
Aug 19 jQuery
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 #Javascript
vue-router跳转页面的方法
Feb 09 #Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 #Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
You might like
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php db类库进行数据库操作
2009/03/19 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
Ionic快速安装教程
2016/06/03 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python实现的字典值比较功能示例
2018/01/08 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python素数筛选法浅析
2018/03/19 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
在python中实现对list求和及求积
2018/11/14 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python两个list[]相加的实现方法
2020/09/23 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
软件工程师岗位职责
2013/11/16 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
2014财务年度工作总结
2014/11/11 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书