如何在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 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
如何更好的编写js async函数
May 13 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
详解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
php导入导出excel实例
2013/10/25 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jquery.validate使用详解
2016/06/02 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python os模块介绍
2014/11/30 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python实现超市商品销售管理系统
2019/10/25 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Keras设置以及获取权重的实现
2020/06/19 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
介绍一下write命令
2014/08/10 面试题
库房管理员岗位职责
2014/03/09 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
小学班主任教育随笔
2015/08/15 职场文书