详解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比较文档位置
Apr 08 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
PHPlet在Windows下的安装
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
python小白切忌乱用表达式
2020/05/29 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
员工考核管理制度
2014/02/02 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
护理见习报告范文
2014/11/03 职场文书
公务员个人年终总结
2015/02/12 职场文书