一、关于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>

jqLite的更多相关文章

  1. angular源码分析：angular中jqLite的实现——你可以丢掉jQuery了

    一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...

  2. angularjs DOM操作之jqLite篇

    angular.element(el).find("input").attr({value:1}); * ## Angular's jqLite * jqLite provides ...

  3. angular中的jqLite的基本使用方法

    angular.element() 参数要求是HTML string or DOMElement, angular.element 虽然很接近 jQuery,但是直接通过 HTML tag 去获取元素 ...

  4. angular中的jqLite所包含的jquery API

    Angular本身包含了一个叫做jqLite的可兼容性库. 使用过的angular.element()方法就返回一个jqLite对象,  jqLite是jQuery库的子集,它 允许Angular以跨 ...

  5. angularjs中的jqlite的认识理解及操作使用

    刚了解angularjs时,就知道它有个内嵌的轻量级的jquery:jqLite,那时候常于jQuery分不清,其实它们是不一样的.jqLite中,通过angular.element(param)获得 ...

  6. angular 源码分析 1 - angularInit()

    angularjs 是个神奇的框架,由于我的好奇,想了解她的内部工作原理,只能一步一步的走进她,靠近她,和她深入的交流. angularjs 的入口是什么样子的呢?一起掀起她的盖头吧. 在这里我只讲方 ...

  7. MVVM大比拼之AngularJS源码精析

    MVVM大比拼之AngularJS源码精析 简介 AngularJS的学习资源已经非常非常多了,AngularJS基础请直接看官网文档.这里推荐几个深度学习的资料: AngularJS学习笔记 作者: ...

  8. ionic之$ionicGesture手势（大坑）

    鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称 ...

  9. 关于angularjs指令

    一个指令用来引入新的HTML语法.指令是DOM元素上的标记,使元素拥有特定的行为.举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件.让HTML能识别这个语法,我们需要使用指令.指令通过 ...

随机推荐

  1. 【P2616】 【USACO10JAN】购买饲料II Buying Feed, II

    P2616 [USACO10JAN]购买饲料II Buying Feed, II 题目描述 Farmer John needs to travel to town to pick up K (1 &l ...

  2. 虚拟机安装redis

    sudo pecl install redis 先代码里先phpinfo(); 看看php版本 有可能是7.2 sudo vim /etc/php/7.1/fpm/php.ini    (注意 php ...

  3. spring源码学习之默认标签的解析（二）

    这个是接着上一篇来写,主要是这章内容比较多,还是分开来写吧! 一.AbstractBeanDefinition属性介绍 XML中的所有的属性都可以在GenericBeanDefinition中找到对应 ...

  4. 【python之路21】用户登陆程序函数

    一.用户登陆函数实例 1.注意:以后写函数时必须在函数第一行后按回车加入“”““”“””两对三引号后回车,此时会自动列出参数值,注释函数的作用.参数的用法和返回值 #!usr/bin/env pyth ...

  5. SQL Server 存储过程详解

    转自:https://blog.csdn.net/younghaiqing/article/details/62884658 一. 什么是存储过程 系统存储过程是系统创建的存储过程,目的在于能够方便的 ...

  6. 对快速排序的分析 Quick Sort

    快速排序 快排的基本思想是:通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序.通常可选第一个记录为基准 ...

  7. 【JZOJ3873】【NOIP2014八校联考第4场第2试10.20】乐曲创作(music)

    ujfuiaty 小可可是音乐学院的一名学生,他需要经常创作乐曲完成老师布置的作业. 可是,小可可是一个懒惰的学生.所以,每次完成作业时,他不会重新创作一首新的乐曲,而是去修改上一次创作过的乐曲作为作 ...

  8. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十章：阴影贴图

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十章:阴影贴图 本章介绍一种在游戏和应用中,模拟动态阴影的基本阴影 ...

  9. python之浮点型类型

    浮点型:float 如3.14,2.88 class float(object): """ float(x) -> floating point number Co ...

  10. Hdu 1729 Nim博弈

    点击打开题目链接 之前没做过这题,因为学弟问到我如果来求该题的sg值,才做了这题. 首先, 是多堆Nim博弈毫无疑问,这题是往一个有固定容量的箱子里放石子,和从一堆石子里面拿出石子是一个道理. 和传统 ...