Angular2使用jQuery的方法教程

前言

Angular2是以TypeScript语言作为默认编码语言，所以你看到的全部都是.ts结尾的文件。

那什么是TypeScript

首先，它是一个编译型语言；既然是编译型，那么你像重构、导航、智能提醒这种工具属性就可以发挥出来，所以你会发现使用VS CODE来写Angular简直就是绝配。

同时，TypeScript还带来一些ES6/7才有特性，比如let、const、async等，你无须关心ES几。

最霸气，TypeScript还是一个强类型、泛型、多态等一些面向对象编程的东西。

那，为何我们不选它呢？

当然，说了这么多，这跟主题看似无关，但如果你了解这些，才能看到问题的本质。

首先，第一关键点编译型，既然是编译型，那么你在代码中出现的任何变量、类、函数都是必须要存在，否则TA就会在编译时报错。

但，问题来了，现在的JavaScript世界中已经有那么多现成的第三方库，难道说都不能用了？非也！

TypeScript一开始就照顾这些了，所以就会有一个叫.d.ts的声明文件。MS当然不会让你去编写这一个文件，所以就有一个叫http://definitelytyped.org/ 网站，TA汇集了很多现成类库的第三方.d.ts的声明文件提供我们下载。

方法一

当然是使用最正规军了，用命令安装jQuery的声明文件。

npm install -D @types/jquery

以及使用

import * as $ from 'jquery';

$('body').addClass('');

完美的智能提示，如果你在VS CODE下的话。

方法二

对于一些并未提供 .d.ts 声明文件的类库，我们怎么办？那当然只能自己写了。

什么？自己写？很困难吧！很复杂吧！

没那么一回事，声明文件其实是对一些类库接口的描述，以下是我截取一段jQuery声明文件的部分代码

interface JQueryStatic {
 /**
  * 去掉字符串首尾空格
  *
  * @param str 字符串
  * @see {@link https://api.jquery.com/jQuery.trim/}
  */
 trim(str: string): string;
}

declare var $: JQueryStatic;

我还特意译成中文，这里的含量很少，最关键的就是 declare 它就是把一个变量 $ 定义成类型 JQueryStatic （还是个接口）。

这样，TS编译器在遇到 $ 时会去找该类型，并且你的代码里面不能出现 $.time1() 之类的，因为你的接口，只有一个 $.trim() 。

等等，jQuery几十个接口，我都要这么写吗？

NO！！！当然不是，除非你想写一个又漂亮、又好看、又是中文、又是完美智能提示的声明文件的话。

否则，你那就拿 any 类型吧，TA就是万能货。你不需要写一个很复杂的声明文件，只需要：

declare var $: any;

简单粗暴有效！

结论

哎~其实是因群里每天都可以看到一句【怎么使用jQuery】；虽然最简单的结果只需要一句话 declare var $: any;，但我还是啰里吧嗦将了一大堆，可不把前因后果将清楚，我烦~。

另，此解只是抛砖引玉，在很多类库中都是通用的办法。但我建议还是找一些Angular2类库来使用，因为如何更有效的管理JavaScript运行，是一门学问。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家我们的支持。

赞 (0)

相关推荐

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

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

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考这篇文章:http://www.jb51.net/ar

  • 详解angular2采用自定义指令（Directive）方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素 这里需要讲一下,jqu

  • Angular2使用jQuery的方法教程

    前言 Angular2是以TypeScript语言作为默认编码语言,所以你看到的全部都是.ts结尾的文件. 那什么是TypeScript 首先,它是一个编译型语言:既然是编译型,那么你像重构.导航.智能提醒这种工具属性就可以发挥出来,所以你会发现使用VS CODE来写Angular简直就是绝配. 同时,TypeScript还带来一些ES6/7才有特性,比如let.const.async等,你无须关心ES几. 最霸气,TypeScript还是一个强类型.泛型.多态等一些面向对象编程的东西. 那,为

  • 分享10篇优秀的jQuery幻灯片制作教程及应用案例

    分享10篇优秀的jQuery幻灯片制作教程及应用案例

    幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天要给大家分享的是10篇非常棒的 jQuery 幻灯片教程及16个优秀的 jQuery 幻灯片应用案例. 10篇 jQuery 幻灯片制作教程Create Beautiful jQuery slider tutorial jQuery Plugin – Feature List Create an Image Rotator with Description (CSS/jQuery) Moving Box

  • Jquery ajax基础教程

    jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的

  • jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

  • jQuery插件开发精品教程让你的jQuery提升一个台阶

    jQuery插件开发精品教程让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,

  • jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

  • jQuery中文入门指南，翻译加实例，jQuery的起点教程

    jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时

  • CentOS 7下配置Ruby语言开发环境的方法教程

    CentOS 7下配置Ruby语言开发环境的方法教程

    本文跟大家分享的是在CentOS 7下配置Ruby语言开发环境的方法教程,分享出来供大家参考学习,下面来看看详细的介绍: 安装Ruby 2.2 CentOS7存储库中的Ruby版本为2.0,但如果需要,可以使用RPM软件包安装2.2 1.添加CentOS SCLo软件集合存储库 [root@linuxprobe ~]# yum -y install centos-release-scl-rh centos-release-scl # set [priority=10] [root@linuxpr

  • 使用docker快速搭建Spark集群的方法教程

    使用docker快速搭建Spark集群的方法教程

    前言 Spark 是 Berkeley 开发的分布式计算的框架,相对于 Hadoop 来说,Spark 可以缓存中间结果到内存而提高某些需要迭代的计算场景的效率,目前收到广泛关注.下面来一起看看使用docker快速搭建Spark集群的方法教程. 适用人群 正在使用spark的开发者 正在学习docker或者spark的开发者 准备工作 安装docker (可选)下载java和spark with hadoop Spark集群 Spark运行时架构图 如上图: Spark集群由以下两个部分组成 集

  • mac下使用brew 安装mongodb的方法教程

    mac下使用brew 安装mongodb的方法教程

    mac 系统常用的软件安装工具就是 homebrew 个人认为通过brew安装比较简单,下面介绍下如何安装 安装 mongodb wenxuezhangdeMacBook-Pro:~ wenxuezhang$ brew install mongodb 此图说明已经安装成功,安装的目录就是 /usr/local/Cellar/mongodb/3.2.9 第一次启动服务端,这里需要做一些准备工作. 默认mongodb 数据文件是放到根目录 data/db 文件夹下,如果没有这个文件,请自行创建. w

随机推荐