資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 jQuery 中使用 .on 和 .hover？
jQuery——一個流行的 JavaScript 庫，用於簡化 Web 開發任務。它提供易於使用的語法，簡化了編碼並提高了效能。在 jQuery 提供的眾多功能中，最常用的兩個是 .on() 和 .hover()。這些方法允許將事件繫結到 DOM 元素，並在觸發事件時執行程式碼。
在本文中，我們將學習如何在 jQuery 中使用 .on() 和 .hover()。我們將瞭解使用 .on() 和 .hover() 方法的不同方法。
.on() 方法
jQuery 中的 .on() 方法用於將一個或多個事件繫結到選定的元素。該方法提供了一種靈活的方式來將事件附加到現有和動態建立的元素。.on() 方法為 API 提供了高度的一致性，建議使用此方法，因為它簡化了 jQuery 程式碼庫中的流程。
語法
以下是 jQuery 中使用 .on() 方法的語法。
$(selector).on(event, childSelector, data, handler);
引數
selector − 將繫結事件的元素的選擇器。
event − 要繫結到所選元素的事件。
childSelector (可選) − 所選元素的子元素的選擇器，這些子元素應該觸發事件。
data (可選) − 傳遞給事件處理程式函式的附加資料。
handler − 事件觸發時要執行的函式。
示例 1：繫結單擊事件
在下面的示例中，我們使用預設方法來繫結單擊事件。在這裡，我們使用了 $(document).ready() 方法來等待 DOM 完全載入後再執行 JavaScript 程式碼，並使用 .on() 方法將單擊事件繫結到頁面上的按鈕元素。現在，每當使用者單擊按鈕時，都會顯示一個警報訊息。
<html>
<head>
<title>How to use the .on() method in jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
alert("You just clicked me!");
});
});
</script>
</head>
<body>
<h2>Using the .on() method in jQuery</h2>
<button>Click here</button>
</body>
</html>
示例 2：將事件繫結到動態元素
在下面的示例中，我們使用 .on() 方法將單擊事件繫結到頁面上的“新增欄位”按鈕。單擊按鈕時，將使用 jQuery $("<input>") 方法建立一個新的輸入欄位，並使用 .append() 方法將其附加到表單。
.on() 方法將模糊事件繫結到頁面上的表單。當輸入欄位失去焦點時，將觸發此事件。我們將“input”選擇器指定為 .on() 方法的第二個引數，這告訴 jQuery 只監聽表單元素的後代輸入元素上的模糊事件。當觸發模糊事件時，我們使用 $(this) 關鍵字獲取觸發事件的輸入欄位的引用，並使用 .val() 方法獲取其值。然後，我們在警報框中顯示該值。
<html>
<head>
<title>How to use the .on() method in jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add new input fields when the "Add Field" button is clicked
$("button").on("click", function() {
var input = $("<input type='text' placeholder='Enter text here'>");
$("form").append(input);
});
// Alert the user with the value of each input field when it loses focus
$("form").on("blur", "input", function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<h2>Using the .on() method in jQuery</h2>
<form>
<input type="text" placeholder="Enter your text here">
<button>Add here</button>
</form>
</body>
</html>
在 .on() 方法中繫結事件
.hover() 方法
jQuery 中的 .hover() 方法用於將兩個事件（即 mouseenter 和 mouseleave 事件）繫結到選定的元素。此方法允許我們在使用者將滑鼠懸停在元素上以及將滑鼠移開時執行不同的程式碼。
hover() 方法指定了兩個函式，當滑鼠指標懸停在選定元素上時執行。
語法
以下是 jQuery 中使用 .hover() 方法的語法。
$(selector).hover(handlerIn, handlerOut);
引數
selector − 將繫結事件的元素的選擇器。
handlerIn − 使用者將滑鼠懸停在元素上時要執行的函式。
handlerOut − 使用者將滑鼠移開元素時要執行的函式。
示例：預設方法
在下面的示例中，我們使用了 $(document).ready() 方法來等待 DOM 完全載入後再執行 JavaScript 程式碼，還使用了 .hover() 方法將兩個事件 (mouseenter 和 mouseleave) 繫結到頁面上的 div 元素。現在，當用戶將滑鼠懸停在 div 上時，背景顏色使用 .css() 方法更改為紫色。當用戶將滑鼠移開 div 時，背景顏色將更改回綠色。
<html>
<head>
<title>How to use the .hover() method in jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
border: 1px solid black;
}
</style>
<script>
$(document).ready(function() {
$("div").hover(function() {
$(this).css("background-color", "violet ");
}, function() {
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
<h2>Using the .hover() method in jQuery</h2>
<p>Hover over the below DIV to see the effect.</p>
<div></div>
</body>
</html>
結論
jQuery 中的 .on() 和 .hover() 方法是強大的工具，它們使繫結事件到 DOM 元素並在觸發這些事件時執行程式碼變得更容易。.on() 方法提供了一種靈活的方式來將事件附加到現有和動態建立的元素，而 .hover() 方法允許我們在使用者將滑鼠懸停在元素上然後將滑鼠移開時執行不同的程式碼。透過理解這些方法的語法和不同的使用方法，開發人員可以輕鬆建立更動態和互動式的 Web 應用程式。
瀏覽量：374
