详解angular element()方法使用


Posted in Javascript onApril 08, 2017

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

1.可以使用jquery的选择器

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

详解angular element()方法使用

详解angular element()方法使用

下面是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元素。(由此可见,应该是向上传播的意思。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
angularjs的select使用及默认选中设置
Apr 08 #Javascript
JS排序之冒泡排序详解
Apr 08 #Javascript
JS排序之快速排序详解
Apr 08 #Javascript
JS排序之选择排序详解
Apr 08 #Javascript
Vue异步组件使用详解
Apr 08 #Javascript
利用jQuery解析获取JSON数据
Apr 08 #jQuery
AngularJS $http模块POST请求实现
Apr 08 #Javascript
You might like
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
pyqt5简介及安装方法介绍
2018/01/31 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python实现剪切功能
2019/01/23 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python logging设置和logger解析
2019/08/28 Python
基于python实现文件加密功能
2020/01/06 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
兴趣班停课通知
2015/04/24 职场文书
贴吧吧主申请感言
2015/08/03 职场文书