详解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 相关文章推荐
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
以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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php实现读取内存顺序号
2015/03/29 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
公司JAVA开发面试题
2015/04/02 面试题
安全生产先进个人事迹材料
2014/12/30 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript