详解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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
javascript实现简单留言板案例
Feb 09 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
Apache中php.ini的设置方法
2013/02/28 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python yield和Generator函数用法详解
2020/02/10 Python
python 命名规范知识点汇总
2020/02/14 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
中药专业自荐信范文
2014/03/18 职场文书
医疗纠纷协议书
2014/04/16 职场文书
合作协议书
2014/04/23 职场文书
银行进社区活动总结
2014/07/07 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server