AngularJS jqLite详情

来源：互联网发布：淘宝好的第三方活动编辑：程序博客网时间：2024/06/14 19:48

之前用过一下jqLite，刚了解的时候常于JQuery分不清，其实它们是不一样的。jqLite中，通过angular.element(param)获得angular的元素。其功能与Jquery中的$()类似，但是存在一定的区别，$()里面是通过各种选择器选择到元素；但是angular.element方法的参数只有两种，一种是Dom元素，一种是类似html元素的字符串。

   例如 angular.element(‘<ul>’); 下面这种是行不通的：<input name=“email” id=“myId”></input>var email = angular.element(‘myId’);如果要通过id获取到元素，需通过这种方式var email=angular.element(document.getElementById(‘myId’));

jqLite简介

angular并不依赖jQuery。事实上，Angular源码里包含了一个内嵌的轻量级的jquery:jqLite. 当Angular检测到你的页面里有jQuery出现，他就会用这个jQuery而不再用jqLite。比如，在directive中可以通过jqLite的方法访问你要应用到的元素。

angular.module('jqdependency', [])  .directive('failswithoutjquery', function() {    return {      restrict : 'A',      link : function(scope, element, attrs) {               element.hide(4000)             }    }});

jqLite不是jQuery，它只是jQuery的一个轻量级实现，包含了大多数常用功能。一般在项目中，不需要依赖jQuery，一般功能通过jqLite实现就足够了。

jqLite使用

1、简单加粗字体

<html ng-app="exampleApp"><head><meta charset="utf-8">    <title>jqLite 测试</title>    <script src="angular.js"></script>    <link href="bootstrap.css" rel="stylesheet" />    <link href="bootstrap-theme.css" rel="stylesheet" />    <script>        angular.module("exampleApp", [])            .directive("demoDirective", function () {                return function (scope, element, attrs) {                    var items = element.children();                    for (var i = 0; i < items.length; i++) {                        if (items.eq(i).text() == "Kobe Bryant") {                            items.eq(i).css("font-weight", "bold");                        }                     }                }            })            .controller("defaultCtrl", function ($scope) {                // controller defines no data or behaviors            })                  </script></head><body ng-controller="defaultCtrl">    <h3 class="panel panel-info">NBA stars</h3>    <ol demo-directive class="list-group">        <li class="list-group-item">Kobe Bryant</li>        <li class="list-group-item">Tim Duncan</li>        <li class="list-group-item">Tracy McGrady</li>    </ol></body></html>

效果：

2、DOM操作

<!DOCTYPE HTML><html ng-app="elementExample"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="angular.js"></script><script>function button1(){alert(angular.element('<div id="test">测试html元素内容作为参数</div>').html());}//使用DOM元素作为参数function button2(){var a = document.getElementById('myId');alert(angular.element(a).html());}</script></head><body><br/>使用html字符串为参数<input type="button" onclick="button1()" value="button1"></input><br/><div name="email" id="myId">使用DOM元素作为参数</div><input type="button" onclick="button2()" value="button2"></input></body></html>

效果：

jqLite API参考

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元素

0 0