详解angularjs获取元素以及angular.element()用法

更新时间：2017年07月25日 11:33:40 作者：Lonely,lonelyBurning

本篇文章主要介绍了详解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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

angular安装import echarts from‘echarts‘标红报错解决
这篇文章主要介绍了angular安装import echarts from‘echarts‘标红报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
利用Ionic2 + angular4实现一个地区选择组件
ionic是一个移动端开发框架，使用hybird技术，只要使用前端开发技术就可以开发出电脑端，安卓端和ios端的站点程序。下面这篇文章主要给大家介绍了关于利用Ionic2 + angular4实现一个地区选择组件的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
Angular2 环境配置详细介绍
这篇文章主要介绍了Angular2 环境配置的相关资料,需要的朋友可以参考下
2016-09-09
Angular将填入表单的数据渲染到表格的方法
这篇文章主要介绍了Angular将填入表单的数据渲染到表格的方法，非常具有实用价值，需要的朋友可以参考下
2017-09-09
探讨AngularJs中ui.route的简单应用
这篇文章主要介绍了AngularJs中ui.route的简单应用,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
使用typescript开发angular模块并发布npm包
本篇文章主要介绍了使用typescript开发angular模块并发布npm包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
AngularJS自定义控件实例详解
这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下
2016-12-12
AngularJS中如何使用echart插件示例详解
之前因为项目的需求，第一次系统的使用了angular这一优秀的js框架，其所拥有的许多优秀特性极大的方便了项目的开发，然而在开发中也遇到过不少的问题，趁着最近有时间给大家总结一下，这篇文章将会介绍使用angularjs1结合百度的图表插件echart作为例子用以演示。
2016-10-10
angular学习之动态创建表单的方法
这篇文章主要介绍了angular学习之动态创建表单的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Angular表格神器ui-grid应用详解
这篇文章主要为大家详细介绍了Angular表格神器ui-grid应用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09

详解angularjs获取元素以及angular.element()用法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具