Angular.element和$document的使用方法分析,代替jquery
来源:互联网 发布:琅琊榜2 知乎 编辑:程序博客网 时间:2024/06/05 01:04
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
方法一:querySelector
//这里也可以查询.className,前提是这个className是唯一的,因为querySelector返回的是第一个匹配到的元素var test = angular.element(document.querySelector(‘#testId’));test.addClass(‘testClass’);
以原生js的document对象的querySelector方法获取元素的id,括号内的使用方法同jquery一致,#代表id,该方法返回的是当前div的DOMElement对象,通过angular.element方法即可将即转化为一个jQuery对象,从而对其操作。
方法二:getElementById
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’);
0 0
- Angular.element和$document的使用方法分析,代替jquery
- angular.element的方法
- Angular.element 的用法
- angular.element 的方法
- Angular中$broadcast和$emit的使用方法
- angular.element()方法的使用
- SAXBuilder、Document、Element的用法
- SAXBuilder、Document、Element的用法
- angular.foreach 的使用方法
- document.all的使用方法.
- Angular和jQuery之间的区别
- angular和jquery的post请求方式
- angular-element
- angular.element
- angular.element
- angular实现window.onload和$(document).ready
- Angular中element具有的方法
- jQuery和ajax代替iframe
- java的认识和了解
- MYSQL 解锁与锁表
- 分形小记
- cocos Builder的一点理解
- 获取手机联系人数据方法
- Angular.element和$document的使用方法分析,代替jquery
- 【JZOJ 3083】塔(加强)
- 图片轮播
- Impala实践之六:使用Rest Api
- 设计模式GOF23——解释器模式
- 导航样式布局(自定义样式布局)
- Impala实践之七:添加负载均衡
- D3形状(一):直线生成器
- 菜单的显示和影藏