jQuery ready()的几种实现方法小结
当页面中加载完毕后，jQuery常用的执行函数为$.ready()，也可以写成$(function(){...})。那么jQuery的ready()有哪些实现方法呢？本文将为您介绍几种实现方法，并提供相应的示例说明。
方法一：使用$().ready()
这种方法就是直接在调用jQuery后，使用$().ready(function(){})的方式即可。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ready()</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
console.log("jQuery is ready!");
});
</script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
方法二：使用$(document).ready()
这种方法和第一种方法类似，仅仅是换了一种写法。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ready()</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("jQuery is ready!");
});
</script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
方法三：使用$(window).load()
当需要等到页面上所有元素都加载完成后再执行操作时，可以使用$(window).load()。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery load()</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).load(function(){
console.log("Window is completely loaded!");
});
</script>
</head>
<body>
<h1>Hello, world!</h1>
<img src="image.jpg">
</body>
</html>
方法四：使用$(function(){...})的简写方式
当需要使用$(function(){...})时，可以使用$(()=>{...})的简写方式。示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ready()</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(()=>{
console.log("jQuery is ready, using shorthand!");
});
</script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
至此，jQuery ready()的几种实现方法已经介绍完毕。通过上述示例，您可以更好地理解这些方法的使用场景和实现方式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ready()的几种实现方法小结 - Python技术站
微信扫一扫 
支付宝扫一扫 