AngularJS | angular.element()函数介绍

angular.element 函数是 AngularJS 中一个非常重要而且常用的函数，它是 AngularJS 操作 DOM 的核心。

函数定义

angular.element 函数定义如下：

angular.element(selector);

参数：

• selector：一个字符串，表示选择器，用于匹配 DOM 元素。

返回值：

• 如果 selector 为字符串，则返回与之匹配的 DOM 元素的封装对象；
• 如果 selector 为 DOM 元素，则返回该元素的封装对象；
• 如果 selector 为函数，则把函数添加到文档加载完成的回调队列中。

函数用途

AngularJS 中，我们经常需要操作 DOM，比如添加、删除、隐藏、显示、绑定事件等。而 angular.element 函数就是 AngularJS 操作 DOM 的核心方法，通过该函数我们可以获取到元素、操作元素，甚至可以从一个元素类型转化为另一个元素类型。

示例代码

下面是一些 angular.element 函数的使用示例：

// 选取元素，返回一个封装对象
var ele = angular.element(document.getElementById('myElement'));

// 选取元素，返回一个封装对象
var ele = angular.element('#myElement');

// 选取并操作多个元素
angular.element('li').addClass('list-item');

// 绑定事件
angular.element(document).ready(function () {
    angular.element('.my-btn').on('click', function () {
        console.log('button clicked');
    })
});

// 添加元素
var newEle = angular.element('<li>new item</li>');
angular.element('ul').append(newEle);

// 转换元素类型
var inputEle = angular.element('<input type="text">');
var selectEle = angular.element('<select></select>');
var optionEle = angular.element('<option>option 1</option>');

inputEle = selectEle.wrap(inputEle).parent();
optionEle = selectEle.append(optionEle);

注意，angular.element 返回的是一个封装对象，而不是原生 DOM 对象，因此，你不能直接使用原生 DOM 对象支持的一些属性和方法。如果需要使用，需要通过以下两种方式操作：

• 使用 angular.element 对象封装的方法，比如 addClass()、on() 等；
• 使用 angular.element 对象的 get() 方法获取原生 DOM 对象，然后再进行操作；

总结

angular.element 函数是 AngularJS 中操作 DOM 的核心，可以选择元素、操作元素、绑定事件、添加元素等，提供丰富的使用场景，非常重要。