温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-04-20 14:33:10 来源:亿速云 阅读:321 作者:小新 栏目:web开发

这篇文章给大家分享的是有关angularjs获取元素以及angular.element()用法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

JS是什么

JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

具体如下:

  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();

感谢各位的阅读!关于“angularjs获取元素以及angular.element()用法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI