使用JQuery 加载页面时调用JS的实现方法

1,[removed] = function() {}; 2,$(document).ready(function() {}); 一、一般的加载页面时调用js方法如下： [removed] = function() { $("table tr:nth-child(even)").addClass("even"); //这个是jquery代码 }; 这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成，而且要求所有的外部图片和资源全部加载完成。更不幸的是，如果外部资源，例如图片需要很长时间来加载，那么这个js效 在网页开发中，确保JavaScript代码在正确的时间执行是非常重要的，特别是在使用jQuery库时。本篇文章将详细介绍两种在页面加载完成后调用JavaScript的常见方法，并分析它们的差异。 我们来看传统的JavaScript方法，即通过`window.onload`事件来触发脚本执行： ```javascript window.onload = function() { $("table tr:nth-child(even)").addClass("even"); // 这个是jquery代码 }; ``` `window.onload`事件是在整个页面的DOM树（包括所有图片、脚本、样式表等外部资源）完全加载完毕后触发。这种方法的一个主要缺点是它依赖于所有外部资源的加载速度，如果图片或其他资源加载时间过长，用户可能需要等待很长时间才能看到JavaScript的效果，这可能导致较差的用户体验。 相比之下，jQuery提供了一个更优化的解决方案，即`$(document).ready()`函数： ```javascript $(document).ready(function() { $("table tr:nth-child(even)").addClass("even"); // 这个是jquery代码 }); ``` 或其简写形式： ```javascript $(function() { $("table tr:nth-child(even)").addClass("even"); // 这个是jquery代码 }); ``` `$(document).ready()`或其简写版本会在DOM树构建完成，即DOM就绪时执行，而无需等待所有外部资源加载。这意味着即使图片和其他资源还在加载，JavaScript代码也可以立即开始执行。这对于提高页面交互性和用户体验非常有利。 jQuery还提供了一种更复杂的模式，允许你在`$(document).ready()`中保持对`$`的别名，即使全局的`$`已经被其他库占用： ```javascript jQuery(function($) { // 你可以在这里继续使用$作为别名... $("table tr:nth-child(even)").addClass("even"); }); ``` 这样做的好处是，如果你的页面中同时引入了其他使用`$`作为别名的库，如Prototype或Zepto，这可以避免命名冲突。 `$(document).ready()`方法优于`window.onload`，因为它提供了更快的页面响应和更好的用户体验。而jQuery的简写形式和命名空间保护机制进一步增强了代码的可读性和兼容性。在实际开发中，应优先考虑使用`$(document).ready()`来确保JavaScript代码在DOM准备就绪时立即执行，而不是等待所有资源加载完成。