如何让jquery打开页面就执行

在使用jQuery进行网页开发时，有时候需要页面加载后自动执行某些操作，比如设置初始显示效果、显示特殊的提示信息等等。那么如何实现这个功能呢？本文就来介绍如何让jQuery打开页面就执行。

一、使用jQuery的$(document).ready()函数

使用jQuery的$(document).ready()函数是最常用的一种方法，该函数指示当DOM加载完毕后，执行回调函数中的代码。代码示例如下：

$(document).ready(function() {
  //执行的代码
});

如上代码所示，$(document).ready()函数中传入的参数是一个函数，该函数会在DOM加载完毕后被执行。在该函数内可以编写需要执行的jQuery代码。

二、使用jQuery的window.onload()函数

jQuery的window.onload()函数在页面所有资源（包括图片、样式表等）加载完毕后才会执行。相对于$(document).ready()函数，window.onload()函数所包含的内容更为广泛，因此执行时间会相对延长。代码示例如下：

$(window).on('load', function() {
  //执行的代码
});

与$(document).ready()函数不同的是，window.onload()函数的代码直到所有资源全部加载完毕才会执行。因此还可以在此处编写一些需要等待资源加载完成后才能执行的代码。

三、使用立即调用函数

除了上述两种方法，还可以使用立即调用函数的方式实现页面加载后自动执行代码。立即调用函数是指将函数体封装在一个小括号中，最后再添加另外一个小括号执行函数。代码示例如下：

(function() {
  //执行的代码
})();

如上代码所示，该代码中的$(function(){})等价于$(document).ready(function(){})。当代码内容较少时，可以使用封装成匿名函数的方法进行执行。

四、使用defer属性

在页面中引入外部的JavaScript资源时，可以使用defer属性告诉浏览器继续渲染页面，同时等待JavaScript加载完成后再执行。例如下面的代码：

<script src="xxxx.js" defer></script>

在以上代码中，外部资源xxxx.js的加载、解析和执行过程不会影响页面的渲染。当JavaScript加载完毕后，会等待解析队列执行，直到该脚本的代码执行完成。

五、使用async属性

与defer属性不同，async属性表示应该立即下载并且执行脚本，但是在执行该脚本的同时，不会停止解析文档，也不会等待其他脚本的加载和执行。当网络速度较慢，下载和解析脚本需要一定时间时，可能会导致脚本在页面的某些元素加载完成之前就开始执行了。用法如下：

<script src="xxxx.js" async></script>

以上是如何让jQuery打开页面就执行的五种方法，其中$(document).ready()函数和立即调用函数是最常用的方法。在实际使用中，可以根据需要选用不同的方式进行操作。

以上就是如何让jquery打开页面就执行的详细内容，更多请关注php中文网其它相关文章！