详解angularjs获取元素以及angular.element()用法
时间:2019-03-30
本文章向大家介绍详解angularjs获取元素以及angular.element()用法,主要包括详解angularjs获取元素以及angular.element()用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下:
- addClass()-为每个匹配的元素添加指定的样式类名
- after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
- append()-在每个匹配元素里面的末尾处插入参数内容
- attr() - 获取匹配的元素集合中的第一个元素的属性的值
- bind() - 为一个元素绑定一个事件处理程序
- children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
- clone()-创建一个匹配的元素集合的深度拷贝副本
- contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点
- css() - 获取匹配元素集合中的第一个元素的样式属性的值
- data()-在匹配元素上存储任意相关数据
- detach()-从DOM中去掉所有匹配的元素
- empty()-从DOM中移除集合中匹配元素的所有子节点
- eq()-减少匹配元素的集合为指定的索引的哪一个元素
- find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代
- hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类
- html()-获取集合中第一个匹配元素的HTML内容
- next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素
- on() - 在选定的元素上绑定一个或多个事件处理函数
- off() - 移除一个事件处理函数
- one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
- parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器
- prepend()-将参数内容插入到每个匹配元素的前面(元素内部)
- prop()-获取匹配的元素集中第一个元素的属性(property)值
- ready()-当DOM准备就绪时,指定一个函数来执行
- remove()-将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)
- removeAttr()-为匹配的元素集合中的每个元素中移除一个属性(attribute)
- removeClass()-移除集合中每个匹配元素上一个,多个或全部样式
- removeData()-在元素上移除绑定的数据
- replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
- text()-得到匹配元素集合中每个元素的合并文本,包括他们的后代
- toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
- triggerHandler() -为一个事件执行附加到元素的所有处理程序
- unbind() - 从元素上删除一个以前附加事件处理程序
- val()-获取匹配的元素集合中第一个元素的当前值
- 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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 玩转数据地图系列之——地图上的迷你条形图
- 树上倍增求LCA及例题
- 深度强化学习-DDPG算法原理和实现
- 你绝对想不到,数据地图还能这么玩~
- TensorFlow从0到1 - 17 - Step By Step上手TensorBoard
- 深度强化学习-Actor-Critic算法原理和实现
- 深度强化学习-Policy Gradient基本实现
- TensorFlow从0到1 - 7 - TensorFlow线性回归的参数溢出之坑
- 买卖股票算法题的后续!
- 一个例子教你如何与出题人斗智斗勇
- 用数据来聊聊国产电影~
- 如何买卖股票?不要慌,我有妙招!
- 2017.11.7解题报告
- TensorFlow从0到1 - 11 - 74行Python实现手写体数字识别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微商城订单模块重构实践
- 有赞移动应用如何给页面安上“任意门”
- 无用的设计模式-上篇
- JavaScript简介及JavaScript中的关键保留字、变量和数据类型
- 有赞iOS精准测试实践
- 聊聊java中的哪些Map:(一)HashMap(1.8)源码分析
- spring redis 模糊查找key
- EXTJS防止表单中回车触发提交
- 中间件的解析漏洞详解及演示
- 任意文件包含漏洞原理解析及演示
- 【每日一题】39. Combination Sum
- 有赞灰度发布与蓝绿发布实践
- 有赞 Android 编译进阶之路 —— 增量编译提效方案Savitar
- react+electron使应用窗口相互独立
- Presto 在有赞的实践之路