详解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写的放大镜效果
Aug 22 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
理解javascript中的with关键字
Feb 15 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
简单了解JavaScript sort方法
Nov 25 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Angular5.1新功能分享
2017/12/21 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
python正则表达式之对号入座篇
2018/07/24 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
《乡愁》教学反思
2014/02/18 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android