# AngularJS – jQueryLite（jqLit​​e）教程

> 原文： [https://howtodoinjava.com/angularjs/angular-jquery-lite-jqlite-tutorial/](https://howtodoinjava.com/angularjs/angular-jquery-lite-jqlite-tutorial/)

AngularJS 和 jQuery 都是非常强大的 JS 框架。 正如 [Angular 介绍](//howtodoinjava.com/angularjs/angularjs-tutorial-helloworld-example/)中所讨论的那样，jQuery 从很长时间以来一直是最引人注目的框架。 AngularJS 增加了 MVC 模式的功能以及许多其他内置服务，但是它确实尊重了 jquery 易于使用的语法（[jquery 选择器](//howtodoinjava.com/scripting/jquery/jquery-selectors/)），并且可以通过简单的函数调用对多个元素进行操作。

虽然，可以将 jQuery 库和 angular 一起使用，但建议使用 **jQueryLite** （默认情况下打包在 AngularJS 中）。

它是 jQuery 的精简版，即，它缺少 jQuery 的某些功能，但包含其中的大部分功能。 让我们看看如何在 AngularJS 应用中使用 jQueryLite。

## 访问 jQuery 或 jQueryLite

对于大多数 AngularJS 应用来说，内置在 AngularJS 中的 jQueryLite 库就足够了。 但是，如果您需要完整版 jQuery 的其他功能，只需在加载 AngularJS 库之前加载 jQuery 库即可。 例如：

```java
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>

```

无论是否加载 jQueryLite 或完整的 jQuery 库，都可以使用 AngularJS 引导时可用的`angular`变量的`element`属性从 AngularJS 代码访问 jQuery。 本质上， **`angular.element`将是`jQuery`变量**的别名，该变量通常在 jQuery 应用中使用。 您可以考虑如下：

```java
angular.element() === jQuery() === $()
```

#### jQuery 示例

```java
<div ng-click="clicked($event)">Click Me</div>

//You can access a jQuery version of the object using the following AngularJS code:
$scope.clicked = function(event){
  var jQueryElement = angular.element(event.target);

  //Now perform jQuery actions on jQueryElement
};
```

## 倾向于使用“Angular 方式”

您会经常听到“仅在指令中进行 DOM 操作”。 这是必须的。 在前进之前，请尽量避免使用 jQuery。 总是想办法避免使用 jQuery/jqLit​​e 来操作 DOM 对象。

AngularJS 附带了一整套工具，使这一过程变得非常容易。 使用`ngClass`，我们可以动态更新类； `ngModel`允许双向数据绑定； `ngShow`和`ngHide`以编程方式显示或隐藏元素； 还有更多–包括我们自己编写的内容。

换句话说，我们可以在没有 DOM 操作的情况下进行各种出色的工作。 DOM 操作越少，指令的测试就越容易，指令的样式就越容易，将来就越容易更改，它们的可重用性和可分发性就越高。

这是可切换按钮的快速示例：

```java
.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

```

可以更简单地重写此指令，如下所示：

```java
.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

```

与以前的版本相比，它非常清晰，易于维护且易于测试，在任何不使用 jQuery 的环境中，它都很容易被破坏。

**参考：**

[https://docs.angularjs.org/api/ng/function/angular.element](https://docs.angularjs.org/api/ng/function/angular.element)

[https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) 

学习愉快！