1

当我将我的 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();
   });

相对

<!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

4 回答 4

14

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

$(function(){

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

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

于 2012-06-05T21:44:04.883 回答
7

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

于 2012-06-05T21:44:54.663 回答
5

将您的 js 代码包装在外部文件中

$(document).ready(function(){

    //your code goes here

});

现在您在标头中包含外部 js 文件并执行它。此时没有元素so$('#clickme')并且$("p")是空集。在第二个示例中，您在使用该元素渲染 html 后运行此代码。

于 2012-06-05T21:44:51.770 回答
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>
于 2012-06-05T23:30:29.357 回答