详解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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
javascript window对象属性整理
Oct 24 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
js处理表格对table进行修饰
May 26 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
vue实现路由切换改变title功能
May 28 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 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
php 前一天或后一天的日期
2008/06/28 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php实现简单爬虫的开发
2016/03/28 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python中的tcp示例详解
2018/12/09 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
新年寄语大全
2014/04/12 职场文书
学校搬迁方案
2014/06/15 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
摩登时代观后感
2015/06/03 职场文书