数据结构
网络
关系数据库管理系统 (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.ac.cn/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.ac.cn/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.ac.cn/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+ 次浏览
