資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究AngularJS – angular.element() 函式
angular.element() 方法將原始 DOM 元素或 HTML 字串包裝成一個 jQuery 元素。如果 jQuery 可用或已匯入，angular.element 是 jQuery 函式的別名，否則，此方法會委託給 AngularJS 內建的 jQuery 子集，稱為jQueryLite 或jqLite。
語法
angular.element(element)
示例 − 使用 angular.element() 包裝 DOM 元素
在 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>
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>輸出
若要執行上述程式碼，只需轉到你的檔案並像普通 HTML 檔案一樣執行它即可。你將在瀏覽器視窗中看到以下輸出。
更新日期： 2021 年 10 月 8 日
超過 1K 的瀏覽量
廣告