在前端开发中，精确控制JavaScript脚本的执行时机对于保证页面元素被正确操作至关重要。传统上，开发者依赖于原生JavaScript的window.onload事件来确保页面所有资源（包括图片、脚本等）加载完毕后再执行特定代码。然而，这种做法不仅限制了执行时机（必须等待所有资源加载完成），还难以处理多个脚本文件中onload函数的定义冲突问题。为解决这些痛点，jQuery引入了更为灵活且强大的ready()方法。
jQuery ready()简介
ready()方法允许你在DOM（文档对象模型）结构完全加载构建完成后立即执行JavaScript代码，而无需等待如图片之类的非关键资源。这意味着你可以更早地与页面元素进行交互，提高了用户体验和程序响应速度。更重要的是，jQuery允许在同一个页面内多次使用ready()，每个内部的函数都将被顺序执行，解决了window.onload可能引发的冲突问题。
使用方法
第一种写法
$(document).ready(function() { console.log("加载 1"); }); console.log("加载 2");
第二种写法（简写形式）
$(function() { console.log("加载 11"); }); console.log("加载 21");
执行顺序解析
当页面开始加载时，浏览器会依次执行JavaScript代码。上述两种写法虽然形式不同，但效果一致，都是注册了一个回调函数到ready事件上。因此，无论采用哪种形式，"加载 2"和"加载 21"都会先于"加载 1"和"加载 11"输出到控制台。这是因为console.log("加载 2")和console.log("加载 21")位于ready()外部，它们会立即执行，而ready()内的函数则需等待DOM准备就绪后才会执行
为何选择ready()？
- 灵活性：可以在页面中多次使用，不会因为定义多次而产生冲突。
- 简洁性：简写形式
$(function(){...})使得代码更加紧凑和易读。
- 高效性：相较于
window.onload，它可以更快地触发，因为不必等待所有资源加载完毕。 - 兼容性：jQuery库在背后处理了跨浏览器的兼容性问题，使得
ready()在不同浏览器下表现一致。
结论
通过利用jQuery的ready()方法，开发者能够在页面DOM结构加载完成后立即安全地操作页面元素，同时避免了传统window.onload可能导致的脚本执行延迟和冲突问题。无论是初学者还是经验丰富的开发者，掌握ready()的使用都是提升前端开发效率和代码质量的关键步骤之一。
