详解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中通过split函数分割字符串成数组小例子
Sep 21 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Python中捕获键盘的方式详解
2019/03/28 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
应届大学生求职信
2013/12/01 职场文书
同事吵架检讨书
2014/02/05 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
老乡聚会通知
2015/04/23 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
Python实现Hash算法
2022/03/18 Python