事件监听器，定义jQuery时的警报

Question

如何在加载jQuery并使其完全可用后创建警报？

Answer 1

$(function(){
    alert("jQuery + DOM loaded.");
});

^{* （jQuery在<script>中包含后立即可用。）}

Answer 2

如果您想知道包含jQuery的script元素何时完成加载......

document.addEventListener("load", function(event) {
    if (typeof jQuery == "function") {
        // jQuery is available.
    }
});

在您的任何script元素之前附加此事件侦听器。

Answer 3

我将告诉你如何做你想做的事，然后告诉你我对它的看法：

(function checkJquery() {
  if (typeof(jQuery) == 'undefined') {
    setTimeout(checkJquery, 500);
  }
  else {
    alert('jQuery is loaded.');
  }
})();

通常，当您使用jQuery时，您会将其包含在<script>的{​​{1}}标记中。所有这些脚本都按照它们的定义顺序加载，因此如果先加载它，它将可用于所有后续脚本。因此，您永远不需要检查它。

如果您发现自己在网站上使用了大量的javascript功能，并希望确保所有模块依赖项都得到检查，我建议您查看RequireJS

Answer 4

如果你没有，开始使用萤火虫。它非常有用。在NET选项卡中，您可以看到正在加载的所有文件，http请求，所有内容。

Answer 5

浏览器按照它解析文档时的顺序执行JS，包括外部脚本中的JS。因此，jQuery将在包含它的<script>元素之后立即加载并“完全可用”，并且您可以在<script>元素之后立即发出警报：

<script type="text/javascript" src="jquery.js"></script>
<script>
   if (jQuery)
      alert("jQuery is now loaded");
</script>

我已经包含了if (jQuery)部分，因为如果jquery.js的路径不正确或者出现其他问题以防止文件加载，那么（显然）jQuery将无法使用。但在正常情况下if测试会成功。

如果你想在页面上实际操作DOM元素，那么你需要在这些元素之后，或者在jQuery document.ready处理程序或onload处理程序中包含执行的脚本：

<script>
   $(document).ready(function() {
       alert("jQuery is loaded, and the DOM is ready too.");
   });
</script>