极客笔记jQuery 页面加载时执行jQuery函数
在本文中，我们将介绍如何使用jQuery使函数在页面加载时自动执行。jQuery是一种流行的JavaScript库，可以简化对HTML文档的操作和动态交互。
阅读更多：jQuery 教程
页面加载事件
在开始之前，让我们先了解一下页面加载事件。当网页被加载时，浏览器会触发一个特殊的事件，我们可以利用这个事件来执行我们想要的函数。在jQuery中，这个事件被称为$(document).ready()。
下面是一个简单的示例，展示如何在页面加载时执行一个函数：
$(document).ready(function(){
// 在这里写下你的函数代码
alert("页面已加载！");
});
在上面的例子中，$(document).ready()函数用于定义在页面加载时需要执行的代码。在本例中，我们使用alert()函数显示一个弹出窗口，显示文本”页面已加载！”。
直接执行函数
除了使用$(document).ready()外，我们还可以直接执行一个函数。为了实现这一点，我们使用$(function(){})的简写形式。
以下是一个示例，演示如何直接执行一个函数：
$(function(){
// 这里写下你的函数代码
alert("直接执行函数！");
});
在上面的例子中，我们使用$(function(){})来定义一个匿名函数，并在其中编写需要执行的代码。在本例中，我们仍然使用alert()函数来显示一个弹出窗口，显示文本”直接执行函数！”。
示例：页面加载时改变背景颜色
现在，让我们来看一个示例，演示如何在页面加载时使用jQuery来改变背景颜色。
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>页面加载时改变背景颜色</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>页面加载时改变背景颜色</h1>
</body>
</html>
JavaScript代码（存储在名为”script.js”的文件中）如下：
$(document).ready(function(){
$('body').css('background-color', 'red');
});
在上面的示例中，我们使用了$('body')选择器来选取<body>元素，并使用css()函数将其背景颜色设置为红色。
当页面加载时，$(document).ready()函数中的代码将被执行，从而改变页面的背景颜色为红色。
其他页面加载事件
除了$(document).ready()之外，还有其他使用jQuery的事件可以在页面加载时执行函数。
$(window).on('load', function(){})：在所有内容（包括图片和其他资源）加载完成后执行函数。与$(document).ready()相比，$(window).on('load', function(){})事件会等待所有资源加载完成后再执行相关代码。$(window).bind('load', function(){})：与$(window).on('load', function(){})相同，用于加载所有内容后执行函数。
以下是一个示例，演示如何使用$(window).on('load', function(){})事件来执行一个函数：
$(window).on('load', function(){
// 这里写下你的函数代码
alert("所有内容已加载完成！");
});
在上面的例子中，当页面上的所有内容加载完成后，$(window).on('load', function(){})中的函数将被执行，并显示一个弹出窗口，显示文本”所有内容已加载完成！”。
总结
通过使用$(document).ready()、$(function(){})以及其他页面加载事件，我们可以在页面加载时执行特定的函数。这对于需要在页面加载时进行初始化或执行特定操作的情况非常有用。希望本文对您有所帮助，并能在您的项目中成功应用jQuery的页面加载功能。