详解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 相关文章推荐
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
学习Vue组件实例
Apr 28 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
以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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
vuex入门最详细整理
2020/03/04 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python正则表达式实例代码
2020/03/03 Python
python中wx模块的具体使用方法
2020/05/15 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
后勤自我鉴定
2013/10/13 职场文书
12月红领巾广播稿
2014/02/13 职场文书
公司年会策划方案
2014/05/17 职场文书
公司周年庆活动方案
2014/08/25 职场文书
单位委托书怎么写
2014/09/21 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
Python绘制分类图的方法
2021/04/20 Python