第十八章：angular.element · Angular半知半解

## angular.element AngularJs给我们也提供了一些操作`DOM`的方法———`Jqlite` `angular.element()`将`DOM`元素或者`HTML`字符串包装成一个`jQuery`元素。 ``` angular.element(element) ``` **1、引入JQuery** 在引入JQuery的前提下，和`$`的用法基本相同： ``` angular.element('#id') ``` **2、不引入JQuery** ``` angular.element(document.querySelector('')); ``` `angular.element()`返回一个jquery对象，如 ``` angular.element(document).ready(function(){}); ``` 实例（18-1.html）： ``` <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <script src="../resources/angular/angular.min.js"></script> </head> <body> <div ng-controller="TestController"> <span>item1</span> <span>item2</span> </div> <script> var myApp = angular.module('myApp', []); myApp.controller('TestController', ['$scope', function($scope) { console.log(angular.element(document.querySelectorAll('span'))); }]); </script> </body> </html> ``` 打印信息： ![](https://box.kancloud.cn/acad426bec1c46ce99e91309b0553dcc_116x69.png) 从上面的打印信息中，你可以看到`angular.element()`返回的是一个数组，包含了选择的元素。如果你要取某个元素，比如要取第一个span元素，可以这样： ``` var span = angular.element(document.querySelectorAll('span')); console.log(span[0]); // <span>item1</span> ``` **3、$document** `$document`就和`angular.element(document)`是一样的，是一个整体的dom结构树，包含jqlite的所有方法另外`$document[0]`和原生JS的`document`等效注：使用时，不要忘记注入$document。实例（18-2.html）： ``` <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <script src="../resources/angular/angular.min.js"></script> </head> <body> <div ng-controller="TestController"></div> <script> var myApp = angular.module('myApp', []); myApp.controller('TestController', ['$document', function($document) { console.log($document); console.log($document[0] === angular.element(document)[0]); }]); </script> </body> </html> ``` 打印信息： ![](https://box.kancloud.cn/f5b96f2bfd7eec9872b4ef634137c859_180x92.png) **其他方法** 如果你使用过JQuery，应该对下面的方法不陌生。 | 方法名 | 说明 | | :----: | :----: | | addClass() | 为每个匹配的元素添加指定的样式类名 | | hasClass() | 确定任何一个匹配元素是否有被分配给定的（样式）类 | | removeClass() | 移除集合中每个匹配元素上一个，多个或全部样式 | | toggleClass() | 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类 | | after() | 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 | | append() | 在每个匹配元素里面的末尾处插入参数内容 | | attr() | 获取匹配的元素集合中的第一个元素的属性的值 | | removeAttr() | 为匹配的元素集合中的每个元素中移除一个属性（attribute） | | prop() | 获取匹配的元素集中第一个元素的属性（property）值 | | children() | 获得匹配元素集合中每个元素的子元素，选择器选择性筛选 | | css() | 获取匹配元素集合中的第一个元素的样式属性的值 | | data() | 在匹配元素上存储任意相关数据 | | removeData() | 在元素上移除绑定的数据 | | empty() | 从DOM中移除集合中匹配元素的所有子节点 | | eq() | 减少匹配元素的集合为指定的索引的哪一个元素 | | find() | 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代 | | next() | 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素 | | parent() | 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器 | | prepend() | 将参数内容插入到每个匹配元素的前面（元素内部） | | ready() | 当DOM准备就绪时，指定一个函数来执行 | | remove() | 将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。） | | clone() | 创建一个匹配的元素集合的深度拷贝副本 | | contents() | 获得匹配元素集合中每个元素的子元素，包括文字和注释节点 | | replaceWith() | 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合 | | triggerHandler() | 为一个事件执行附加到元素的所有处理程序 | | on() | 在选定的元素上绑定一个或多个事件处理函数 | | off() | 移除一个事件处理函数 | | one() | 为元素的事件添加处理函数。 | | one() | 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次 | | bind() | 为一个元素绑定一个事件处理程序 | | unbind() | 从元素上删除一个以前附加事件处理程序 | | wrap() | 在每个匹配的元素外层包上一个html元素 | | val() | 获取匹配的元素集合中第一个元素的当前值 | | html() | 获取集合中第一个匹配元素的HTML内容 | | text() | 得到匹配元素集合中每个元素的合并文本，包括他们的后代 | | detach() | 从DOM中去掉所有匹配的元素 |