AngularJS中的jQuery - jqlite
Posted Arvin-ma
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS中的jQuery - jqlite相关的知识,希望对你有一定的参考价值。
jqLite:向jQuery致敬
在DOM操作方面,没有人比jQuery做的更好。AngularJS以一种特殊的方式 向jQuery表达了敬意:内置精简版的jQuery - jqLite。
和jQuery一样,jqLite兼容多个浏览器。
jqLite以angular.element接口提供出来,兼容jQuery API的一个子集。 在AngularJS的所有API中的element对象,都不是纯粹的DOM对象,而是经过jqLite 封装过的。
- 选择符的问题
从开发者的角度,jqLite最明显的精简是不支持选择符。你只能向 angular.element传入一个DOM对象。看起来AngularJS将这部分功能让位给浏览器 原生的支持了,我们可以先使用浏览器的querySelector获得一个DOM对象:
,
var tpl = document.querySelector(‘#clock‘);
angular.element(tpl).text(...);
,
- jQuery库的兼容性
如果某种原因你不愿意使用jqLite,也可以在AngularJS之前引入jQuery库。 AngularJS自动地将jqLite升级成jQuery,angular.element等同于 $ 。 这样又可以使用熟悉的选择符了。
- 扩展的方法
jqLite包括一些额外的方法以适应AngularJS框架:
- controller(name) - 获得元素对应的控制器对象
- injector() - 获得元素对应的注入器对象
- scope() - 获得元素对应的作用域对象
- isolateScope() - 获得元素对应的隔离作用域对象,如果有的话。
- inheritedData() - 和data()一样,但如果当前元素没有指定的数据,会向上级 节点继续找。
- 扩展的事件
jqLite还提供一个$destroy事件,当DOM对象被从DOM树删除时,AngularJS将触发 这个事件,以便指令进行一些善后清理工作。
→_→的代码已经悄悄地将jQuery库改成了AngularJS,注意一下其中angular.element 的使用。
以上是关于AngularJS中的jQuery - jqlite的主要内容,如果未能解决你的问题,请参考以下文章
Webpack:如何使角度自动检测 jQuery 并将其用作 angular.element 而不是 jqLite?
强制 Angular 在 JQLite 上使用 jQuery