jqLite
一、关于DOM导航的jqLite方法
children() 返回一组子元素。这个方法的jqLite实现不支持jQuery所提供的选择器特性
eq(index) 从一个元素集合中返回指定索引下的元素
find(tag) 按照指定的tag名称定位所有的后代元素。它可以在一个元素的子元素、孙元素等所有后代元素中查找指定类型的元素。
next() 获得下一个兄弟元素。不支持jquery所提供的选择器特性
parent() 返回父元素,不支持jquery所提供的选择器特性
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() == "Oranges") {
items.eq(i).css("font-weight", "bold");
}
}
}
})
对于这个指令及所有指令来说的出发点在于,element参数被传递给了链接函数。element参数是一个jqLite对象,支持上述所有方法。element对象表示该指令被应用到的元素。这里使用了eq方法来获得当前索引下的元素,而不是将jqLite对象当做js数组来处理,因为eq方法返回一个包含了指定索引下的元素的jqLite对象,并且支持所有的JqLite方法。
二、修改元素
用于修改元素的jqLite方法
addClass(name) 将jqLite对象中的所有元素添加到指定的class
attr(name)/attr(name,value) 获得jqLite对象中的第一个元素的指定特性的值,或者为所有元素设置指定值
css(name)/css(name,value) 获得jqLite对象中第一个元素的指定css属性的值,或者为所有元素设置指定的值
hasClass(name) 如果jqLite对象中有任一对象属于指定的class时,返回true
prop(name)/prop(name,value) 获得jqLite对象中的第一个元素的指定属性的值,或者为所有元素设置指定值
removeAttr(name) 从jqLite对象的所有元素中移除某个特性
removeClass(name) 从jqLite对象中移除具有指定class的元素
text()/text(value) 获取jqLite对象中所有元素的文本内容拼接后的结果,或者设置所有元素的文本内容
toggleClass(name) 为jqLite对象中的所有元素切换指定class的所属资格。那些不在class中的元素被添加到其中,而那些在class中的元素将会从中移除
val()/val(value) 获取jqLite对象中的第一个元素的value特性,或者设置所有元素的value特性
三、创建和移除元素
用于创建和移除元素的jqLite方法
angular.element(html) 创建一个代表特定HTML字符串的元素的jqLite对象
after(elements) 在调用方法的元素后面插入特定内容
append(elements) 在调用方法的jqLite对象的每一个元素上,将特定元素作为最后一个子元素插入
clone() 从方法调用的对象复制元素并作为一个新的jqLite对象返回
prepend(elements) 在调用方法的jqLite对象的每一个元素上,将特定元素作为第一个子元素插入
remove() 从DOM中删除jqLite对象的元素
replaceWith(elements) 用指定元素替换调用方法的jqLite对象的元素
wrap(elements) 使用特定元素包装jqLite对象中的每个元素
这里需要当心的主要问题就是jquery fluent API, 这意味着许多这类方法返回的jqLite对象中包含了原来在调用方法的jqLite对象中就存在的元素,而不是那些参数中的元素。
<script>
angular.module("exampleApp", [])
.directive("demoDirective", function () {
return function (scope, element, attrs) {
var listElem = element.append("<ol>");
for (var i = 0; i < scope.names.length; i++) {
listElem.append("<li>").append("<span>").text(scope.names[i]);
}
}
})
.controller("defaultCtrl", function ($scope) {
$scope.names = ["Apples", "Bananas", "Oranges"];
})
</script>
<body ng-controller="defaultCtrl">
<h3>Fruit</h3>
<div demo-directive></div>
</body>
在HTML中的样子<div demo-directive>Oranges</div>
哪里出错了?答案是从一开始在DOM里就操作了错误的元素。这个例子中的第一个jqLite操作如下:var listElem=element.append("<ol>")
将一个ol元素作为传给链接函数的element参数的子元素添加进去。append操作结果所赋给的变量使用的名字暗示了问题所在:listElem。实际上append方法(就像上述方法中所有那些带有element参数的方法那样)返回的是一个表示操作被执行的元素的jqLite对象,在本例中就是div元素而不是ol元素。这意味着本例中的另一个jqLite语句会得到意外的结果:listElem.append("<li>").append("<span>").text(scope.names[i]);这条语句中有三个操作——两个对append方法的调用和一个对text方法的调用,而且所有这些操作都应用在了div元素上。首先,添加了一个li元素作为div元素的一个子元素,然后添加了一个span 元素。最后调用了text方法,结果是将所有添加到div的子元素的文本使用一个字符串替换掉,而且由于是在for循环中执行这些操作,对数组里的每一个元素都重复了这些操作,这就是为什么div元素里最后包含了oranges,因为oranges是数组中的最后一个值。
避免这个问题的最可靠方法之一是使用angular.element方法来创建jqLite对象并在单独的语句中对他们执行各种操作。如下是正确的例子:
angular.module("exampleApp", [])
.directive("demoDirective", function () {
return function (scope, element, attrs) {
var listElem = angular.element("<ol>");
element.append(listElem);
for (var i = 0; i < scope.names.length; i++) {
listElem.append(angular.element("<li>")
.append(angular.element("<span>").text(scope.names[i])));
}
}
}) .controller("defaultCtrl", function ($scope) {
$scope.names = ["Apples", "Bananas", "Oranges"];
})
四、处理事件
处理事件的jqLite方法
on(events,handler) 为jqLite对象所代表的元素发生的事件注册一个处理器。不支持jquery提供的选择器或事件数据特性。
off(events,handler) 为jqLite对象所代表的元素发生的事件移除一个之前已注册的处理器。不支持jquery提供的选择器特性
triggerHandler(event) 对jqLite对象所代表的所有元素上注册的指定事件触发所有处理器。
五、其他jqLite方法
data(key,value)/data(key) 将任意数据与jqLite对象代表的所有元素关联起来,或者从jqLite对象代表的第一个元素中获取指定key值。
removeData(key) 从jqLite对象代表的元素中移除与指定key相关联的数据。
html() 返回jqLite对象所代表的第一个元素的内容HTML表达形式。
ready(handler) 注册一个监听器函数,该函数将在DOM的内容被完全加载时调用一次。
六、从jqLite访问AngularJS的特性
controller()/controller(name) 返回与当前元素或其父元素相关联的控制器。
injector() 返回与当前元素或其父元素相关联的注入器。
isolatedScope() 如果当前元素有相关联的独立的作用域,则返回该作用域。
scope() 返回与当前元素或其父元素相关联的作用域。
inheritedData(key) 这个方法与jquery的data方法执行同样的功能,但是会沿着元素层次结构向上查找与指定key相匹配的值
七、使用jquery替换jqLite
jqLite所强调的是速度,简单和大小,而且一旦你习惯了使用这个可用的有限方法集,你会发现能够做到指令中需要做的一切事情,即使结果不如使用jquery完整的方法和特性所得到的那么优雅。尽管如此,如果确实无法坚持使用jqLite,你还可以使用完整的jquery库来替换它。
注意:
jQuery脚本元素出现在加载AngularJS的脚本元素之前。AngularJS在安装jqLite之前会检查jquery是否已经被加载了,所以脚本元素必须按照这样的顺序出现。如果直到AngularJS的后面才加载jquery,那么jqLite就会被使用。
<script src="jquery-1.10.1.min.js"></script>
<script src="angualr.js"></script>
最新文章
- 配置 Docker 加速器(Docker Hub Mirror)
- JavaSE基础第一篇
- java中i=i++字节码分析
- centos搭建svn服务器并在windows实验
- 05.C#泛型类型(三章3.1-3.2)
- Undefined symbols “_OBJC_CLASS_$_XXX” 问题
- hibernate一个注册小例子
- linux下/etc/passwd和/etc/shadow文件
- HDU 3157 Crazy Circuits(有源汇上下界最小流)
- 文件上传功能 -- jquery.form.js/springmvc
- CSS 初探
- 【SICP读书笔记(四)】练习2.27 --- 表序列reverse的扩展:树结构的deep-reverse
- AWK----awk与shell交互
- React Router路由传参方式总结
- Lecture3.随机变量及其概率分布
- abaqus邓肯张模型umat
- bzoj3702/bzoj2212 二叉树 (线段树合并)
- The Tower of Babylon(UVa 437)
- 教你分分钟搞定Python之Flask框架
- 大数据自学4-Hue集成环境中各模组说明
热门文章
- I Love Palindrome String
- 【洛谷】P1590 失踪的7
- ubuntu16安装python3.7
- CSS(前)篇
- ASP.NET自定义控件组件开发 第一章 第一章:从一个简单的控件谈起
- LeetCode Top 100 Liked Questions in Golang(updating...)
- vue-cnodejs
- jQuery之父:坚持每天都要写代码
- 通过反射 往泛型Integer的集合里添加String 类型的数据 Day25
- Oracle 11g Pivot函数实现行转列