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,一经查实,立即删除!

相关文章

电脑连接android手机测试,关于如何将手机画面投屏到PC的测试(Android)

如何将手机画面投屏到PC上并进行控制呢?为什么要投屏一边LOL ,一边朋友圈?办公呢? 我手机插上充电就好,电脑上刷刷手机呢?哈哈准备工具下载工具如何使用无线使用写在最后后续为什么要投屏我最近买了个带鱼屏, 屏幕长到用不完的地步了. 总想折腾折腾看看还能玩出来什么花样手…

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

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

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

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

android获取小程序音频时长,微信小程序获取音频时长与实时获取播放进度

首先在没有播放音频之前&#xff0c;居然拿不到总时长但是在播放之后也需要设置setTimeout来获取所以在监听音频播放进度更新事件中获取。顺便获取当前播放进度按照官方的写法audioPlayed: function () {myAudio.play()setTimeout(() > {myAudio.onTimeUpdate(() > {cons…

Shell awk文本处理,shell脚本编写

Shell awk文本处理,shell脚本编写 一:内容包含awk、变量、运算符、if多分支 <a>语法糖&#xff1a; awk [options] commands files option   -F  定义字段分隔符,默认的分隔符是连续的空格或制表符      使用option中的-F参数定义间隔符号      用$1,$2,$3…

当超级智能崛起时……

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

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

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

Android自定义组合布局,Android 流式布局 + 自定义组合控件

自定义组合控件package yanjupeng.bawei.com.day09.two;import android.content.Context;import android.util.AttributeSet;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.widget.EditText;import android.widget.Lin…

freemark循环map_freemarker中循环map根据key值得value 报错

[#list uMap?keys as key]${uMap[key]}[/#list]Map uMap new HashMap();uMap.put(1,"zhangsan");uMap.put(2,"lisi");model.addAttribute("uMap", uMap);严重: Servlet.service() for servlet springMVC threw exceptionFreeMarker template e…

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;而是正在改变世界。在新年以及新的十年…

python线程池官网-Python线程池下载txt

下次试试用scrapy模块 # codingutf-8 import requests import threadpool def download_file(i): """下载文件""" download_url f"https://www.txt2016.com/e/DownSys/xiazai/?classid1&pathid0&id{i}" file requests.get(…

select样式的重写

select {/*统一边框*/border: solid 1px #000;/*将默认的select选择框样式清除*/appearance:none;//这个样式就是清楚他的下拉按钮的默认样式-moz-appearance:none;-webkit-appearance:none;/*替换选择框的最右侧显示小箭头图片*/background: url("http://****.png")…

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;快来分享你的购物心…

android 拍照屏幕大小,Android Camera 找出屏幕的最佳尺寸大小

大家平时都会调用到Camera 这个API&#xff0c;在设置Camera.Paramera的参数的时候&#xff0c;有一个预览大小。也就是&#xff1a;setPreviewSize(int width, ing height)这个相机的大小不能随便设置&#xff0c;如果设置了不可接受的值&#xff0c;程序会崩溃掉。现在给大家…

Shell脚本-自动化部署反向代理、WEB、nfs

部署nginx反向代理三个web服务&#xff0c;调度算法使用加权轮询(由于物理原因只开启两台服务器) AutoNginxNfsService.sh #/bin/bash systemctl status nginx if(($?4))then yum install -y nginxif(($?0))then#echo Yes!systemctl start nginxif(($?0))thenecho "Con…

a76比a73强多少_arm的a73和a72同上10nm,谁强?

说到ARM A72和A73 就不得不说一个事&#xff0c;A73相比A72并不是一个简单的升级&#xff0c;A72和A73不是同一个团队做的。A73其实有点像当初的A17&#xff0c;整体微架构、流水线、宽度设计都与之类似。A73和A72相比没有保留A72的三发射&#xff0c;改用了双发射。ARM的宣传A…