angular element()

使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前沿科技】看完这篇文章前,你绝对想象不到欧美航空机器人竟然发展到这个程度了!...

来源&#xff1a;中国机器人网《工程》杂志撰文认为&#xff0c;工业机器人在许多行业中已经建立了良好的基础&#xff0c;并且通常与现代化的先进制造系统相关联&#xff0c;但是&#xff0c;航空制造仍然严重依赖熟练的手工作业。航空制造中采用机器人的一个主要障碍是缺乏精…

beautifulsoup网页爬虫解析_Python爬虫快速入门,静态网页爬取

在开始之前&#xff0c;请确保你的电脑上已经安装好了BeautifulSoup库&#xff0c;可以通过在命令行中输入pip install beautifulsoup4来进行安装。一、数据解析在爬取之前&#xff0c;我们需要检测下响应状态码是否为200&#xff0c;如果请求失败&#xff0c;我们将爬取不到任…

当超级智能崛起时……

来源&#xff1a;资本实验室“大雷&#xff0c;你脑子没出啥毛病吧&#xff1f;”李春花轻声问道&#xff0c;眼睛里满是关切的神色。“喔&#xff0c;你放心&#xff0c;俺没事&#xff01;上次的事故之后&#xff0c;我的芯片和操作系统都已经升级到最新版本啦&#xff01;”…

小米小爱音箱Pro8安装app_小米小爱音箱HD获DXO评为第二!低音准确度很高

前几天&#xff0c;知名评测机构DXOMARK公布了用于测试无线音箱音质的新基准——DXOMARK Speaker。据了解&#xff0c;这个基准由百个测试汇集而成&#xff0c;该机构称这个基准为针对音箱产品唯一的科学评分。11月9日&#xff0c;该机构发文称&#xff0c;小米小爱音箱HD获得了…

Lua的垃圾回收机制详解

Lua 是一种轻量级的编程语言&#xff0c;广泛用于嵌入到其他应用程序中&#xff0c;尤其是在游戏开发领域。Lua 的内存管理机制采用了自动垃圾收集&#xff08;Garbage Collection&#xff09;的方法。以下是Lua内存管理的一些关键方面&#xff1a; 垃圾收集原理概述 Lua 使用…

2020年AI怎么发展?听加州大学、谷歌、英伟达、IBM怎么说

来源&#xff1a;机器之心AI 领域最杰出的头脑如何总结 2019 年技术进展&#xff0c;又如何预测 2020 年发展趋势呢&#xff1f;本文介绍了 Soumith Chintala、Celeste Kidd、Jeff Dean 等人的观点。人工智能不是将要改变世界&#xff0c;而是正在改变世界。在新年以及新的十年…

ip打包后如何加入 xilinx_科普!插上USB设备后电脑是怎么识别的呢?

欢迎FPGA工程师加入官方微信技术群每次当插上鼠标或者U盘的时候&#xff0c;电脑是怎么知道是什么设备的呢&#xff1f;这里用到的就是枚举了。枚举&#xff0c;其实就是让HOST认识这个USB涉笔&#xff0c;并且为该设备准备资源&#xff0c;建立好主机和设备之间的数据传递机制…

两院院士评选2019年中国、世界十大科技进展新闻揭晓

来源&#xff1a;科学网由中国科学院、中国工程院主办&#xff0c;中国科学院学部工作局、中国工程院办公厅、中国科学报社承办&#xff0c;中国科学院院士和中国工程院院士投票评选的2019年中国十大科技进展新闻、世界十大科技进展新闻&#xff0c;1月11日在京揭晓。此项年度评…

android炫酷叼ui,XUI: 一个简洁而优雅的Android原生UI框架,解放你的双手!

XUI一个简洁而又优雅的Android原生UI框架&#xff0c;解放你的双手&#xff01;还不赶紧点击使用说明文档&#xff0c;体验一下吧&#xff01;涵盖绝大部分的UI组件&#xff1a;TextView、Button、EditText、ImageView、Spinner、Picker、Dialog、PopupWindow、ProgressBar、Lo…

笔记本电脑麦克风在哪里_定制款MacBook Pro? 13.3 体验 “旧”时代的 One Pecie_笔记本电脑...

2020-11-11 13:19:377点赞18收藏18评论9月28日 - 11月12日&#xff0c;参与#双11购物攻略#征稿活动&#xff0c;赢取苹果全家桶8888元超级锦鲤大奖&#xff01;瓜分十万金币&#xff0c;值得买周边一次全攒齐&#xff01;品类、品牌、场景、价格&#xff0c;快来分享你的购物心…

杨振宁眼中的物理学之美

来源&#xff1a;EETOP本文是当代物理学大师杨振宁教授1997年1月17日在香港中华科学与社会协进会与香港中文大学主办的演讲会上的演讲词&#xff0c;讲题原为“科学工作有没有风格”。转载于香港《二十一世纪》杂志1997 年 4 月号&#xff0c;总第40期&#xff1b;也收入杨振宁…

wechat电脑版_【学术工具】如何快速、免费翻译英文材料?原创·WeChat公号:本硕博资讯...

★学术工具英文材料免费翻译如何快速、免费翻译英文材料&#xff1f;原创WeChat公号&#xff1a;本硕博资讯分享一些亲测可用的资源&#xff0c;仅用于学术交流。建议大家试着自己翻译&#xff0c;提升英语水平。版权声明&#xff1a;如有侵权问题请通过邮箱或者公众号后台私信…

20155234 2016-2017-2 《Java程序设计》第5周学习总结

20155234 2016-2017-2 《Java程序设计》第5周学习总结 教材学习内容总结 Java中所有错误都会被打包为对象&#xff0c;运用try、catch&#xff0c;可以在错误发生时显示友好的错误信息。运用try、catch&#xff0c;还可以在捕捉处理错误之后&#xff0c;尝试恢复程序正常执行流…

harmonyos 编译打包生成app,鸿蒙(HarmonyOS)App开发入门(2)—运行HelloWorld

前言为确保HarmonyOS应用的完整性&#xff0c;HarmonyOS通过数字证书和授权文件来对应用进行管控&#xff0c;只有签名过的HAP(编译产物&#xff0c;后面章节详细讲述&#xff0c;本章主要讲证书申请到代码运行到真机)才允许安装到设备上进行运行(如果不带签名信息&#xff0c;…

【周末阅读】你不得不知道的10大AI赋能行业,你身边都能找到!

来源&#xff1a;青岛智能产业技术研究院智能产业 前沿高地【导读】AI正突破诸多技术瓶颈&#xff0c;在市政、交通、医疗、等行业横向渗透&#xff0c;逐步走入大众日常生活中。国务院印发的《新一代人工智能发展规划》中指出&#xff0c;2020年人工智能产业规模将超过1500亿元…

bindresult必须在哪个位置_管道疏通剂哪个牌子好 管道疏通机使用方法有哪些

平时大家不用的水或者一些物品&#xff0c;在处理的时候应该都会倒到下水道之中&#xff0c;而下水道确实具备着这一种效果&#xff0c;但很多时候&#xff0c;下水道往往会因为口比较小&#xff0c;而被一些物品所堵塞&#xff0c;这样一来&#xff0c;影响上其实会非常大&…

华为深度学习新模型DeepShift:移位和求反代替乘法,神经网络成本大降

来源&#xff1a;机器学习研究会订阅号【导读】深度学习模型&#xff0c;尤其是卷积神经网络的计算成本问题主要是由于卷积层和全连接层中大量进行乘法运算造成的。华为异构实验室的研究人员提出&#xff0c;用移位和求反运算代替乘法&#xff0c;可有效缓解计算成本过高的问题…

如何把竖排的数据变为横排_如何有效的自学日语自学的经验都在这里了

一&#xff0e;基础知识引入自学一门语言之前&#xff0c;先要了解这门语言的基本信息。从狭义上来说&#xff0c;语言是能够传达意义的声音&#xff0c;每个语种都由一定数量的声音构成。比如日语&#xff0c;日语普通话中的声音一共有104个。当这些声音对应成符号书写下来时&…

jquery获取html页面参数乱码,JS或Jquery获取浏览器URL的参数值 汉字值乱码 并转码...

1、获取url很简单&#xff0c;代码如下&#xff1a;window.location.href;2、jquery获取url参数比较复杂&#xff0c;要用到正则表达式&#xff0c;所以学好javascript正则式多么重要的事情首先看看单纯的通过javascript是如何来获取url中的某个参数&#xff1a;//获取url中的参…

信阳农林技术学院经纬度_信阳无人机创业团队:让梦想在田野起飞

青春由磨砺而出彩&#xff0c;人生因奋斗而升华。在河南信阳&#xff0c;有这样一个年轻的创业团队&#xff0c;他们立志扎根农村做新型农民。他们在大学期间就钻研如何把无人机技术和现代农业生产相结合&#xff0c;并且运用到田间地头&#xff0c;在田野之上放飞青春梦想。一…