详解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 相关文章推荐
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Bootstrap按钮组实例详解
Jul 03 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
微信小程序基础教程之echart的使用
Jun 01 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
CSS常用网站布局实例
2008/04/03 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
javascript常见操作汇总
2014/09/03 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python 创建TCP服务器的方法
2020/07/28 Python
如何使用Python调整图像大小
2020/09/26 Python
售后主管岗位职责
2013/12/08 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
企业消防安全制度
2014/02/02 职场文书
师德演讲稿范文
2014/05/06 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
教师学期个人总结
2015/02/11 职场文书
筑梦中国心得体会
2016/01/18 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js