# 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) 学习愉快！