本地Javascript和CDN优先级

我正在从新波士顿视频教程学习jquery，下面有两个问题。目的是在用户单击某个段落时隐藏该段落。但首先，这是我在点击时隐藏一段文字所做的

hide.js看起来像这样

$('#paragraph').click(
function() {
    $('#paragraph').hide();
}
);

在Body-Works中，CDN后跟本地JS

正文中的本地JS后跟CDN-不起作用

本地JS后跟头部CDN-不起作用

CDN后跟头部的本地JS-不起作用

问题1。看到这些案例，我们能自信地说在HEAD部分声明的脚本永远不会工作吗

---

问题2。有人能解释一下这些不同的行为吗？

如果

hide.js

使用jQuery，那么是的，您需要先加载

jQuery.min.js

。这就解释了（2）和（3）

（4）的问题是需要将代码包装在块中。由于

位于

之后，因此运行

hide.js

时不存在

#段落

所以有两件事正在发生。必须在jQuery代码加载后加载代码，因为它利用jQuery隐藏段落

其次，必须在加载DOM后加载代码，以便它可以访问段落元素

这就是为什么第一条有效，而其他任何一条都不起作用。您在要影响的标记之后加载了它，而jQuery在脚本之前加载

您还可以将脚本包装在
$（document）.ready（function（）{}）
中，以确保在脚本运行之前加载DOM。这将允许您将脚本放在头部，但您仍然必须首先加载jQuery

因此：

要理解这个问题，您必须了解javascript是如何从外部资源包含在页面上的，以及浏览器是如何构建dom的

包含两个脚本标记时：

<script src="jquery.js"></script>
<script src="foo.js"></script>

您还可以使用窗口加载事件

$(window).on("load",function(){
    // my code here
})

最好使用DOMContentLoaded，除非您的代码需要获取元素的宽度或高度，因为这样会更快

第三种选择是使用事件委派，但它确实不适合您的用例

$(document).on('click','#paragraph',function() {
    $('#paragraph').hide();
});

通常，在结束正文标记之前使用javascript是一个更好的主意，但是对于许多MVC和CMS系统来说，这样做通常并不容易。
首先，使用$（document）。ready（）：

将Jquery local或CDN放在自定义脚本之前

<script src="myjQueryCDNorLocal.js"></scritpt>
<script src="myCustomScripts.js"></scritpt>

您有两个潜在问题

hide.js
中的代码使用jQuery函数。这些函数必须在代码尝试使用它们时定义。如果在jQuery之前包含
hide.js
，那么，在浏览器尝试执行
hide.js
时，它将（尚未）加载jQuery，因此不会定义jQuery函数。因此：在包含
hide.js
之前必须包含jQuery

hide.js中的代码引用网页中的内容。浏览器必须已加载页面（并对其进行了分析）才能找到该内容。如果在
标记中包含
hide.js
，则保证执行
hide.js
时该内容不可用。（因此，Q1的答案是“是”。但是，简单地将脚本移动到页面底部也不能保证有效。请注意，浏览器必须在找到内容之前加载并解析页面。将脚本移动到底部，您将确保页面已加载。但您不能保证页面已被解析。在上面的简单示例中，即使是最慢的浏览器也可能已经解析了该页面。这就是为什么它似乎可以工作的原因。但是，为了真正安全，在确定浏览器已经解析了该页面之前，您不应该执行
hide.js
。您可以使用jQuery告诉您何时发生了这种情况：

$（函数（）{
$（“#段落”）。单击(
函数（）{
$（“#para graph”）.hide（）；
}
);
}))

那么你是通过CDN加载“hide.js”的？那么“local js”是什么呢？@ChrisHardie local js就是上面定义的。我将使用CDN实现其他功能。local js=hide.js很抱歉混淆了
$(document).on('click','#paragraph',function() {
    $('#paragraph').hide();
});

$(document).ready(function() {
  $('#paragraph').click(function() {
    $('#paragraph').hide();
  });
});

<script src="myjQueryCDNorLocal.js"></scritpt>
<script src="myCustomScripts.js"></scritpt>