資料結構
網路
關係資料庫管理系統(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+
