本地Javascript和CDN优先级
我正在从新的波士顿视频教程中学习jquery，下面有两个问题。目的是在用户点击一个段落时隐藏它。但是首先，这是我在点击时隐藏一段内容时所做的。
hide.js看起来像这样
$('#paragraph').click(
function() {
$('#paragraph').hide();
}
);- CDN和局部JS在身体作品中的应用
- 局部JS和CDN在身体上不起作用
- 本地JS和头中的CDN -不起作用
- CDN后跟本地JS在头-不起作用
Q1。看到这些情况，我们是否可以自信地说，在首页部分声明的脚本永远都不会起作用？
Q2。有人能解释一下这些不同的行为吗？
回答 5
Stack Overflow用户
发布于 2014-02-26 19:02:13
要理解这个问题，您必须了解javascript是如何从外部资源包含到页面中的，以及浏览器如何构建dom。
当包含两个脚本标记时：
<script src="jquery.js"></script>
<script src="foo.js"></script>第一个被下载并执行，然后第二个被下载并执行。如果在第一个脚本中定义了属性，例如window.hello，您可以在第二个脚本中访问它，因为第二个脚本是在第一个脚本完成后下载和执行的。如果脚本是按另一个顺序排列的，则该属性将不可用。
至于将代码包含在头中还是正文中，您必须考虑代码是什么时候相对于浏览器执行的，浏览器解析html和创建DOM。浏览器从上到下读取html，因此，当它到达头部的脚本标记时，body节点甚至还不存在。这就是为什么您的代码在头脑中无法工作的原因。要使它在头脑中工作，您必须以某种方式告诉您的代码等待元素的存在。解决这一问题的最常用方法是使用DOMContentLoaded事件，您可以绑定到该事件：
$(document).ready(function(){
// my code here
});您还可以使用window load事件。
$(window).on("load",function(){
// my code here
})最好使用DOMContentLoaded，除非您的代码需要获得元素的宽度或高度，因为它会发生得更快。
第三种选择是使用事件委托，但它确实不适合will与您的使用。
$(document).on('click','#paragraph',function() {
$('#paragraph').hide();
});这通常是一个更好的主意，让您的javascript之前关闭主体标记，但它往往不是很容易做到这一点，在许多MVC和CMS系统。
Stack Overflow用户
发布于 2014-02-26 19:00:07
如果hide.js使用jQuery，则需要先加载jquery.min.js。这就解释了(2)和(3)。
(4)的问题是，您需要将代码包装在document.ready块中。由于<body>位于<head>之后，在运行hide.js时#paragraph并不存在。
http://api.jquery.com/ready/
Stack Overflow用户
发布于 2014-02-26 19:01:52
所以有两件事正在发生。您的代码必须在加载jQuery代码之后加载，因为它利用jQuery隐藏段落。
其次，您的代码必须在加载DOM之后加载，以便它能够访问您的段落元素。
这就是为什么数字1起作用，而其他人都不起作用。您已经在要影响的标记之后加载了它，并且在脚本之前加载了jQuery。
您还可以将脚本包装在$(document).ready(function() {})中，以确保在脚本运行之前加载DOM。这将使您可以将脚本放在头上，但仍然必须先加载jQuery。
所以：
$(document).ready(function() {
/// your script here
})https://stackoverflow.com/questions/22050588
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号