Question

我是一个jquery的首发，所以如果它是错误的，请原谅我：）

我只是想知道为什么将内容放在不同的位置使这个脚本工作，尽管我认为最好的脚本保存在文档的head部分。请解释一下这个概念。

工作代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>
</p>

<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>

</body>
</html>

不工作

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</head>

<body>

<p>
</p>

</body>
</html>

Answer 1

在第二个实例中，代码在<p>被解析到DOM树之前执行，因此当它仍然有效时，无处输出输出文本。换句话说，jQuery("p")不匹配任何元素，因此.html()“不执行任何操作”。

您可以通过等待DOM完全解析来解决此问题：

jQuery(function() {
    jQuery("p").html(...);
});

或使用不依赖于<p>现有的输出机制，例如alert()或console.log()。

Answer 2

好吧，您的浏览器似乎首先加载了<head>部分，因此在第二个示例中没有p元素。

在这两种情况下，您都应该将代码包装在$(function(){ ... })。

中

Answer 3

如果将脚本放在<body>元素之前，则会在加载/解析DOM树之前执行该脚本。因此<p>元素不存在且无法找到。你可以：

将脚本放在<body>标记之后（如第一个示例中所示）

或者您可以在ready事件被触发后调用您的函数：

$(document).ready(function() {
  jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
});

这两个jQuery用法有什么区别

3 个答案: