当网页加载完毕后，我们可能需要执行一些JavaScript代码来操作DOM元素或者进行其他操作。然而，有时候我们的JavaScript代码会因为DOM还没加载完毕而无法正确执行，这时就需要使用jQuery中的$(document).ready()来保证我们的代码在DOM完全加载后才执行。下面是$(document).ready()的详细介绍：
什么是$(document).ready()？
$(document).ready()是jQuery中一个非常重要的函数，它用来在页面DOM元素加载完成后执行JavaScript代码。当HTML文档完成解析，但是DOM元素还没完成解析时，$(document).ready()函数会被触发。
如何使用$(document).ready()？
$(document).ready()的使用非常简单，只需要将需要执行的代码包裹在$(document).ready()的回调函数中即可。示例代码如下：
$(document).ready(function(){
// 需要执行的代码
});
$(document).ready()和window.onload的区别
window.onload事件是当整个页面及其相关资源（如图片、CSS等）全部加载并渲染完成后触发的。而$(document).ready()事件是当DOM树解析完成后（不等待图片等其他资源加载完成）触发的。所以，如果我们只需要等待DOM解析完成后再执行一些JavaScript代码，就可以使用$(document).ready()，否则需要使用window.onload。
$(document).ready()的示例
下面是两条使用$(document).ready()的示例：
示例1
在页面DOM元素加载完成后，隐藏ID为test的元素。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>$(document).ready()示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#test").hide();
});
</script>
</head>
<body>
<h1>Hello World</h1>
<p id="test">测试隐藏元素</p>
</body>
</html>
示例2
在页面DOM元素加载完成后，动态插入一个div元素。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>$(document).ready()示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("body").append("<div>动态插入的元素</div>");
});
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
以上是关于$(document).ready()的详细介绍和示例。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery之$(document).ready()使用介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 