AngularJS元素操作疑问：部分DOM操作方法失效求助

核心前提：angular.element()返回的是Angular封装的jqLite对象（或jQuery对象，取决于是否引入jQuery），和原生DOM元素不是同一类型，这是所有代码表现差异的根源。

1. 为什么angular.element("#elementID").style.opacity = 1不可用？ #

angular.element()返回的是封装后的元素集合对象，style是原生DOM元素的专属属性，直接在封装对象上访问style自然找不到对应属性。
而angular.element("#elementID")[0]是从集合中取出第一个原生DOM元素，因此能正常访问style属性。

2. 为什么angular.element("#elementID").css('opacity' : 1)不可用？ #

这是纯粹的语法错误！jQuery的css()方法参数格式有两种正确写法：

• 单个样式：.css('opacity', 1)（参数用逗号分隔，不是冒号）
• 多个样式：.css({opacity: 1, color: '#333'})（传入对象，内部键值对用冒号）

你写的css('opacity' : 1)不符合语法规范，和Angular或jQuery的特性无关。

3. 为什么.is(':visible')和.slideUp()能用？ #

因为你已经安装了jQuery，此时angular.element()会直接返回jQuery对象，而is()、slideUp()都是jQuery本身提供的方法，所以可以正常调用。如果没引入jQuery，Angular自带的jqLite是没有这些方法的，调用会直接报错。

关键总结 #

• angular.element()返回的是元素集合对象，需通过[index]获取原生DOM元素，才能使用原生DOM的属性/方法（比如style）
• 引入jQuery后，angular.element()等价于$()，可直接使用所有jQuery方法，但必须遵循方法的语法规范
• 未引入jQuery时，jqLite仅支持有限的基础DOM操作方法（如addClass()、removeClass()），jQuery特有的动画、筛选方法无法使用

内容的提问来源于stack exchange，提问作者rolinger