Javascript和jQuery在同一个HTML文件上

Javascript and jQuery on same HTML file

本文关键字：HTML 文件 同一个 jQuery Javascript      更新时间：2023-09-26

我已经建立了一个网站，其中一个页面有一些jQuery元素[start button，progress bar]。我在页面中实现了一个javascript计时器，当我将javascript信息放入头部时，jQuery就不再工作了。如何避免这个问题？感谢

jQuery工作/Javascript不工作｛%加载静态文件%｝

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">        </script>
<script type="text/javascript" src="{% static 'livestream/jquery-    timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
    <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
    <head>
        <style>
            .progressInfo {
                margin-left: leftmargin;   
            }
        </style>

        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet"     href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />

jQuery不起作用/Javascript起作用｛%加载静态文件%｝

<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>
<html>
    <head>
        <style>
                .progressInfo {
                margin-left: leftmargin;   
            }
        </style>

        <meta charset="utf-8" />
        <title>Main</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
        <script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
        <link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />

首先我会把你的基本<html>整理好。我试着总是用。。。

<!DOCTYPE html>
<html>
     <head>
        <meta>
        <title>
        <script></script>
        <link>
     </head>
     <body>
     </body>
</html>

然后，加载jQuery，然后加载任何jQuery脚本（不要忘记使用缩小版）。请确保您只加载一个版本的jQuery，如果您使用的脚本与当前运行的版本不一致，则升级jQuery或脚本（以较早的版本为准）。正如@Antti Hapala所提到的，jQuery的多个实例肯定会导致问题。

我在开发过程中做的另一件事是使用本地版本的.js和.css文件，直到我知道一切都正常工作，然后转换到托管版本，重新测试，然后上线。

所以，我会尝试类似（从你的第一个例子）的东西

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Main</title>
        <script type="text/javascript" src="js/jquery-latest.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/jquery.timer.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
    </head>
    <body>
        <!-- Your good stuff here -->
    </body>
</html>

http://html5boilerplate.com/是寻找示例的好地方

所有的.js文件都会被下载到本地的js文件夹中，所有的.css文件都会保存在本地的css文件夹中（同样，你可以在上线时更改为托管版本。）确保你只引用任何一个.js或.css文件一次，并在可能的时候组合和缩小。

最后，确保.js文件都在同一版本的jQuery中运行。如果这不起作用，请开始检查firebug/chrome-dev工具等是否存在错误。

您在同一个页面上加载了两个jquery，可能还有不同的版本，所以事情肯定会变得很愚蠢；脚本标记也应该在头部，当然不能在<!DOCTYPE> 之前

相关文章：