什么是'$（document）.ready（）'的非jQuery等价物？
$(document).ready()的非jQuery等价物是什么？
$(document).ready()在于它在window.onload之前触发。 加载函数等待所有内容加载完成，包括外部资源和图像。 $(document).ready ，但是，当DOM树完成并可以被操纵时触发。 如果你想让DOM准备好，没有jQuery，你可以检查这个库。 有人从jQuery中提取了ready部分。 它很好，很小，你可能会觉得它很有用：
已经在谷歌代码
这从ECMA完美地工作
document.addEventListener("DOMContentLoaded", function() { // code... });
window.onload等于JQuery $(document).ready因为JQuery只等待DOM树，而Vanilla JS检查包括外部资源和图像的所有元素。
编辑 ：增加IE8和更旧的等效，谢谢Jan Derk的观察。 您可以在此链接阅读MDN 上的代码来源：
// alternative to DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { // Initialize your application or run some code. } }
除了"interactive"之外，还有其他的select。 有关详细信息，请参阅MDN链接。
有一点我放在一起
domready.js
(function(exports, d) { function domReady(fn, context) { function onReady(event) { d.removeEventListener("DOMContentLoaded", onReady); fn.call(context || exports, event); } function onReadyIe(event) { if (d.readyState === "complete") { d.detachEvent("onreadystatechange", onReadyIe); fn.call(context || exports, event); } } d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) || d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe); } exports.domReady = domReady; })(window, document);
如何使用它
<script src="domready.js"></script> <script> domReady(function(event) { alert("dom is ready!"); }); </script>
您还可以通过传递第二个参数来更改callback运行的上下文
function init(event) { alert("check the console"); this.log(event); } domReady(init, console);
有一个基于标准的replace， DOMContentLoaded由超过90％的浏览器支持，但不支持IE8（所以下面的代码使用JQuery支持浏览器） ：
document.addEventListener("DOMContentLoaded", function(event) { //do work });
jQuery的本地函数比window.onload复杂得多，如下所示。
function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", function(){ document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); jQuery.ready(); }, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent("onreadystatechange", function(){ if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", arguments.callee ); jQuery.ready(); } }); // If IE and not an iframe // continually check to see if the document is ready if ( document.documentElement.doScroll && window == window.top ) (function(){ if ( jQuery.isReady ) return; try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); })(); } // A fallback to window.onload, that will always work jQuery.event.add( window, "load", jQuery.ready ); }
在普通的香草JavaScript中，没有库？ 这是一个错误。 $只是一个标识符，除非你定义它，否则是未定义的。
jQuery将$定义为它自己的“所有对象”（也称为jQuery因此您可以在不与其他库冲突的情况下使用它）。 如果你不使用jQuery（或其他定义它的库），那么$就不会被定义。
或者你问在普通的JavaScript中等价物是什么？ 在这种情况下，您可能需要window.onload ，它不完全等价，但它是在vanilla JavaScript中最接近相同效果的最快和最简单的方法。
onLoad身体也可以是一个替代scheme：
<html> <head><title>Body onLoad Exmaple</title> <script type="text/javascript"> function window_onload() { //do something } </script> </head> <body onLoad="window_onload()"> </body> </html>
最近浏览器最简单的方法是使用onDOMContentLoaded上的js事件：
onDOMContentLoaded = (function(){ console.log("Dom is ready!") })()
我不认为JavaScript有内置的function。它是jQuery特定的。
