详解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之bind使用介绍
Oct 09 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序版本自动更新的方法
Jun 14 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue中的inject学习教程
2019/04/24 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
js实现移动端图片滑块验证功能
2020/09/29 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python opencv3实现人脸识别(windows)
2018/05/25 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
销售找工作求职信
2013/12/20 职场文书
销售经理竞聘书
2014/03/31 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
公务员政审个人总结
2015/02/12 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书