好的,这可能只是一个愚蠢的问题,尽管我敢肯定会有很多其他人不时问同样的问题。我,我只是想以任何一种方式100%确定它。有了jQuery,我们都知道精彩之处
$('document').ready(function(){});
但是,假设我要运行一个用标准JavaScript编写且没有库支持的函数,并且我想在页面准备就绪后立即启动一个函数。解决这个问题的正确方法是什么?
我知道我可以做:
window.onload="myFunction()";
…或者我可以使用body
标记:
<body onload="myFunction()">
…或者我什至可以尝试在页面底部输入所有内容,但结尾body
或html
标记类似:
<script type="text/javascript">
myFunction();
</script>
什么是跨浏览器(旧/新)兼容方法以jQuery的方式发布一个或多个函数$.ready()
?
在没有为您提供所有跨浏览器兼容性的框架的情况下,最简单的操作就是将调用代码放在正文末尾。它比onload
处理程序执行起来更快,因为它仅等待DOM准备就绪,而不等待所有图像加载。而且,这适用于所有浏览器。
<!doctype html>
<html>
<head>
</head>
<body>
Your HTML here
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
</script>
</body>
</html>
对于现代浏览器(来自IE9和更高版本以及任何版本的Chrome,Firefox或Safari),如果您希望能够实现类似jQuery的$(document).ready()
方法,可以从任何地方调用(而不必担心调用脚本的位置),您可以只使用以下内容:
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
用法:
docReady(function() {
// DOM is loaded and ready for manipulation here
});
如果您需要完全的跨浏览器兼容性(包括IE的旧版本)并且不想等待window.onload
,那么您可能应该看看jQuery之类的框架如何实现其$(document).ready()
方法。根据浏览器的功能,它相当复杂。
让您稍微了解一下jQuery的功能(无论放置script标记的位置都可以使用jQuery)。
如果支持,它将尝试标准:
document.addEventListener('DOMContentLoaded', fn, false);
后退到:
window.addEventListener('load', fn, false )
或对于较旧版本的IE,它使用:
document.attachEvent("onreadystatechange", fn);
后退到:
window.attachEvent("onload", fn);
而且,我不太了解IE代码路径中的一些变通办法,但看起来它与框架有关。
这是.ready()
用普通javascript编写的jQuery的完全替代:
(function(funcName, baseObj) {
// The public function name defaults to window.docReady
// but you can pass in your own object and own function name and those will be used
// if you want to put them in a different namespace
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
// call this when the document is ready
// this function protects itself against being called more than once
function ready() {
if (!readyFired) {
// this must be set to true before we start calling callbacks
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList[i].fn.call(window, readyList[i].ctx);
}
// allow any closures held by these functions to free
readyList = [];
}
}
function readyStateChange() {
if ( document.readyState === "complete" ) {
ready();
}
}
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = function(callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(function() {callback(context);}, 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// if document already ready to go, schedule the ready function to run
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don't have event handlers installed, install them
if (document.addEventListener) {
// first choice is DOMContentLoaded event
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
} else {
// must be IE
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
用法:
// pass a function reference
docReady(fn);
// use an anonymous function
docReady(function() {
// code here
});
// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);
// use an anonymous function with a context
docReady(function(context) {
// code here that can use the context argument that was passed to docReady
}, ctx);
已在以下位置进行了测试:
IE6 and up
Firefox 3.6 and up
Chrome 14 and up
Safari 5.1 and up
Opera 11.6 and up
Multiple iOS devices
Multiple Android devices
以下是其工作原理的摘要:
docReady(fn, context)
docReady(fn, context)
被调用时,检查是否准备好处理程序已经被解雇。如果是这样,只需安排新添加的回调在此JS线程结束后立即触发setTimeout(fn, 1)
。document.addEventListener
存在,则安装.addEventListener()
用于"DOMContentLoaded"
和"load"
事件的事件处理程序。为了安全起见,“负载”是备用事件,因此不需要。document.addEventListener
不存在,则使用.attachEvent()
for "onreadystatechange"
和"onload"
events 安装事件处理程序。onreadystatechange
下,请检查,如果是document.readyState === "complete"
,则调用函数以激发所有就绪的处理程序。docReady()
向其注册的处理程序保证按其注册顺序触发。
如果您docReady(fn)
在文档准备就绪后调用,则将计划使用当前执行线程完成后立即执行回调setTimeout(fn, 1)
。这使调用代码始终可以认为它们是异步回调,即使稍后在当前JS线程完成并保留调用顺序时也将稍后调用。
问题内容: 该表示法是: 实际上不哈希对象;它实际上只是转换为字符串(通过它是一个对象,还是其他各种原始类型的内置转换),然后在“ ”中查找该字符串,而不对其进行哈希处理。也不会检查对象是否相等-如果两个不同的对象具有相同的字符串转换,则它们将彼此覆盖。 鉴于此-在JavaScript中是否有任何有效的hashmap实现?(例如,第二个Google结果产生的实现对任何操作都是O(n)。其他各种结果
问题内容: 我正在尝试将一些JavaScript代码从MicrosoftAjax移到JQuery。我在MicrosoftAjax中使用了流行的.net方法中的JavaScript等效项,例如String.format(),String.startsWith()等。jQuery中是否具有等效项? 问题答案: ASP.NET AJAX的源代码可供您参考,因此您可以仔细阅读它,并将要继续使用的部分包含在
问题内容: 什么是Java的JavaScript等价物 我需要获取一个数组或所有匹配项的列表 例: 给 http://www.w3schools.com/jsref/jsref_match.asp 问题答案: 检查正则表达式教程 您的代码应类似于以下内容:
问题内容: 我在我的项目中使用AngularJS,但我不想包含jQuery。我想在AngularJS中执行与此等效的jQuery 我在互联网上搜索,但找不到。 问题答案: AngularJS内置了jqLite。请参阅文档以查看可用方法 角jqLite 对于您的方案: 在angularJS中不起作用,等效于。但是jqLite的限制非常有限,不支持“按ID选择器”,这意味着您不能像按类或I
问题内容: 我试图找到与此JavaScript方法调用等效的jQuery: 我已经达到: 但这并不能达到与JavaScript方法的最后一个参数相同的结果-一个布尔值,指示是否应在捕获或冒泡阶段执行事件处理程序根据我对理解被排除在外。 如何使用jQuery指定该参数或以其他方式实现相同的功能? 问题答案: 并非所有浏览器都支持事件捕获(例如,InternetExplorer版本低于9)不支持事件捕
问题内容: 在JavaScript中: C#应用程序是否等效?为了转义HTML字符,我使用了: 但是我不确定如何将匹配项转换为JS使用的正确十六进制格式。例如此代码: 返回“ 的,而不是它看起来像我需要了分割字符串为字节或东西。 编辑:这是一个Windows应用程序中,唯一可用的项目有:,,和。 问题答案: 或者是转义旨在成为URL一部分的字符串的正确方法。 以字符串为例: -> -> ->也编码