详解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 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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
php关联数组与索引数组及其显示方法
2018/03/12 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
详解如何理解vue的key属性
2019/04/14 Javascript
vue实现计算器功能
2020/02/22 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python实现扫雷小游戏
2020/04/24 Python
python基于opencv 实现图像时钟
2021/01/04 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
八一建军节感言
2014/02/28 职场文书
端午节活动策划方案
2014/03/09 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
主题党日活动总结
2014/07/08 职场文书
村班子对照检查材料
2014/08/18 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
初一英语教学反思
2016/02/15 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python