Question

我正在从新的波士顿视频教程中学习jquery，并在下面提出2个问题。目的是在用户点击时隐藏段落。但首先，这是我在点击时隐藏段落所做的。

hide.js看起来像这样

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

CDN后跟Body - Works中的本地JS
本地JS跟随身体中的CDN - 不起作用
本地JS随后是CDN in Head - 不起作用
CDN跟随本地JS头 - 不起作用

Q1。看到案例，我们可以自信地说HEAD部分中声明的脚本永远不会起作用吗？

Q2。有人可以解释一下这些不同的行为吗？

Answer 1

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

当您包含两个脚本标记时：

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

首先下载并执行，然后下载并执行第二个。如果在第一个脚本中定义了属性，例如window.hello，则可以在第二个脚本中访问它，因为第二个脚本在第一个脚本完成后下载并执行。如果脚本是其他顺序，则该属性尚不可用。

至于将代码包含在head和body中，你必须考虑代码执行时相对于浏览器解析html和创建DOM。浏览器从上到下读取html，因此，当它到达头部的脚本标记时，身体节点甚至还不存在。这就是为什么你的代码无法正常工作的原因。为了使它在头部工作，您必须以某种方式告诉您的代码等待元素存在。解决此问题的最常见方法是使用DOMContentLoaded事件，您可以将其绑定到：

$(document).ready(function(){
    // my code here
});

您也可以使用窗口加载事件。

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

最好使用DOMContentLoaded，除非你的代码需要获取元素的宽度或高度，因为它会更快地发生。

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

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

在关闭正文标记之前使用javascript通常是个更好的主意，但是对于许多MVC和CMS系统来说，这样做通常不是那么容易。

Answer 2

如果hide.js使用jQuery，则是，您需要先加载jquery.min.js。这解释了（2）和（3）。

（4）的问题是你需要将代码包装在document.ready块中。由于<body>位于<head>之后，#paragraph在hide.js运行时不存在。

http://api.jquery.com/ready/

Answer 3

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

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

这就是为什么数字1起作用而其他人都不起作用的原因。您已在要影响的标记之后加载它，并在脚本之前加载jQuery。

您还可以将脚本包装在$(document).ready(function() {})中，以确保在脚本运行之前加载DOM。这将让你把脚本放在头脑中，但你仍然需要先加载jQuery。

所以：

$(document).ready(function() {
    /// your script here
})

Answer 4

你有两个潜在的问题。

hide.js中的代码使用jQuery函数。当代码尝试使用它们时，必须定义这些函数。如果在jQuery之前包含hide.js，那么，在浏览器尝试执行hide.js的时间点，它将不会（尚未）加载jQuery，因此将不会定义jQuery函数。因此：您必须包含jQuery 之前包含hide.js。
hide.js中的代码引用网页中的内容。浏览器必须已加载页面（并对其进行解析）才能找到该内容。如果您在hide.js标记中加入<head>，则可确保在hide.js执行时该内容不可用。（因此Q1的答案是“是”。但是，只是将脚本移动到页面底部也不能保证也能正常工作。请注意，浏览器必须先加载并解析页面它可以找到内容。通过将脚本移动到底部，您将确保页面已加载。但您无法保证页面已被解析。在上面的简单示例中，即使是最慢的浏览器也会很可能解析了页面。这就是为什么它似乎有效。但是，为了真正安全，你不应该执行hide.js，直到你确定浏览器已经解析了页面。你可以使用jQuery告诉你何时发生：

$（函数（）{ $（ '＃款'）。单击（ function（）{ $（'＃para graph'）。hide（）; } ）; }）;

Answer 5

首先，使用$（document）.ready（）：

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

在自定义脚本之前放置Jquery本地或CDN 。

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

本地Javascript和CDN优先级

5 个答案: