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
方法一：
|
1
2
|
<span style="color: #0000ff; font-size: 16px;"><strong><code class="hljs bash">var <span class="hljs-built_in">test = angular.element(document.querySelector(‘<span class="hljs-comment">#testId’));test.addClass(‘<span class="hljs-built_in">testClass’);</span></span></span></code></strong></span> |
以原生js的document对象的querySelector方法获取元素的id，括号内的使用方法同jquery一致，#代表id，该方法返回的是当前div的DOMElement对象，通过angular.element方法即可将即转化为一个jQuery对象，从而对其操作。
方法二：
|
1
2
|
<span style="color: #0000ff;"><strong><span style="font-size: 16px;"><code class="hljs bash">var <span class="hljs-built_in">test = angular.element(document.getElementById(‘<span class="hljs-built_in">test’);test.addClass(‘<span class="hljs-built_in">testClass’);</span></span></span></code></span></strong></span> |
getElementById的方法相信大家用到的比较多，其返回的也是一个DOMElement对象
方法三：
|
1
2
3
4
5
6
7
8
|
<strong><span style="font-size: 16px; color: #0000ff;"><code class="hljs less"><span class="hljs-selector-tag">angular<span class="hljs-selector-class">.forEach(angular.element(document).find(<span class="hljs-string">'div'),function(node){ <span class="hljs-selector-tag">if(node.id == <span class="hljs-string">'testId'){ node<span class="hljs-selector-class">.addClass(<span class="hljs-string">'testClass'); }if(node.className == ‘testClass’){node<span class="hljs-selector-class">.removeClass(‘testClass’)} })</span></span></span></span></span></span></span></span></code></span></strong> |
find搜索的是tagName，这里使用的是div，当然也可以是p标签等等。
方法四：使用$documen
注：不要忘记注入
$document就和angular.element(document)是一样的，是一个整体的dom结构树，包含jqlite的所有方法，所以方法三也可以改为：
|
1
2
3
4
5
6
7
8
|
<span style="color: #0000ff;"><strong><span style="font-size: 16px;"><code class="hljs less"><span class="hljs-selector-tag">angular<span class="hljs-selector-class">.forEach($document.find(<span class="hljs-string">'div'),function(node){ <span class="hljs-selector-tag">if(node.id == <span class="hljs-string">'testId'){ node<span class="hljs-selector-class">.addClass(<span class="hljs-string">'testClass'); }if(node.className == ‘testClass’){node<span class="hljs-selector-class">.removeClass(‘testClass’)} })</span></span></span></span></span></span></span></span></code></span></strong></span> |
另外$document[0]和原生JS的document等效
所以，方法一和方法二可以改为
|
1
2
|
<span style="color: #0000ff;"><strong><span style="font-size: 16px;"><code class="hljs bash">var <span class="hljs-built_in">test = angular.element(<span class="hljs-variable">$document[0].getElementById(‘<span class="hljs-built_in">test’);test.addClass(‘<span class="hljs-built_in">testClass’);</span></span></span></span></code></span></strong></span> |
以及
|
1
2
|
<span style="color: #0000ff;"><strong><span style="font-size: 16px;"><code class="hljs bash">var <span class="hljs-built_in">test = angular.element(<span class="hljs-variable">$document[0].getElementById(‘<span class="hljs-built_in">test’);test.addClass(‘<span class="hljs-built_in">testClass’);</span></span></span></span></code></span></strong></span> |
