如果作为.js文件包含，我的jquery代码将无法工作？

我写了html/css代码，然后添加了另一个文件来包含jquery库和我自己的js代码（在文件scripts.js中）。如果作为.js文件包含，我的jquery代码将无法工作？

如果我将它保存在单独的scripts.js文件中，但我的代码不起作用，但如果将它应用于index.html中的<scripts></script>元素中，它将起作用。

这是为什么，我该如何解决这个问题？

我的HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Hartmeting</title> 
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> 
    <script src="js/jquery-3.1.1.js" type='text/javascript'></script> 
    <script src="js/scripts.js" type='text/javascript'></script> 
</head> 
<body> 
    <div id="wrapper"> 
     <header id="titel"> 
      <h1>Welcome</h1> 
     </header> 
     <!-- Menu --> 
     <nav id="menu"> 
      <ul> 
       <li><a href="#intro"> Introductie </a></li> 
      </ul> 
     </nav> 
     <!-- Manual --> 
     <div id="content"> 
      <!-- Intro Slide --> 
      <article id="intro"> 
       <h2>Introductie</h2> 
       <figure> 
        <img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/> 
       </figure> 
       <p>Zonder moeite je hart meten? Dat kan...</p> 
      </article> 

      <!-- Slide 1 --> 
      <article id="probleem"> 
       <h2>Het Probleem</h2> 
       <figure> 
       <img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/> 
       </figure> 
       <p>Het probleem uitleggen</p> 
      </article> 
     </div> 
     <footer> 
      <a href="#wrapper"> To the top! </a> 
     </footer> 
    </div> 
</body> 
</html>

Browser Console Log:

SyntaxError: Unexpected token ')'. Expected an opening '(' before a function's parameter list.

但它确实工作，如果我不喜欢这样写道：

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Hartmeting</title> 
     <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> 
     <script src="js/jquery-3.1.1.js" type='text/javascript'></script> 
     <script type='text/javascript'> 
      $(document).ready(function() { 
       $('content').hide(); 
      }); 
     </script> 
    </head>  
    <body> 
     <div id="wrapper"> 
      <header id="titel"> 
       <h1>Welcome</h1> 
      </header> 

      <!-- Menu --> 
      <nav id="menu"> 
       <ul> 
        <li><a href="#intro"> Introductie </a></li> 
       </ul> 
      </nav> 

      <!-- Manual --> 
      <div id="content"> 
       <!-- Intro Slide --> 
       <article id="intro"> 
        <h2>Introductie</h2> 
        <figure> 
         <img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/> 
        </figure> 
        <p>Zonder moeite je hart meten? Dat kan...</p> 
       </article> 

       <!-- Slide 1 --> 
       <article id="probleem"> 
        <h2>Het Probleem</h2> 
        <figure> 
         <img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/> 
        </figure> 
        <p>Het probleem uitleggen</p> 
       </article> 
      </div> 
      <footer> 
       <a href="#wrapper"> To the top! </a> 
      </footer> 
     </div> 
    </body> 
    </html>

来源

2016-11-20 user7186746

是你的JavaScript文件在您/ CSS的目录？ –

'$（document）.ready（function）{'看起来像一个语法错误。如果你的代码是如何编写的，那么这两者都不应该工作 –

@PatrickEvans是的，控制台说语法错误。（补充说我的故事）谢谢 – user7186746

你的语法似乎是正确的（好吧，是的，你已经修复，虽然）。然而你的jQuery选择器是错误的。为了通过它的id来隐藏html元素，你需要前缀#。话虽这么说，你.hide()应该是这样的：

$('#content').hide();

而且也，这里是整个片段：

$(document).ready(function() { 
    $('#content').hide(); 
});

Demo

来源

2016-11-20 21:57:52 Aer0

这是有效的，但奇怪的是，如果我添加：var article = $（'＃intro'）。first（）; $（article.first）.show（）;它不会工作。为什么是这样？ – user7186746

你可以尝试用'article.show（）;'代替。 – Aer0

它适合我。也许你的var声明是错误的：https：//jsfiddle.net/ff9ua9tg/1/ – Aer0

-1

正确的语法是：

$(document).ready(function(){ 
    $("#content").hide(); 
});

来源

2016-11-20 21:49:28 Reto

这有相同的语法错误 – charlietfl

你遗漏函数后的括号

$(document).ready(function(){ 
    $("#content").hide(); 
});

来源

2016-11-20 21:52:53

它的工作原理，谢谢。 – user7186746

如果作为.js文件包含，我的jquery代码将无法工作？

回答

相关问题