使用angular.element()获取一个dom的方法。

1.可以使用jquery的选择器

2.可以使用javascript的原生查找元素的方法

下面是angular.element()提供的方法

<input type="checkbox" class="input" /><input type="text" class="input1" value="值" /><div class="test">div1</div><div class="test">div2</div><div class="test1"><p>子元素</p></div><div class="test2" data-value="wwe"><!--注释--><p>子元素1</p></div><div class="test3 test4"><p>p1</p><p class="p2">p2</p><p>p3</p><p>p4</p><p>p5</p><span> span1</span></div><script>//bind() - 为一个元素绑定一个事件处理程序//data()-在匹配元素上存储任意相关数据//on() - 在选定的元素上绑定一个或多个事件处理函数//off() - 移除一个事件处理函数//one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次//ready()-当DOM准备就绪时,指定一个函数来执行//removeData()-在元素上移除绑定的数据//triggerHandler() -为一个事件执行附加到元素的所有处理程序//unbind() - 从元素上删除一个以前附加事件处理程序//addClass()-为每个匹配的元素添加指定的样式类名
        angular.element(document.querySelectorAll(".test")).addClass("asd");//after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
        angular.element(document.querySelector(".test")).after("<p>我是通过after()添加进来的</p>");//append()-在每个匹配元素里面的末尾处插入参数内容
        angular.element(document.querySelector(".test")).append("<p>我是通过append()添加进来的</p>");//attr() - 获取匹配的元素集合中的第一个元素的属性的值
        console.log(angular.element(document.querySelector(".test")).attr("class"));//children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
        console.log(angular.element(document.querySelector(".test1")).children());//clone()-创建一个匹配的元素集合的深度拷贝副本
        angular.element(document.querySelector(".test")).append(angular.element(document.querySelector(".test1")).clone());//contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点
        console.log(angular.element(document.querySelector(".test2")).contents());//css() - 获取匹配元素集合中的第一个元素的样式属性的值
        console.log(angular.element(document.querySelector(".test3")).css("color"));//detach()-从DOM中去掉所有匹配的元素
        angular.element(document.querySelector(".test1 p")).detach();//empty()-从DOM中移除集合中匹配元素的所有子节点
        angular.element(document.querySelector(".test2")).empty();//eq()-减少匹配元素的集合为指定的索引的哪一个元素
        console.log(angular.element(document.querySelectorAll(".test3 p")).eq(2)[0].innerHTML);//find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代
        console.log(angular.element(document.querySelector(".test3")).find("span")[0].innerHTML);//hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类
        console.log(angular.element(document.querySelector(".test3")).hasClass("test4"));//html()-获取集合中第一个匹配元素的HTML内容
        console.log(angular.element(document.querySelector(".test2")).html());//next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素
        console.log(angular.element(document.querySelector(".test3 .p2")).next()[0].innerHTML);//parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器
        console.log(angular.element(document.querySelector("span")).parent());//prepend()-将参数内容插入到每个匹配元素的前面(元素内部)
        angular.element(document.querySelector(".test")).prepend("<p>我是通过prepend()添加进来的</p>");//prop()-获取匹配的元素集中第一个元素的属性(property)值
        angular.element(document.querySelector(".input")).prop("checked", true);//remove()-将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)
        angular.element(document.querySelector(".test2")).remove();//removeAttr()-为匹配的元素集合中的每个元素中移除一个属性(attribute)
        angular.element(document.querySelector(".test2")).removeAttr("data-value");//removeClass()-移除集合中每个匹配元素上一个,多个或全部样式
        angular.element(document.querySelector(".test3")).removeClass("test4");//replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
        angular.element(document.querySelector(".test1")).replaceWith("<p>replaceWith()替换的内容</p>");//text()-得到匹配元素集合中每个元素的合并文本,包括他们的后代
        console.log(angular.element(document.querySelector(".test")).text());//toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
        angular.element(document.querySelector(".test1")).toggleClass("test1");angular.element(document.querySelector(".test2")).toggleClass("test1");//val()-获取匹配的元素集合中第一个元素的当前值
        console.log(angular.element(document.querySelector(".input1")).val());//wrap() - 在每个匹配的元素外层包上一个html元素
        angular.element(document.querySelector(".test1")).wrap("<div></div>");</script>

事件

$destory:当Dom被移除时, Angular 拦截所以的jqLite或者jquery Dom对象,销毁api和事件。这个事件能在Dom被移除前用来清除任何Dom上的相关。

方法

controller(name):检索当前元素或其父元素的controller,默认情况下,检索与ngController相关的controller,如果name是以驼峰模式命名的指令名称,那么这个指令的controller就是这样(如’ngModel’) 。

injector():检索当前元素或其父元素的依赖注入。

scope():检索当前元素或其父元素的scope。

isolateScope():如果有一个scope直接附着在当前元素,检索一个隔离的scope,这仅用于元素包含一个创建了新的隔离的scope的指令,这个元素调用scope()总是返回原来的非隔离scope。

inheritedData():和data()一样,但是会沿着Dom走直到值被找到或者走到顶级Dom元素。(由此可见,应该是向上传播的意思。)

转载于:https://www.cnblogs.com/lmyt/p/6605069.html

angular element()相关推荐

  1. angular.element()的用法

    2019独角兽企业重金招聘Python工程师标准>>> 1.引用jQuery的前提下,和$用法基本相同:angular.element('#').html() 例如: angular ...

  2. Angular - - angular.element

    angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...

  3. AngularJS操作DOM——angular.element

    addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 ...

  4. AngularJs angular.element

    当导入jquery时, angular.element查询出来的是个jquery对象,也可以使用jquery的方式来查询 html: var node=document.getElementById( ...

  5. angular.element

    angular.element AngularJs给我们也提供了一些操作DOM的方法---Jqlite angular.element()将DOM元素或者HTML字符串包装成一个jQuery元素. a ...

  6. Angular学习心得之directive——require选项的细节

    2019独角兽企业重金招聘Python工程师标准>>> 谈require选项之前,应该先说说controller选项,controller选项允许指令对其他指令提供一个类似接口的功能 ...

  7. angular 学习理解笔记

    原文: https://github.com/eoinkelly/notes/blob/master/angular/book-building-web-apps-w-angular/angular. ...

  8. Angular面试从喜剧到悲剧的十个问题

    虽然只有10个问题,但是覆盖了angular开发中的各个方面,有基本的知识点,也有在开发过程中遇见的问题,同时也有较为开放性的问题去辨别面试者的基础水准和项目经验如果自己一年前面试肯定是喜剧到悲剧的转 ...

  9. 22.调用element方法控制dom元素

    <!DOCTYPE html><html ng-app="a101"><head lang="en"> <meta c ...

最新文章

  1. spring 的MAVEN配置
  2. cookie中文乱码
  3. Windows系统MySQL8.0的安装教程
  4. Java的反射作用_java反射机制的作用与优点
  5. PHP中CURL方法curl_setopt()函数的一些参数
  6. XML XPATH simpleXML
  7. 2020蓝桥杯省内模拟赛C++B组1-8(详细解析,看完就会)
  8. 面向对象(Python):学习笔记之模块和包
  9. learn go return fuction
  10. 兰州大学计算机复试英语翻译,2019兰州大学计算机专硕复试回忆
  11. 游戏策划小白笔记——Common Sense(二)
  12. com.android.htcdialer+意外停止+htc,HTC刷机为什么会变砖 HTC刷机变砖修复方法介绍【教程】...
  13. docker-1 常用命令
  14. 优秀html5网页设计,五个国外优秀的HTML5酷站欣赏|H5开发第二课
  15. 字节架构师:来说说 Kafka 的消费者客户端详解,你都搞懂了吗,Javaweb面试总结
  16. 云计算、物联网、大数据到底是什么?
  17. python提取图片中的曲线_OpenCV如何提取图片中曲线
  18. 液晶OLED接口MIPI之DSI协议学习
  19. react-dnd官方文档
  20. html的三种样式定义方式:外部样式表;内部样式表;内联样式表

热门文章

  1. hadoop 多机全分布式安装步骤(虚拟机1master+2slave)
  2. LeetCode 1712. 将数组分成三个子数组的方案数(前缀和 + 二分查找)
  3. 使用LSTM建立seq2seq模型进行语言翻译
  4. [Kaggle] Digit Recognizer 手写数字识别
  5. LeetCode 310. 最小高度树(图 聪明的BFS,从外向内包围)
  6. docker $PWD路径_Docker 技术系列之安装Redis单机版和集群版
  7. hbase的2.2.4版本支持哪个版本的hadoop_Hadoop 2.7 不停服升级到 3.2 在滴滴的实践
  8. python中的随机函数random
  9. python编写简单赌博游戏赏析及注意事项
  10. thinkphp用来做什么项目_thinkphp第1课:使用thinkphp创建一个项目