热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

angularelement()

使用angular.element()获取一个dom的方法。1.可以使用jquery的选择器2.可以使用javascript的原生查找元素的方法下面是angular.elem

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

1.可以使用jquery的选择器

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

 

下面是angular.element()提供的方法

<input type="checkbox" class="input" />
    <input type="text" class="input1" value="值" />
    <div class="test">div1div>
    <div class="test">div2div>
    <div class="test1">
        <p>子元素p>
    div>
    <div class="test2" data-value="wwe">
        
        <p>子元素1p>
    div>
    <div class="test3 test4">
        <p>p1p>
        <p class="p2">p2p>
        <p>p3p>
        <p>p4p>
        <p>p5p>
        <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("

我是通过after()添加进来的

"); //append()-在每个匹配元素里面的末尾处插入参数内容 angular.element(document.querySelector(".test")).append("

我是通过append()添加进来的

"); //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("

我是通过prepend()添加进来的

"); //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("

replaceWith()替换的内容

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

 


推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • jQuery实现简单的动画效果及用法详解
    本文详细介绍了使用jQuery实现简单动画效果的方法,包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例,并解释了参数的含义和使用技巧。通过本文的学习,读者可以掌握如何使用jQuery实现各种动画效果,为网页增添生动和互动性。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 不同优化算法的比较分析及实验验证
    本文介绍了神经网络优化中常用的优化方法,包括学习率调整和梯度估计修正,并通过实验验证了不同优化算法的效果。实验结果表明,Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 树莓派语音控制的配置方法和步骤
    本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助,文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行,然后使用Eoman的控制方法,即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]
  • 本文介绍了Oracle存储过程的基本语法和写法示例,同时还介绍了已命名的系统异常的产生原因。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
author-avatar
十字心死_823
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有