AngularJS操作DOM----angular.element

电玩女神 2021-09-14 06:56 300阅读 0赞

AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs是不建议和JQuery同时使用的，所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite

查阅官方提供的api，可以看到使用方法是angular.element(ele)，其中，允许传入的参数ele的类型是“HTML string or DOMElement to be wrapped into jQuery.”一般传入参数DOMElement。

angular.element：将DOM元素或者HTML字符串一包装成一个jQuery元素。

1.querySelector和querySelectorAll  
是W3C提供的 新的查询接口，其主要特点如下：  
①、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。   
②、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。   
③、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。

一.不引用jquery的情况

angular.element(document.querySelector("\#span1")).addClass('test1');

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> <style type="text/css"> .test1{color: #f00;} .test2{color:#009688;} </style> </head> <body> <div ng-app="myApp" > <div ng-controller="TestController"> <span id="span1" class="span1">item1</span> <span id="span2" class="span2 test2">item2</span> </div> </div> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module('myApp', []); myApp.controller('TestController', ['$scope', function($scope) { console.log('ll'); angular.element(document.querySelector("#span1")).addClass('test1'); angular.element(document.querySelector("#span2")).removeClass('test2'); }]); </script> </body> </html>

二.引用jQuery

引用jQuery的前提下，和$用法基本相同：angular.element(‘\#‘).html();

angular.element("\#span1").addClass('test1');

注意：在angular\[.min\].js文件之前引入jQuery文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> <style type="text/css"> .test1{color: #f00;} .test2{color:#009688;} </style> </head> <body> <div ng-app="myApp" > <div ng-controller="TestController"> <span id="span1" class="span1">item1</span> <span id="span2" class="span2 test2">item2</span> </div> </div> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module('myApp', []); myApp.controller('TestController', ['$scope', function($scope) { console.log('ll'); angular.element("#span1").addClass('test1'); angular.element("#span2").removeClass('test2'); }]); </script> </body> </html>

注意：一旦在div使用ng-app（如ng-app="myApp"）时，js就必须申明var myApp = angular.module('myApp', \[\]);,否则会报错误。

三.angular.element方法汇总

addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选 clone()-创建一个匹配的元素集合的深度拷贝副本 contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点 css() - 获取匹配元素集合中的第一个元素的样式属性的值 data()-在匹配元素上存储任意相关数据 detach()-从DOM中去掉所有匹配的元素 empty()-从DOM中移除集合中匹配元素的所有子节点 eq()-减少匹配元素的集合为指定的索引的哪一个元素 find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代 hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类 html()-获取集合中第一个匹配元素的HTML内容 next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素 on() - 在选定的元素上绑定一个或多个事件处理函数 off() - 移除一个事件处理函数 one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次 parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器 prepend()-将参数内容插入到每个匹配元素的前面（元素内部） prop()-获取匹配的元素集中第一个元素的属性（property）值 ready()-当DOM准备就绪时，指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。） removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute） removeClass()-移除集合中每个匹配元素上一个，多个或全部样式 removeData()-在元素上移除绑定的数据 replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合 text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代 toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类, 取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类 triggerHandler() -为一个事件执行附加到元素的所有处理程序 unbind() - 从元素上删除一个以前附加事件处理程序 val()-获取匹配的元素集合中第一个元素的当前值 wrap()-在每个匹配的元素外层包上一个html元素