`
k_lb
  • 浏览: 831588 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论
  • kitleer: 据我所知,国内有款ETL调度监控工具TaskCTL,支持ket ...
    kettle调度

jquery的ready()方法与 <body onload=""> 有什么区别?

阅读更多
请查看 http://qiusuozhe.com/archives/4391.html

一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如:
$(document).ready(function (){ alert('use in page script tag') }); 
$(document).ready(function (){ alert('use in import js file') }); 

现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.

jquery ready可以写好几个,每个都执行
onload只能写一个,你写好几个,也只执行一个,好像是执行最后一个
分享到:
评论

相关推荐

    JQuery-- onload,ready方法详细解说

    JQuery onload、ready 方法详细解说 在 JavaScript 库中,JQuery 提供了两种事件处理机制,即 onload 和 ready。它们都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。 首先,我们需要了解这两种事件...

    15天学会jquery

    ### 15天学会jQuery —— 入门与实践指南 #### 第一天:了解jQuery及其重要性 **一、jQuery是什么?** jQuery是一个快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。...

    页面js,jquery两种方式获取百度接口经度纬度

    本文将详细介绍如何使用JavaScript(JS)和jQuery这两种方法在页面上获取百度接口提供的经度和纬度信息。百度地图API提供了丰富的地理定位功能,开发者可以通过调用其接口获取到用户的精确位置。 首先,我们来看...

    最简单的JavaScript图片轮播代码(两种方法) (2).pdf

    &lt;body onload="startSlideShow()"&gt; &lt;div id="slider"&gt; &lt;img src="image1.jpg" alt="Image 1"&gt; &lt;img src="image2.jpg" alt="Image 2"&gt; &lt;img src="image3.jpg" alt="Image 3"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; ``` **方法...

    网页中JS函数自动执行常用三种方法_.docx

    &lt;body onload="myfunction()"&gt;...&lt;/body&gt; &lt;/html&gt; ``` 这种方法可以在页面加载完成后执行函数 `myfunction()`。 另一种方法是使用 `window.onload` 事件来自动执行 JS 函数。例如: ```javascript &lt;script type=...

    jquery 教程 详细解释了jquery的使用方法

    `$(document).ready()`与`window.onload()`的区别在于: a. 执行时机:`window.onload()`等待整个页面包括所有资源(如图片)完全加载后执行,而`$(document).ready()`仅在DOM结构构建完毕时触发,不考虑资源加载...

    JQUERY核心部分

    $("&lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;").appendTo("body"); } ``` - 运行结果:点击id为`test`的元素时,会在`body`中添加`&lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;`。 #### 二、$(elem) **说明**:该函数用于限制jQuery的作用范围到一...

    jQuery实现图片预览功能

    &lt;title&gt;jQuery图片预览&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;script src="js/imagePreview.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="file" id="imageInput"&gt; ...

    javascript给span标签赋值的方法

    &lt;body onload="s()"&gt; &lt;span id="hello"&gt;&lt;/span&gt; &lt;/body&gt; ``` 在这个例子中,我们首先在HTML的body标签中使用了onload事件,当页面加载完成后,会执行函数s()。在函数s中,通过document.getElementById获取到id为...

    JQuery的read函数与js的onload不同方式实现

    总结一下,`window.onload`和`jQuery .ready()`的主要区别在于: 1. **触发时机**:`window.onload`等待整个页面完全加载,包括所有资源;而`jQuery .ready()`只等待DOM加载完成。 2. **执行效率**:`jQuery .ready...

    15天学会jQuery 初学

    &lt;script src="path/to/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#myTable tr:even').addClass('even'); $('#myTable tr:odd').addClass('odd'); }); &lt;/...

    jquery图片预览功能

    &lt;title&gt;jQuery图片预览&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;style&gt; #preview { width: 200px; height: 200px; display: none; /* 初始隐藏 */ } &lt;/style&gt; &lt;/...

    javascript input自动赋值

    &lt;body onload="assignValue()"&gt; &lt;input id="myInput" type="text"&gt; &lt;script&gt; function assignValue() { var myInput = document.getElementById('myInput'); myInput.value = '预设的值'; } &lt;/script&gt; &lt;/body&gt; ...

    js 某个页面监听事件渲染完毕的时间.pdf

    本文将深入探讨如何使用JavaScript来监听页面渲染完成的时间,并对比两种常见方法:`window.onload`和jQuery的`$(document).ready`。 首先,我们来看`window.onload`事件。这个事件会在页面中所有的资源,包括HTML...

    15天学会jquery(完整版).pdf

    &lt;script src="path/to/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt; .odd { background-color: #f2f2f2; } .even { background-color: white; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="myTable"&gt; &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;...

    html js alert

    &lt;title&gt;jQuery Alert Example&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;button id="myButton"&gt;Click me&lt;/button&gt; &lt;script&gt; $(document).ready(function...

    使用jQuery-webcam摄像头拍照demo

    &lt;script src="jquery.webcam.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="cameraPreview"&gt;&lt;/div&gt; &lt;button id="snap"&gt;拍照&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; ``` 接下来,我们需要配置jQuery-webcam并将其绑定到指定的div...

    八天学会jQuery之新手篇

    #### 一、了解`window.onload()`与`$(document).ready()` 在传统的JavaScript中,`window.onload()`方法一直被广泛用于处理页面加载完毕后执行的操作。这是一种非常实用的方法,能够确保所有的资源(如图片、样式表...

    jquery.doc

    &lt;tr&gt;&lt;td&gt;Row 1, Cell 1&lt;/td&gt;&lt;td&gt;Row 1, Cell 2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row 2, Cell 1&lt;/td&gt;&lt;td&gt;Row 2, Cell 2&lt;/td&gt;&lt;/tr&gt; &lt;!-- More rows... --&gt; &lt;/table&gt; &lt;script&gt; $(document).ready(function(){ $("#myTable tr...

    15天学会jquery(完整版)

    ### 15天学会jQuery(完整版):深入学习与实践 #### 第一章:认识jQuery—What, Why, When, Where, Who ##### **What(什么是jQuery)** - **定义**:jQuery是一款轻量级的JavaScript库,旨在简化HTML文档遍历、...

Global site tag (gtag.js) - Google Analytics