第十八章：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中去掉所有匹配的元素 |