当前位置：首页 > 资讯 > 技术文档

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

时间：2020-06-25 03:16 编辑：来源：阅读：
扫一扫，手机访问

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

本文介绍了详解angularjs获取元素以及angular.element()用法，分享给大家，具体如下： [list=1] [*]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元素[/*] [/list] 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();

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

全部评论(0)

上一篇：Angularjs 实现动态添加控件功能
下一篇：Angular ng-class详解及实例代码

资讯排行榜
更多>>