Angular.element和$document的使用方法分析，代替jquery

AngularJs是不直接操做DOM的，可是在平時的開發當中，咱們有的時候仍是須要操做一些DOM的，若是使用原生的JS的話操做過於麻煩，因此你們通常都是使用jQuery，jQuery雖然好用，可是AngularJs是不建議和JQuery同時使用的，因此AngularJs給咱們也提供了一些操做DOM的方法———Jqlite

下面以addClass（）方法爲例給你們講解一下Jqlite的使用：

查閱官方提供的api，能夠看到使用方法是angular.element(ele)，其中，容許傳入的參數ele的類型是「HTML string or DOMElement to be wrapped into jQuery.」通常傳入參數DOMElement

方法一：

var test = angular.element(document.querySelector(‘#testId’)); test.addClass(‘testClass’);

以原生js的document對象的querySelector方法獲取元素的id，括號內的使用方法同jquery一致，#表明id，該方法返回的是當前div的DOMElement對象，經過angular.element方法便可將即轉化爲一個jQuery對象，從而對其操做。

方法二：

var test = angular.element(document.getElementById(‘test’); test.addClass(‘testClass’);

getElementById的方法相信你們用到的比較多，其返回的也是一個DOMElement對象

方法三：

angular.forEach(angular.element(document).find('div'),function(node){             if(node.id == 'testId'){                      node.addClass('testClass');             } if(node.className == ‘testClass’){ node.removeClass(‘testClass’) }            })

find搜索的是tagName，這裏使用的是div，固然也能夠是p標籤等等。

方法四：使用$documen

注：不要忘記注入

$document就和angular.element(document)是同樣的，是一個總體的dom結構樹，包含jqlite的全部方法，因此方法三也能夠改成：

angular.forEach($document.find('div'),function(node){             if(node.id == 'testId'){                      node.addClass('testClass');             } if(node.className == ‘testClass’){ node.removeClass(‘testClass’) }         })

另外$document[0]和原生JS的document等效

因此，方法一和方法二能夠改成

var test = angular.element($document[0].getElementById(‘test’); test.addClass(‘testClass’);

以及

var test = angular.element($document[0].getElementById(‘test’); test.addClass(‘testClass’);