資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 JavaScript 函式中呼叫 jQuery 函式？
JavaScript 是任何網站的核心，它為網站新增功能，使整個網站具有響應性。但在 JavaScript 中，選擇元素並新增不同的功能（例如切換元素、淡入元素等）很困難。
jQuery 提供了許多方法，使向網站新增淡入、淡出、隱藏、顯示、切換等功能變得更容易。
將 jQuery 和 JavaScript 結合起來，可以輕鬆地在需要時在 JavaScript 函式中使用 jQuery 函式，而無需分別呼叫它們。
語法
要在 JavaScript 函式中呼叫 jQuery 函式，可以使用以下語法：
$(document).ready(function() {
// Your jQuery code here
});
或者，可以使用以下語法：
$(function() {
// Your jQuery code here
});
在 document ready 函式內，您可以呼叫任何想要執行的 jQuery 函式。例如：
$(document).ready(function() {
$("#element").hide(); // This will hide the element with the ID "element"
});
您還可以向 jQuery 函式傳遞引數，如下所示：
$(document).ready(function() {
$("#element").hide(1000); // This will hide the element with the ID "element" over a period of 1 second (1000 milliseconds)
});
步驟
要在 JavaScript 函式中呼叫 jQuery 函式，您可以按照以下步驟操作：
步驟 1 - 在您的 HTML 檔案中包含 jQuery 庫。您可以透過將以下指令碼標籤新增到您的 HTML 檔案來實現：
步驟 2 - 建立一個 jQuery 函式。此函式應包含您在呼叫它時想要執行的程式碼。
步驟 3 - 建立一個 JavaScript 函式。此函式將用於呼叫 jQuery 函式。
步驟 4 - 向 HTML 中的元素新增事件監聽器以觸發 JavaScript 函式。
步驟 5 - 當用戶單擊按鈕時，將呼叫 JavaScript 函式，然後該函式將呼叫 jQuery 函式。
示例
要使用 JavaScript 函式呼叫 jQuery 函式，請嘗試以下程式碼。
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.myjQuery = function() {
alert("jQuery");
};
$(document).ready(function() {
alert("Welcome!");
});
function display() {
$.myjQuery();
};
</script>
<input type="button" value="submit" onclick=" display();">
</body>
</html>
示例
讓我們建立一個 jQuery 函式，選擇 id 為 root 的元素，並新增一個 toggle 方法，如果元素未隱藏則隱藏它，如果已隱藏則顯示它。
之後，讓我們建立一個呼叫 jQuery 函式的 JavaScript 函式。
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
padding: 4px;
background-color: #333;
color: white;
margin-bottom: 10px;
font-size: 22px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2> Calling a jQuery function with JavaScript function. </h2>
<p>Click on the button to hide the box </p>
<div id="box"> Box </div>
<button type="button" id="btn" onclick="javaScriptFunction();">HIDE</button>
<script>
// Creating a jquery function
$.jQueryFunction = function () {
$('#box').toggle();
if ($("#btn").text() == "HIDE") {
$("#btn").text("SHOW")
} else {
$("#btn").text("HIDE")
}
};
// Craeting a Javascript function
function javaScriptFunction() {
// Calling the jquery function with Javscript function
$.jQueryFunction();
};
</script>
</body>
</html>
示例
讓我們再建立一個 jQuery 函式，選擇元素，並新增 fadeToggle 方法，該方法淡出元素，然後將該元素的顏色更改為紅色。
之後，讓我們建立一個呼叫 jQuery 函式的 JavaScript 函式。
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
padding: 4px;
background-color: #333;
color: white;
margin-bottom: 10px;
font-size: 22px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2> Calling a jQuery function with JavaScript function. </h2>
<p>Click on the button to toggle fading of the box </p>
<div id="box">Box</div>
<button type="button" onclick="javaScriptFunction();">Fade</button>
<script>
// Creating a jquery function
$.jQueryFunction = function () {
$('#box').fadeToggle();
$('#box').css("color", "red");
};
// Craeting a Javascript function
function javaScriptFunction() {
// Calling the jquery function with Javscript function
$.jQueryFunction();
};
</script>
</body>
</html>
在本教程中，我們學習瞭如何在 JavaScript 函式中呼叫 jQuery 函式。
15K+ 次瀏覽
