AngularJS和jquery，有啥区别？

Posted 2023-05-09

　　AngularJS 是Web前端开发中的一个 javascript 框架，目前在前端中使用率也是非常高的，也是Web前端开发者以动态形式开发时最喜欢的框架之一。如果你是一个前端开发者希望基于AngularJS启动一个项目，你需要筛选众多的工具。为了减少用AngularJS开发的负担，下面源码时代Web前端培训小编为大家介绍20款最新的工具，主要涉及测试、前端开发、IDE编辑器、文本编辑器、优秀库、模块、扩展、代码生成器、网格工具等等。

　　1.Karma–是一个简单的javascript测试工具，它允许在多个真正的浏览器执行JavaScript代码..提供了完美的测试环境，允许你在真实的浏览器和设备比如手机和平板电脑上测试应用。

　　2.Protractor –是一款端对端的测试框架。这个Node.js项目建立在WebDriverJS之上。它在真实浏览器上运行测试，与其交互就如任何正常用户使用一样。

　　3. Jasmine –这款行为驱动测试框架不依赖于浏览器、DOM或者任何JavaScript框架，因此对于任何Node.项目或者任何JavaScript运行的地方都非常适合。

　　4. Djangular –这是一款可重用的应用，可以提供更好的AngularJS集成。有了此工具的帮助，你可以为每个应用创建 AngularJS内容。

　　5. Ment.io –这款工具引入了mention部件和宏控件，并不依赖于jQuery。你可以应用ment.io指令作用于任何元素，并且它允许可选择的文本输入。

　　6. Angular Kickstart –这款工具加速了AngularJS开发，并伴随可扩展的构建系统，简化了开发过程。

　　7. AngularFire –用此工具，你可以轻松创建 Angular 应用后台。灵活的API，3种数据绑定方式以及快速开发能力使得开发变得轻松。

　　8. Mocha.js –这是一款运行在node.js和浏览器上的功能丰富的测试框架。允许异步测试，能灵活准确的报告与映射。

　　9. SublimeText –对于开发者来说最好的一款文本代码编辑器，使得编写代码简单化。比起其他文本编辑器，许多开发者更喜欢用Sublime Text.

　　10. Restangular –这款工具简化了常见的GET, POST, DELETE, UPDATES请求，使用更简短的代码。对于任何通过 RESTful API 进行数据操作的 Web 应用都是理想化的工具。

　　11. Generator Angular –这款工具可以帮助你快速的设置项目的默认结构。它能输出让你快速开始app开发的模板。

　　12. NG-Inspector –这是一个Chrome 和Safari 浏览器扩展，安装成功后会出现先审查面板中，帮助你开发、调试和深入理解 AngularJS 应用。它使得更容易标识和显示Controllers 和Directives中的scope。

　　13. Angular Seed –这个一个典型的AngularJS web app开发框架，它可以让你在开发环境快速启动angular app。

　　14. Code Orchestra –这是一个前端开发工具，它允许你所见即所得方式开发代码。一旦你保存修改了的代码，它使用一个特殊的协议自动的显示出来。

　　15. Videogular –这是一个针对AngularJS的基于html5的视频播放库，它使得在你的app中使用视频或其他多媒体更容易。

　　16. Webstorm –它是一个智能的代码编辑器，支持JavaScript, Node.js, HTML和CSS等等以及它们对应下一代的继任者。它能工作在所有的先进技术下，对大部分开发者来说，使用它是一个很好的选择。

　　17. Angular GetText –这是超级简单的翻译工具，你只需输入英文文本，标记它需要翻译，它就会翻译。

　　18. Angular Deckgrid –这是一个轻量级的表格，它没有自己的展现样式，完全依赖于你定义在CSS中的样式。

　　19. Angularjs UI –这是一个UI组件集合库，它有很多有用的指令来帮你快速的开发Angular应用。它使用指令来代替组件，如：ui-router, ui-map, and ui-calendar。

　　20. Mean –它是一个使用MongoDB, Node.js, Express和AngularJS apps的简单而完美的模板。它捆绑和配置了一些模块，如： Mongoose 、Passport。

　　21. Wijmo –这是新一代HTML5/ JavaScript UI控件。大而全面的前端开发工具包，全面支持Angular 2。

22. VS Code(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。几乎完美的编辑器。

源码时代：http://www.itsource.cn

参考技术A

jQuery 的版本

从2005年 8月开始，进入公共开发阶段，随之而来的新框架于2006年 1月 14日正式以 jQuery 的名称发布。

2006年 8月发布了 jQuery1.0，第一个稳定版本，具有对 CSS 选择符、事件处理和Ajax 交互的支持。

2007年 1月发布了 jQuery1.1，极大的简化 API。合并了许多较少使用的方法。

2007年 7月发布了 jQuery1.1.3，优化了 jQuery 选择符引擎执行的速度。

2007年 9月发布了 jQuery1.2，去掉了 XPath 选择器，新增了命名空间事件。

2008年 5月发布了 jQuery1.2.6，引入了 Dimensions 插件到核心库中。

2009年 1月发布了 jQuery1.3，使用了全新的选择符引擎 Sizzle，性能进一步提升。

2010年 1月发布了 jQuery1.4，进行了一次大规模更新，提供了 DOM 操作，增加了很多新的方法或是增强了原有的方法。

2010年 2月发布了 jQuery1.4.2，添加了.delegate()和.undelegate()两个新方法，提升了灵活性和浏览器一致性，对事件系统进行了升级。

2011年 1月发布了 jQuery1.5，重写了 AJAX 组件，增强了扩展性和性能。

2011年 5月发布了 jQuery1.6，重写了 Attribute 组件，引入了新对象和方法。

2011年 11月发布了 jQuery1.7，引入了.on()和.off()简介的 API 解决事件绑定及委托容易混淆的问题。

2012年 3月发布了 jQuery1.7.2，进行一些优化和升级。

2012年 7月发布了 jQuery1.8，8 月发布了1.8.1，9 月发布了1.8.2，重写了选择符引擎，修复了一些问题。

2013年 1月发布了 jQuery1.9， CSS 的多属性设置，增强了 CSS3。

2013年 5月发布了 jQuery1.10，增加了一些功能。

2013年 4月发布了 jQuery2.0，5 月发布了 jQuery2.0.2，一个重大更新版本，不在支持 IE6/7/8，体积更小，速度更快。

在制作这套课程的时候，我们最新的中文版的 API 文档是1.8版本的，有在线和离线两种手段查阅：

1.在线的可以访问：http://t.mb5u.com/jquery/

2.离线的 AP 文档将打包提供给大家

3.如果要看最新的文档，英文版的：http://api.jquery.com/看不懂可以打开谷歌翻译，虽然不是特别准。

关于版本学习的问题：

版本的版本号升级主要有三种：第一种是大版本升级，比如1.x.x 升级到2.x.x，这种升级规模是最大的，改动的地方是最多的，周期也是最长的， jQuery 从1.x.x 到2.x.x 用了7年。第二种是小版本更新，比如1.7升级到1.8，改动适中，增加或减少了一些功能，一般周期半年到一年左右。第三种是微版本更新，比如1.8.1升级到1.8.2，修复一些 bug 或错误之类。

版本的内容升级主要也有三种：第一种是核心库的升级，比如优化选择符、优化 DOM或者 AJAX 等；这种升级不影响开发者的使用。第二种是功能性的升级，比如剔除一些过时的方法、新增或增强一些方法等等；这种升级需要了解和学习。第三种就是 BUG 修复之类的升级，对开发者使用没有影响。

学习者有一种担忧，比如学了1.3版本的 jQuery，那么以后升级新版本是不是还需要重学？没必要，因为并不是每次升级一个版本都会增加或剔除功能的，一半左右都是内部优化，升级到新版本并不需要任何学习成本。就算在新的版本增加了一些功能，只需要几分钟了解一下即可使用，无需清零之前的知识，只需后续累加。当然，在早期的 jQuery 版本都创建了最常用的功能，而新版本中增加的功能，也不是最常用的，无需立即学习，立马用起。

jQuery 的功能和优势

jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点：

1.像 CSS 那样访问和操作 DOM

2.修改 CSS 控制页面外观

3.简化 JavaScript 代码操作

4.事件处理更加容易

5.各种动画效果使用方便

6.让 Ajax 技术更加完美

7.基于 jQuery 大量插件

8.自行扩展功能插件

jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。

其他 JavaScript 库

目前除了 jQuery，还有5 个库较为流行，他们分别是 YUI、 Prototype、 Mootools、 Dojo和 ExtJS。

YUI，是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。

Prototype，是最早成型的 JavaScript 库之一，对 JavaScript 内置对象做了大量的扩展。

Dojo， Dojo 强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。

Mootools，轻量、简洁、模块化和面向对象的 JavaScript 框架。

ExtJS，简称 Ext，原本是对 YUI 的一个扩展，主要创建前端用户界面。(付费的)

推荐阅读：

参考技术B

index(subject)

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值值。

如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。

返回值：Number

参数：subject (Element): 要搜索的对象

示例：

返回ID值为foobar的元素的索引值值。

HTML 代码:

jQuery 代码:

$("*").index($(\'#foobar\')[0])

结果:5

1.插件：

（1）jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

查看这里Plugins/Authoring可以获取更多信息。

返回值：jQuery

参数：object (Object):用来扩充 jQuery 对象。

示例：增加两个插件方法。

jQuery.fn.extend(

check: function()

return this.each(function() this.checked = true;);

,

uncheck: function()

return this.each(function() this.checked = false;);

);

结果:

$("input[@type=checkbox]").check();

$("input[@type=radio]").uncheck();

（2）jQuery.extend(object)

扩展 jQuery对象本身，

用来在jQuery命名空间上增加新函数。查看\'jQuery.fn.extend\'获取更多添加插件的信息。

参数：object (Object): 用以扩展 jQuery 对象

示例：在jQuery命名空间上增加两个函数。

jQuery.extend(

min: function(a, b) return a < b ? a : b;,

max: function(a, b) return a > b ? a : b;

jQuery.min(2,3);//=>2

jQuery.max(4,5);//=>5

多库共存

（1）jQuery.noConflict()

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。

示例：将$引用的对象映射回原始的对象。

jQuery.noConflict();

//使用 jQuery

jQuery("div p").hide();

//使用其他库的$()

$("content").style.display =\'none\'

恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery.noConfict();

(function($)

$(function()

//使用$作为jQuery别名的代码

)

)(jQuery);

//其他用$作为别名的库的代码

创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery代码：

var j=jQuery.noConfict();

//基于jQuery的代码

j(“div p”).hide();

//基于其他库的$()代码

$(“content”).style.display =’none’;

佳谦科技是一家专注于软件开发的高新技术企业。拥有一支掌握先进技能，协作能力强，昂扬向上的创造性队伍。业务主要涉及微公众平台、手机APP定制、人工智能、物联网、车联网、无人驾驶等等。

我们以高新技术为实体，诚信、服务至上为方向，坚持客户需求决定一切，始终把客户放在第一位，用实际行动得到得到客户的认可肯定。

我们的每个思想在我们网店都有一个案例，每个案例都是我们的思想，我们有专业的策划人员，满足客户的所有需求，专业的技术人员，保障按照项目进度完成每个项目，优秀的后勤维修人员，随时解决项目后期维护出现的问题；欢迎关注我们的网店，我们会谁是更新我们的理念，有大家分享！

http://shop370148096.taobao.com/?spm=a230r.7195193.1997079397.2.40Yub7

参考技术C

小编最近因工作的原因，在学习angular.js。根据在公司做网站案例中，总结了一些关于angular.js在实际应用中的优点。

优点：

1，模板功能强大丰富,并且是声明式的,自带了丰富的angular指令；

2，是一个比较完善的前端MVX框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；

3.自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西

，如：在directive使用$parse；

4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品

，但是js的代码基本上很少改动。

5.补充：Angular支持单元测试和e2e-testing。

参考技术D

作为一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。其强大的兼容性，独特的链式语法和短小清晰的多功能接口为我们平常的开发工作带来了不少的帮助。

在今年的3月16，我们也迎来了jQuery 3.2.0（jQuery 3.2.0 Is Out!）。此版本包括一些错误修复，改进和一些弃用，如果从 jQuery 3.0+升级，应该不会存在兼容性问题。如果尚未升级到 jQuery 3+，请去查阅“3.0升级指南”。

这次更新中值得关注的更新：

1.支持自定义CSS属性添加

2.弃用jQuery.holdReady

3.弃用jQuery.nodeName

4.弃用jQuery.inArray

5.修复了.width()和.height()中存在的一个bug 。例如,transform: scale(2x)时，元素的高宽值不应该翻倍。

6.支持将

Zepto 和 jQuery 2 有啥区别？

【中文标题】Zepto 和 jQuery 2 有啥区别？

【英文标题】：What is the difference between Zepto and jQuery 2?Zepto 和 jQuery 2 有什么区别？

【发布时间】：2013-01-27 15:05:11

【问题描述】：

有两个类似的项目：

Zepto.js

Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有 大部分与 jQuery 兼容的 API。

jQuery 2.0

jQuery 2.0 测试版：这是您对未来的品味，它可以更快、更小而不需要支持 IE 6、7 或 8。它是特定于平台的 HTML 应用程序的绝佳选择。

这只是关于性能还是他们遵循不同的方法？

【问题讨论】：

如果你曾经尝试从 jQuery 切换到 Zepto：blog.pamelafox.org/2011/11/porting-from-jquery-to-zepto.html

这是一个关于特定编程问题的有用、有趣、相关的问题。为什么它被关闭了？不是“哪个更好”，而是“使用的注意事项是什么”

【参考方案1】：

Zepto.js 和 jQuery 之间的主要区别在于它们各自的文件大小是 Zepto.js 的 ~20kb（缩小，未压缩）而不是 jQuery 的 ~80kb，并且 Zepto.js 的 ~10kb（缩小，压缩）而不是 jQuery 的 ~ 30kb。此外，Zepto 对 IE<10 等浏览器的支持要么缺乏要么无法保证，its target platforms 是：

Safari 5+（桌面） Chrome 5+（桌面） Mozilla Firefox 4+ iOS 4+ Safari Android 2.2+ 浏览器 其他基于 WebKit 的浏览器/运行时 webOS 1.4.5+ 浏览器 BlackBerry Tablet OS 1.0.7+ 浏览器 亚马逊 Silk 1.0+ Opera 10+ Internet Explorer 10+

【讨论】：

jquery 2 是 ~30kb，而 zepto 是 ~10kb，当两者都被压缩和缩小时。非 gzip 压缩，jquery 2 仍然是 ~80kb 而 zepto 是 ~30kb。

-1。 asparagino 指出，MHD 的数字不正确。他的回答是有效的。

Zepto 和 jQuery 都支持自定义构建，因此厨房水槽的大小可能不是那么重要。不同之处在于 jQuery 有更好的支持和性能，更新更频繁，社区更活跃。 Zepto 的吸引力在很大程度上被 jQuery 2.0 弥补了 Zepto 曾经填补的空白。

【参考方案2】：

jquery 2 是 ~30kb，而 zepto 是 ~10kb，当两者都被压缩和缩小时。非 gzip 压缩但已缩小，jquery 2 约为 80kb，zepto 约为 30kb。

使用分析程序检查您网站的受众。如果您的大部分用户使用 IE9，您需要 jquery 并且 zepto 不会飞。如果超过百分之几使用 IE8 或更低版本，并且您无法面对让他们在没有您的网站的情况下陷入困境，您将需要使用 jquery 1。如果您的目标是最后一个，对不起 - 很多新的闪亮玩具不适合你。

如果您正在为 android/ios/phonegap 等构建 html5 应用程序，那么您主要针对的是 webkit，因此 zepto 确实可以为您节省大量空间。 zepto 存在的主要见解和原因是，当仅在 webkit 平台上运行时，许多 jquery 的跨平台变通方法都是不必要的。

Zepto 还添加了几个触摸事件处理程序来协助移动开发，但主要是您需要考虑的页面权重与平台支持。

【讨论】：

大概如果你选择任何一个平台，那么跨平台的解决方法是不必要的:)

Zepto 更接近 ~25kb ;)。他们有构建说明来重新打包库以获得您需要的最小大小。

我假设您说的是非 gzip 压缩但缩小的构建，自从我写这篇文章以来的八个月里，它的波动并没有超过几个 kb。所以... 25kb 是 ~30kb :P

【参考方案3】：

Zepto 缺少 jQuery 提供的延迟/承诺 API。有一个附加组件，Simply Deferred，可以解决这个问题：https://github.com/sudhirj/simply-deferred。

【讨论】：

考虑阅读有关 jQuery 承诺的内容：domenic.me/2012/10/14/youre-missing-the-point-of-promises

【参考方案4】：

这是一个有点老的问题，但我想增加性能。据我所知，Zepto 的表现优于 jQuery。

这个jsPerf 显示了不同的结果。与 Zepto 相比，我可以经常使用 jQuery 的类选择（单个元素） 137%。对于 ID 选择，我可以经常使用 jQuery 的 285%。

考虑到对大多数应用程序而言，这是一笔巨大的交易，DOM 交互是唯一重要的性能统计数据（网络请求除外）。

另外看看那个性能，我可以看到我可以像 jQuery 一样频繁地执行 document.getElementsByClassNAme 8326%，所以如果可能的话，我们都应该放弃所有这些 :-)

【讨论】：

Zurb 的人可不是这么说的。他们从 CSS 框架中删除 Zepto 的原因之一是，即使 Zepto 的文件更小，jQuery 的性能也优于 Zepto。其他原因是因为许多插件是为 jQuery 编写的。查看他们的博文：zurb.com/article/1293/why-we-dropped-zepto

@ricardozea，这个答案和那篇文章说的是同一件事：jQuery 使用选择器更快。不过要明确一点，您需要大约 100 个 jsperf 来全面测试这些库，然后聘请一位统计学家来确定对于普通网站和普通用户而言哪个更快。

您是在说：“...Zepto 的性能优于 jQuery。”。是的，我们同意 jQuery 更快。

呵呵 不 :-) 这就是我被告知的；我的发现是 jQuery 更快（至少有选择器）。

【参考方案5】：

根据我的阅读，人们似乎严重倾向于 Zepto。最常见的原因是文件大小，但 jQuery 2 在加载后实际上比 Zepto 快。此外，由于大多数人都是围绕 jQuery 开发的，因此您不会发现对 Zepto 的太多支持。我并不是建议您不应该使用 Zepto，但您应该了解为什么要使用它，以及您使用的其他 JavaScript 库是否支持/与它冲突。

我会说这取决于您的项目。对于个人或有限使用，Zepto 可能是更好的选择。但是，其他库对 jQuery 的支持要多得多，如果文件大小是唯一决定您原因的因素，那么它就有缺陷。 JavaScript 应该在页面加载后加载，因此在任何一种情况下都不会影响您的页面加载时间。

Here 是性能测试，包括 jQuery 1.7.2、Zepto 1.0rc1 和 jQMobi 1.03。

【参考方案6】：

我认为从未使用 zepto 快速过渡到 web早在 Foundation 4 被构想时，我们就切换到 Zepto（带有 jQ​​uery 选项），因为它的文件更小，加载时间更快。

但随着时间的推移，我们发现较小的文件大小并不能转化为更好的整体性能。当然，Zepto 下载速度很快。但是一旦加载，它就没有jQuery那么快了。许多第三方插件需要 jQuery，而不是 Zepto，这并没有帮助——事实上，我们发现一些第三方 JavaScript 与 Zepto 完全冲突。

维护不同的代码库对我们来说也不是一件容易的事。例如，Zepto 缺乏适当的高度计算功能，导致某些网格计算变得困难。

为了解决这一切，答案就像喜马拉雅的春天一样清晰：Foundation 5 使用 jQuery 2。除了更快的速度和行业接受度之外，jQuery 2 还受益于更好的文档和支持。 jQuery 与 API 兼容。

**

但我们假设 Zepto 会比 jQuery 更快。我们不想 做了两次相同的假设，所以我们测试了 Zepto 与 jQuery 2。 结果：jQuery 2 每秒有更多的操作。这给了基金会 5 更好的性能，为所有人带来更好的体验 用户。

**

最后，我们希望帮助人们更快地设计出出色的产品——而这一次，这意味着为世界上响应速度最快的前端框架本身提供速度提升。

【讨论】：

如果你这么关心性能，你为什么要使用jQuery呢？当然 jQuery 比 Zepto 有更好的性能，但 jQuery 的性能与 VanillaJS 相比很糟糕。基本上，VanillaJS 是 jQuery 的更好和更优越的版本。想象一下，将大量高性能优化函数库打包到一个轻量级包中。这就是 VanillaJS 的强大之处。我强烈建议尝试一下。