详解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获得服务器端控件的ID的实现代码
Dec 28 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
JavaScript 定时器详情
Nov 11 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
source.php查看源文件
2006/12/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
19个Android常用工具类汇总
2014/12/30 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
原生js实现随机点名
2020/07/05 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python实现动态数组的示例代码
2019/07/15 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
大学班级计划书
2014/04/29 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
用Python写一个简易版弹球游戏
2021/04/13 Python
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL
教你如何用cmd快速登录服务器
2022/06/10 Servers