将$(element).offset替换为angular.element(element).offset

Question

我不应该在我的应用程序中使用jQuery，但是我得到了一个场景，我需要元素的偏移量，而不是使用$(element).offset()

我用过angular.element(element).offset()，我也用过像angular.element(element).animate(targetPosition)这样的动画，它工作正常，所以我想知道angular.element()是否内置了所有的jQuery函数？

任何解释都将不胜感激。

Answer 1

如果我必须表达我的想法，那么：

Angular确实有一些重要的jquery方法，但有一些限制，angular团队已经将其命名为jqLite。

Full doc for angular.element。

这只是一个例子，当你的页面中没有jquery时，angular将使用jqLite，如果你在angular之前加载jQuery，那么整个jQuery方法都可以使用。在这种情况下，将使用jQuery方法而不是jqLite。

从文档中：

Angular的jqLite

jqLite仅提供以下jQuery方法：

addClass() -不支持将函数作为第一个参数

在()之后

append()

attr() -不支持将函数作为参数

bind() (已弃用，在()上使用)-不支持命名空间、选择器或eventData

children() -不支持选择器

克隆()

目录()

css() -只检索内联样式，不调用getComputedStyle()。作为setter，不会将数字转换为字符串或附加'px'，也不会自动添加属性前缀。

数据()

detach()

empty()

eq()

find() -仅限于通过标记名进行查找

hasClass()

html()

next() -不支持选择器

on() -不支持名称空间、选择器或eventData

off() -不支持名称空间、选择器或事件对象作为参数

one() -不支持名称空间或选择器

parent() -不支持选择器

prepend()

prop()

ready() (已弃用，请使用angular.element(回调)代替angular.element(文档).ready(回调))

remove()

removeAttr() -不支持多个属性

removeClass() -不支持将函数作为第一个参数

removeData()

replaceWith()

text()

toggleClass() -不支持将函数作为第一个参数

triggerHandler() -将伪事件对象传递给处理程序

unbind() (已弃用，使用off()) -不支持命名空间或事件对象作为参数

val()

wrap()

Answer 2

AngularJs在内部使用了jQLite，它拥有所有常见的功能，比如选择器，操作属性等等。

如果你想要完整的仔细看看refer the angular documentation

Answer 3

如果加载了angular.element，那么它只是jQuery的一个别名。如果未加载jQuery，angular.element将使用包含jQuery函数子集的jqlite。