2017-04-20 30 views
0

我的jQuery在外部文档中工作正常,但当我将其放入文档头部时,jQuery无法正常工作。下面的代码:html头部中的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> 
+1

我看不到引用jQuery – kosmos

+0

javascript 101其中是jQuery脚本?在你的代码之前? – madalinivascu

回答

4

您还没有包括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> 
+0

谢谢我在jQuery库的身体底部工作正常 – Reece

0

你需要你的javascript代码之前导入jquery第一。

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

这it..Happy编码! :)