详解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 Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript变量声明实例分析
Apr 25 Javascript
纯JS代码实现气泡效果
May 04 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
超轻量级的js时间库miment使用解析
Aug 02 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
中英文字符串翻转函数
2008/12/09 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python交互式图形编程实例(三)
2017/11/17 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
英语自荐信常用语句
2013/12/13 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
php中pcntl_fork详解
2021/04/01 PHP
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
python数字图像处理:图像的绘制
2022/06/28 Python