博客

jquery的几种页面加载完执行三种方式

  • Post category:other

jQuery的几种页面加载完执行三种方式

在jQuery中，有多种方式可以在页面加载完毕后执行JavaScript代码。本攻略将详细讲解jQuery的几种页面加载完执行三种方式，包括使用$(document).ready()、$().on(‘load’, function(){})和$(function(){})三种方式的原理、实现方法和示例说明。

$(document).ready()

$(document).ready()是jQuery中最常用的一种页面加载完执行JavaScript代码的方式。它的原理是在DOM树加载完成后执行JavaScript代码。具体来说，$(document).ready()可以分为以下几步骤：

  1. 等待DOM树加载完成。

  2. 执行JavaScript代码。

示例说明

以下是一个示例，演示如何使用$(document).ready()在页面加载完毕后执行JavaScript代码：

$(document).ready(function() {
    // 在页面加载完毕后执行的JavaScript代码
    console.log('页面加载完毕！');
});

$().on(‘load’, function(){})

$().on(‘load’, function(){})是另一种常用的页面加载完执行JavaScript代码的方式。它的原理是页面所有资源（包括图片、CSS、JavaScript等）加载完成后执行JavaScript代码。具体来说，$().on(‘load’, function(){})可以分为以下几步骤：

  1. 等待页面所有资源加载完成。

  2. 执行JavaScript代码。

示例说明

以下是一个示例，演示如何使用$().on(‘load’, function(){})在页面加载完毕后执行JavaScript代码：

$(window).on('load', function(){
    // 在页面所有资源加载完毕后执行的代码
    console.log('页面所有资源加载完毕！');
});

$(function(){})

$(function(){})是一种简化版的$(document).ready()，它的原理和$(document).ready()相同，即在DOM树加载完成后执行代码。具体来说，$(function(){})可以分为以下几步骤：

  1. 等待DOM树加载完成。

  2. 执行JavaScript代码。

示例说明

以下是一个示例，演示如何使用$(function(){})在页面加载完毕后JavaScript代码：

$(function(){
    // 在页面加载完毕后执行的JavaScript代码
    console.log('页面加载完毕！');
});

总结

本攻略详细讲解了jQuery的几种页面加载完执行三种方式，包括使用$(document).ready()、$().on(‘load’, function(){})和$(function(){})三种方式的原理、实现方法和示例说明。在实际开发中，可以根据具体需求选择不同的方式来执行JavaScript代码。

Tags: