Question

我的jQuery在外部文档中工作正常，但是当我把它放在文档的头部时却没有。这是代码：

<head>
        <meta charset="utf-8">
        <meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My title</title>
        <link href="css/style.css" rel="stylesheet">
        <link href="css/responsive_styles.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
        <script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
        <script>
            $(document).ready(function(){
                var isChrome = !!window.chrome && !!window.chrome.webstore;
                var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

                if (isChrome){ 
                    $(".welcome-background").css("background-attachment", "scroll");
                    $(".menu-background").css("background-attachment", "scroll");
                    $(".openHours-background").css("background-attachment", "scroll");
                }

                if(iOS){
                    $(".welcome-background").css("background-attachment", "scroll");
                    $(".menu-background").css("background-attachment", "scroll");
                    $(".openHours-background").css("background-attachment", "scroll");
                }
            });   
        </script>
    </head>

Answer 1

您尚未包含jQuery库，它应该位于jQuery脚本之前。

<head>
    <meta charset="utf-8">
    <meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsive_styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
    <script>
        $(document).ready(function(){
            var isChrome = !!window.chrome && !!window.chrome.webstore;
            var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

            if (isChrome){ 
                $(".welcome-background").css("background-attachment", "scroll");
                $(".menu-background").css("background-attachment", "scroll");
                $(".openHours-background").css("background-attachment", "scroll");
            }

            if(iOS){
                $(".welcome-background").css("background-attachment", "scroll");
                $(".menu-background").css("background-attachment", "scroll");
                $(".openHours-background").css("background-attachment", "scroll");
            }
        });   
    </script>
</head>

Answer 2

您需要先在jquery代码之前导入javascript。

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
      alert('Reece your jQUERY is now ready! :)'); // Check if jquery has been loaded.
    });
  </script>
</head>
<body>

</body>
</html>

就是这样......快乐的编码！：）

html头中的jQuery脚本无法正常工作

2 个答案: