首页技术jquery ready,js中ready什么意思

jquery ready,js中ready什么意思

编程之家2026-06-281044次浏览

各位老铁们好,相信很多人对jquery ready都不是特别的了解,因此呢,今天就来为大家分享下关于jquery ready以及js中ready什么意思的问题知识,还望可以帮助大家,解决大家的一些困惑,下面一起来看看吧!

jquery ready,js中ready什么意思

Ready的jQuery中ready用法

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。

请确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。示例

jquery ready,js中ready什么意思

jQuery代码:

$(document).ready(function(){

// Your code here...

});

使用$(document).ready()的简写,并且具有安全保障(failsafe)的jQuery代码。安全保障能够让你的$别名不依赖于全局的$.

jQuery代码:

jquery ready,js中ready什么意思

jQuery(function($){

// Your code using failsafe$ alias here...

});

jQuery事件详解之$(document).ready()

在页面加载结束后,浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload方法;在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。

那么它和window.onload有何不同呢?

window.onload是在网页中所有元素加上所有资源++完全加++载到浏览器后才执行。

而$(document).ready()中绑定的事件是在 dom完全就绪时就可以被调用,此时对于jQuery来说都是可以被访问的(关联的资源可能并没有被加载完毕)。

举个例子来说,在$(document).ready()中定义了图片的宽高,但由于此时图片还没有被加载完毕,此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load()方法。

load()方法会在元素的onload事件中绑定一个处理函数,如果该处理函数绑定给window对象,则会在所有资源加载完毕后触发,如果load绑定在元素上则会在该元素加载完毕后触发。

既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢?

window.onload事件每次只能保存对一个函数的引用,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题,每次调用$document.ready()方法都会在现有行为上追加新的行为,这些行为会根据注册顺序依次执行。

jquery中$ready和window.onload的区别

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的。最近遇到了这样的问题,查询了多篇文章,做一下总结。

简单来说,要以用以下张表来表示:

Jquery的ready()与Javascrpit的load()

window.onload()$(document).ready()

加载时机

必须等待网页全部加载完毕(包括图片等),然后再执行JS代码

只需要等待网页中的DOM结构加载完毕,就能执行JS代码

执行次数

只能执行一次,如果第二次,那么第一次的执行会被覆盖

可以执行多次,第N次都不会被上一次覆盖

举例

以下代码无法正确执行:

window.onload= function(){ alert(“text1”);};

window.onload= function(){ alert(“text2”);};

结果只输出第二个

以下代码正确执行:

$(document).ready(function(){alert(“Hello”)});

$(document).ready(function(){alert(“Hello”)});

结果两次都输出

简写方案无$(function(){})

一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。

而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。

load()一般不建议使用,这里主要讲一下($(selector).ready())。

原理:

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

Jquery中的详细代码分析:

ready: function(fn){//绑定监听器bindReady();//如果 DOM加载完成if( jQuery.isReady)//马上运行此函数fn.call( document, jQuery);//否则保存起来else//把函数加入缓存数组中jQuery.readyList.push( function(){ return fn.call(this, jQuery);});return this;

}

当然,jquery对不同的浏览器dom加载完成的通知 bindReady()函数也是不同的

var readyBound= false;function bindReady(){if( readyBound) return;

readyBound= true;// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件if( document.addEventListener&&!jQuery.browser.opera)//直接使用事件回调即可document.addEventListener("DOMContentLoaded", jQuery.ready, false);//如果是ie并且不是嵌在frame中//就需要不断地检查文档是否加载完if( jQuery.browser.msie&& window== top)(function(){if(jQuery.isReady) return;try{document.documentElement.doScroll("left");

} catch( error){setTimeout( arguments.callee, 0);return;

}// and execute any waiting functionsjQuery.ready();

})();if( jQuery.browser.opera)

document.addEventListener("DOMContentLoaded", function(){if(jQuery.isReady) return;for(var i= 0; i< document.styleSheets.length; i++)

if(document.styleSheets[i].disabled){

setTimeout( arguments.callee, 0);return;

}// and execute any waiting functionsjQuery.ready();

}, false);if( jQuery.browser.safari){var numStyles;

(function(){if(jQuery.isReady) return;if( document.readyState!="loaded"&& document.readyState!="complete"){

setTimeout( arguments.callee, 0);return;

}if( numStyles=== undefined)

numStyles= jQuery("style, link[rel=stylesheet]").length;if( document.styleSheets.length!= numStyles){

setTimeout( arguments.callee, 0);return;

}// and execute any waiting functionsjQuery.ready();

})();

}// A fallback to window.onload, that will always workjQuery.event.add( window,"load", jQuery.ready);

}

}

好了,文章到此结束,希望可以帮助到大家。

js正则表达式match js 正则表达式 数字如何安装php环境(php环境安装)