jquery跟js初始化加载的多种方法及区别介绍

jquery和js初始化加载页面的区别： jquery：等待页面加载完数据，以及页面部分元素（不包括图片、视频）， js：是页面全部加载完成才执行初始化加载。 1、jQuery 页面加载初始化的方法有3种 ，页面在加载的时候都会执行脚本, 第一种(比较常用)： 代码如下: $.function(){ alert(“第一种方法”); }); 第二种： 代码如下: $(document).ready(function(){ alert(“第二种方法”); }); 第三种： 代码如下: jQuery(function($){ alert(“第三种方法”); }); 2、js初始化加载的方 JavaScript 和 jQuery 是两种广泛使用的前端开发库，它们都支持页面加载时的初始化加载，但有其各自的特点和执行时机。本文将详细介绍这两种技术的初始化加载方法及其差异。 **jQuery 初始化加载** jQuery 的主要优势在于它提供了更加简洁和一致的 API 来处理 DOM 操作和事件。在页面加载方面，jQuery 提供了三种主要的初始化加载方法： 1. **$(document).ready() 或 $.ready()** 这是最常见的 jQuery 初始化方法，它会在 DOM（文档对象模型）完全加载并准备就绪后执行回调函数，但不等待外部资源如图片或 iframe。这是最常见的页面初始化时刻。 ```javascript $(document).ready(function() { alert("第一种方法"); }); ``` 2. **$(function()) 或 jQuery(function())** 这是 `$(document).ready()` 的别名，功能完全相同，只是语法更简短。 ```javascript $(function() { alert("第二种方法"); }); ``` 3. **$.function()** 这个方法在 jQuery 1.6 版本之后被弃用，但仍然可用。它与 `$(document).ready()` 类似，同样在 DOM 就绪后执行。 ```javascript $.function() { alert("这种方法已经被弃用"); } ``` **JavaScript 初始化加载** 原生 JavaScript 的初始化加载通常依赖于 `window.onload` 事件，这会在整个页面（包括图片、视频等所有外部资源）完全加载后触发。 1. **window.onload** ```javascript window.onload = function() { alert("初始化加载"); }; ``` 2. **自定义函数并调用** 你可以创建一个自定义函数，并在 `window.onload` 事件上绑定它，或者直接调用该函数。 ```javascript function init() { alert("初始化加载"); } // 绑定到 window.onload window.onload = init; // 或者直接调用 init(); ``` **jQuery 和 JavaScript 的区别** 1. **执行时机**： - jQuery 的 `$(document).ready` 在 DOM 就绪后执行，比 `window.onload` 快，因为它不等待所有资源加载。 - JavaScript 的 `window.onload` 等待所有资源（包括图片、视频）加载完毕，所以它更慢，但确保了所有资源可用。 2. **API**： - jQuery 提供了更丰富的 API 和链式操作，使得代码更简洁易读。 - 原生 JavaScript 需要手动处理 DOM 操作和事件绑定，代码可能更复杂。 3. **兼容性**： - jQuery 对老版本浏览器有更好的兼容性，它抽象了许多跨浏览器的问题。 - 原生 JavaScript 需要考虑更多的浏览器兼容性问题。 4. **冲突**： - jQuery 使用 `$` 符号，可能与其他库冲突，可以通过 `jQuery.noConflict()` 解决。 - JavaScript 则没有这个问题，除非有其他库使用了相同命名的全局变量。 jQuery 和 JavaScript 在初始化加载上有不同的策略和使用场景。根据项目需求和团队习惯，可以选择适合的技术来实现页面初始化。在性能敏感的应用中，优先选择 DOM 就绪而不是全页面加载可能是明智的，而在需要确保所有资源可用时，`window.onload` 更合适。同时，jQuery 的易用性和兼容性使其在很多项目中成为首选。