详解angularjs获取元素以及angular.element()用法


Posted in Javascript onJuly 25, 2017

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下:

  1. addClass()-为每个匹配的元素添加指定的样式类名
  2. after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
  3. append()-在每个匹配元素里面的末尾处插入参数内容
  4. attr() - 获取匹配的元素集合中的第一个元素的属性的值
  5. bind() - 为一个元素绑定一个事件处理程序
  6. children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
  7. clone()-创建一个匹配的元素集合的深度拷贝副本
  8. contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点
  9. css() - 获取匹配元素集合中的第一个元素的样式属性的值
  10. data()-在匹配元素上存储任意相关数据
  11. detach()-从DOM中去掉所有匹配的元素
  12. empty()-从DOM中移除集合中匹配元素的所有子节点
  13. eq()-减少匹配元素的集合为指定的索引的哪一个元素
  14. find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代
  15. hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类
  16. html()-获取集合中第一个匹配元素的HTML内容
  17. next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素
  18. on() - 在选定的元素上绑定一个或多个事件处理函数
  19. off() - 移除一个事件处理函数
  20. one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
  21. parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器
  22. prepend()-将参数内容插入到每个匹配元素的前面(元素内部)
  23. prop()-获取匹配的元素集中第一个元素的属性(property)值
  24. ready()-当DOM准备就绪时,指定一个函数来执行
  25. remove()-将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)
  26. removeAttr()-为匹配的元素集合中的每个元素中移除一个属性(attribute)
  27. removeClass()-移除集合中每个匹配元素上一个,多个或全部样式
  28. removeData()-在元素上移除绑定的数据
  29. replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
  30. text()-得到匹配元素集合中每个元素的合并文本,包括他们的后代
  31. toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
  32. triggerHandler() -为一个事件执行附加到元素的所有处理程序
  33. unbind() - 从元素上删除一个以前附加事件处理程序
  34. val()-获取匹配的元素集合中第一个元素的当前值
  35. wrap()-在每个匹配的元素外层包上一个html元素

 ng-click得到当前元素,angular.element()用法

话题1:ng-click获得当前元素,不多说直接看示例代码

<!DOCTYPE html>

<html>

<head>

  <title></title>

  <script src="lib/jquery/jquery-1.10.2.min.js"></script>

  <script src="lib/angular/angular.min.js"></script>

</head>

<body ng-app>

<div ng-controller="TestCtrl">

  <a href data="1" ng-click="GoPage($event.target)">1</a>

  <a href data="2" ng-click="GoPage($event.target)">2</a>

  <a href data="3" ng-click="GoPage($event.target)">3</a>

  <a href data="4" ng-click="GoPage($event.target)">4</a>

  <a href data="5" ng-click="GoPage($event.target)">5</a>

  {{ page }}

</div>

<script>

  function TestCtrl($scope) {

    $scope.page = 1;

    $scope.getData = function () {

      console.log($scope.page);

    }

    $scope.GoPage = function (target) {

      $scope.page = target.getAttribute('data');

      this.getData();

    }

  }

</script>

</body>

</html>

话题2:angular.element()用法(这只是一个酱油)

在Control中,angular.element()返回一个jquery对象,如angular.element(document).ready(function(){});

所以你可以对她做你对所有jquery对象可以做的事

返回指定元素的scope:

var sidebar = document.getElementsById('sidebar');
var scope = angular.element(sidebar).scope();

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

Javascript 相关文章推荐
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 #Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 #Javascript
js事件委托和事件代理案例分享
Jul 25 #Javascript
基于JavaScript实现多级菜单效果
Jul 25 #Javascript
简单谈谈React中的路由系统
Jul 25 #Javascript
老生常谈js中的MVC
Jul 25 #Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python和php学习哪个更有发展
2020/06/17 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
大学生党员自我评价范文
2014/04/09 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
Java版 单机五子棋
2022/05/04 Java/Android