保持javascript外部 - 不起作用

时间:2012-06-05 21:40:48

标签: javascript jquery html

当我将javascript / jquery保留在外部时,我的代码无效。但是当我将它们组合在我的html文件中时,一切都很好。

关于为什么会这样做的任何建议?

这是代码:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
       <script type ="text/javascript" src="jquery.js"></script>  
       <script type ="text/javascript" src="program.js"></script>
</head>
<body>
    <div id="clickme">
    Click here
    </div>

    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>

</body> 
</html>

使用外部javascript

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});
$("p").click(function () {
     $(this).slideUp();
   });

VERSUS

<!DOCTYPE html>
<html>
<head>
    <script type ="text/javascript" src="jquery.js"></script>  
</head>
<body>

    <div id="clickme">
        Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>  
    <p>Yet one more Paragraph</p>


    <script>
        $('#clickme').click(function() {
      $('#book').fadeOut('slow', function() {
     // Animation complete.
     });
     });

    $("p").click(function () {
    $(this).slideUp();
     });


    </script>

</body>
</html>

4 个答案:

答案 0 :(得分:13)

我猜你在DOM完成加载之前执行click事件。将代码包装在dom ready事件中,它应该可以正常工作,假设你的外部javascript文件的路径是正确的。

$(function(){

   $('#clickme').click(function() {
     $('#book').fadeOut('slow', function() {
       // Animation complete.
     });
   });
   $("p").click(function () {
      $(this).slideUp();
   });
});

如果遇到任何脚本错误,请始终使用firebug(控制台)查看脚本有什么问题。

答案 1 :(得分:6)

您的javascript在页面上有元素之前执行。您可以使用$(document).ready(function(){...});或将外部JavaScript文件移至底部来解决此问题。

答案 2 :(得分:3)

将您的js代码包装在

中的外部文件中
$(document).ready(function(){

    //your code goes here

});

现在你在标题中包含外部js文件并执行它。此时没有元素,因此$('#clickme')$("p")为空集。在第二个示例中,在使用这些元素呈现html后运行此代码。

答案 3 :(得分:2)

存在差异的原因是,在浏览器完全解析DOM之前,您的代码正在外部文件中执行,因此您尝试以编程方式访问浏览器尚未知道的页面元素。这正是大多数人已经说过的,但让我进一步阐述......

虽然很多人都提到过使用jQuery的文档就绪处理程序,但我想指出一个可行的解决方案就是将脚本标记移动到页面底部。

这不仅会解决您自己的问题,而且还会因浏览器处理脚本的方式而缩短页面加载时间。当浏览器遇到脚本时,它会停止正在执行的所有操作(称为“阻塞”操作),并解析并执行脚本。这会导致页面从用户的角度看起来停滞不前,这意味着用户体验不佳。因此,因为脚本仅在遇到脚本时被解析和执行,所以通过将脚本移动到底部,您可以允许浏览器完全呈现页面,以便JavaScript不会阻止呈现。

虽然不是只是将脚本移动到页面底部,但我也会按照其他人的建议进行操作,并将整个代码包装在文档就绪处理程序中,只是为了使代码更加安全。将始终在正确的时间执行。

此外,在内联或外部的争论中,外部脚本通常是首选,因为它们更易于维护,浏览器可以独立于页面缓存它们(提供正确的HTTP标头)。

总结一下这里的一些示例代码:

<html>
<head></head>
<body>
<!-- all your markup here -->

<!-- script at bottom, markup already rendered by this point -->
<script type="text/javascript" src="jquery.js"></script>

<!-- inline or external, still wrap in document ready handler -->
<!-- though external is better because the browser can cache it independently of the page -->
<script type="text/javascript">
    //wrap in document ready to be extra safe
    $(function() { /*code here*/ });
</script>

</html>