有人能告诉我脚本标签的位置在使用JQuery时是否重要？
例如:
<script>
$("a").click(function(event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});
</script>
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
上面的代码不能按需要工作,但以下工作,
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
<script>
$("a").click(function(event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});
</script>
为什么第二个有效？是因为代码是从上到下连续工作的吗？此外,如果第一个代码在内部.ready(),那么位置无关紧要.
位置很重要.在第一种情况下,您将脚本放在DOM元素之前,这意味着您需要将其包装在document.ready处理程序中,否则在您附加.click处理程序时锚点尚不存在.以下是将脚本打包成文档的方法,这意味着只有在加载完整DOM并准备好操作时才会附加.click处理程序:
<script>
$(function() {
$("a").click(function(event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});
});
</script>
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
将脚本放在文档的末尾(就在结束<body>标记之前)也是一种很好的做法(实际上它是加速您的网站的最佳实践建议之一),在这种情况下,您不需要包装它在一个document.ready.