如何让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()函数的代码直到所有资源全部加载完毕才会执行。因此还可以在此处编写一些需要等待资源加载完成后才能执行的代码。

三、使用立即调用函数

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

Eclipse中创建Web Maven Project并部署到Tomcat中 中文WORD版

大家都知道，在进行J2EE项目的开发过程中，在调试阶段如果只是修改了页面是不需要重启应用服务器的，比如不需要重启Tomcat。只需要在浏览器中 进行页面刷新即可。其实之所以不用重启Tomcat等应用服务器，其根本原因是因为我们可以在应用服务器的配置文件中设置虚拟目录，这样就可以知道web 项目所在的目录，于是就可以省去打包、然后再重新发布到服务器的步骤。感兴趣的朋友可以过来看看

0

查看详情

(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中文网其它相关文章！