Jquery知识点一 Jquery的ready和Dom的onload的区别

Jquery是一款非常流行的JavaScript库，它主要用于简化JavaScript的编写，提高开发效率。在Jquery中，我们常常使用ready函数和Dom的onload事件来处理页面的一些交互。本文将详细讲解Jquery的ready和Dom的onload的区别，包括它们的实现原理以及使用场景。

1. Jquery的ready事件

1.1 实现原理

Jquery的ready事件是在页面的DOM结构加载完成后触发的。这个事件只是在DOM加载完毕后触发，不需要等待页面中的所有资源都加载完成。当Jquery检测到页面的DOM结构已经准备好后，就会执行相应的回调函数。

1.2 语法示例

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

或者

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

1.3 使用场景

Jquery的ready事件通常用于在页面DOM结构加载完成后执行一些初始化的代码，例如绑定事件、加载数据等。由于这个事件不需要等待外部资源的加载，因此可以在页面加载速度较慢的情况下提高页面的响应速度。

一个简单的例子是，当用户进入页面后，希望页面能够自动滚动到指定位置。可以使用下面的代码实现：

$(document).ready(function(){
    $('html,body').animate({scrollTop:500}, 1000);
});

2. Dom的onload事件

2.1 实现原理

Dom的onload事件是在页面的所有资源都加载完成后触发的，包括图片、样式等外部资源的加载。当浏览器从服务器获取到所有的资源后，才会触发这个事件。

2.2 语法示例

window.onload=function(){
    //执行代码
};

2.3 使用场景

Dom的onload事件通常用于在页面所有资源都加载完成后执行一些操作，例如调整页面布局、动态创建元素等。由于这个事件需要等待所有资源都加载完成后才会触发，因此可能会影响页面的响应速度。

一个简单的例子是，当用户点击页面上的某个按钮后，动态创建一个图片元素。可以使用下面的代码实现：

window.onload=function(){
    var img=document.createElement("img");
    img.src="https://example.com/test.jpg";
    document.body.appendChild(img);
};

3. Jquery的ready和Dom的onload的区别

从实现原理和使用场景来看，Jquery的ready事件和Dom的onload事件有一些明显的区别：

• Jquery的ready事件在页面的DOM结构加载完成后触发，无需等待外部资源的加载；Dom的onload事件需要等待页面的所有资源都加载完成后才会触发。
• Jquery的ready事件通常用于初始化页面的功能或事件绑定等，而Dom的onload事件通常用于页面的布局调整、元素的动态创建等。

综上所述，Jquery的ready事件和Dom的onload事件虽然都与页面的加载相关，但它们的使用场景和实现原理有所不同，需要根据不同的需求来选择使用适合的事件。