AngularJS – angular.element() 函数

angularjsweb developmentfront end technology更新于 2026/1/7 0:37:17

angular.element() 方法将原始 DOM 元素或 HTML 字符串包装为 jQuery 元素。如果 jQuery 可用或已导入，angular.element 是 jQuery 函数的别名;否则，此方法委托给 AngularJS 内置的 jQuery 子集，即 jQueryLite 或 jqLite。

语法

angular.element(element)

示例 − 使用 angular.element() 包装 DOM 元素

创建文件"element.html"在您的 Angular 项目目录中并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>angular.element()</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
   </head>

   <body ng-app="app" style="text-align: Center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         AngularJS | angular.element()
      </h2>
      <div ng-controller="demo">
         <input type="text" id="text" ng-model="myVal" />
         <button ng-click="getVal()">
            Click me!
         </button>
         <br />
         <br />
         <b>You typed:</b> {{value}}
      </div>

      <!-- Script for passing the values and checking... -->
      <script>
         var app = angular.module("app", []);
         app.controller("demo", [
            "$scope",
            "$document",
            function ($scope, $document) {
               $scope.myVal = "";
               $scope.getVal = function () {
                  $scope.value = angular.element($document[0].querySelector("#text")).val();};
            },
         ]);
      </script> 
   </body>
</html>

输出

要运行上述代码，只需打开您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。

示例 2

在您的 Angular 项目目录中创建文件"element.html"，并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>angular.element()</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
   </head>

   <body ng-app="app" style="text-align: center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         angular.element()
      </h2>

      <div ng-controller="geek">
         <div ng-mouseenter="style()" id="ide" ng-mouseleave="remove()">
            {{name}}
         </div>
      </div>

      <!-- Script for passing the values and checking... -->
      <script>
         var app = angular.module("app", []);
         app.controller("geek", [
            "$scope",
            "$document",
            function ($scope, $document) {
               $scope.name = "Tutorialspoint.com";

               $scope.style = function () {

angular.element($document[0].querySelector("#ide")).css({color: "white", "background-color": "black", "text-align": "center",});
               };
               $scope.remove = function () {

angular.element($document[0].querySelector("#ide")).css({color: "black", "background-color":"white",});
               };
            },
         ]);
      </script>
   </body>
</html>