这两种jQuery用法的区别是什么？
提问于 2012-09-15 02:08:40
我是一个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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-09-15 02:11:14
在第二个实例中，代码是在<p>被解析到DOM树之前执行的，所以当它仍然工作时，就没有地方可以将输出文本放入其中了。换句话说，jQuery("p")不匹配任何元素，因此.html()“什么都不做”。
您可以通过等待DOM被完全解析来修复这个问题：
jQuery(function() {
jQuery("p").html(...);
});或者使用不依赖于现有<p> (如alert()或console.log() )的输出机制。
Stack Overflow用户
发布于 2012-09-15 02:11:23
那么，您的浏览器似乎首先加载了<head>部分，因此在第二个示例中没有p元素。
在这两种情况下，您都应该用$(function(){ ... })包装代码。
Stack Overflow用户
发布于 2012-09-15 02:13:20
如果将脚本放在<body>元素之前，则在加载/解析DOM树之前执行脚本。因此，<p>元素不存在，无法找到。您可以：
- 将脚本放在
<body>标记之后(如第一个示例中所示) - 也可以在触发
ready事件后调用函数： $(Document).ready(函数(){ jQuery (“p”).html)(“检查jQuery是否支持Ajax方法："+ jQuery.support.ajax )；}；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12436441
复制相关文章
点击加载更多
腾讯云开发者
