3

我是一个 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>
4

3 回答 3

8

在第二种情况下，代码在<p>被解析到 DOM 树之前执行，所以虽然它仍然可以工作，但没有地方可以将输出文本放入其中。换句话说，jQuery("p")不匹配任何元素，所以.html()“什么都不做”。

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

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

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

于 2012-09-15T10:11:14.643 回答
3

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

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

于 2012-09-15T10:11:23.033 回答
1

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

  • 将脚本放在<body>标签之后（就像在您的第一个示例中一样）

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

    $(document).ready(function() {
  jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
});
于 2012-09-15T10:13:20.340 回答