# 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) 學習愉快！