开始运行 jQuery - $ 未定义错误答案

【问题标题】：Getting to run jQuery - $ is not defined Error开始运行 jQuery - $ 未定义错误
【发布时间】：2020-08-13 19:43:02
【问题描述】：

您好，我是 Javascript 新手，我正在尝试运行 jQuery 库，但 Chrome 会将此错误通知给我。我确实在 Stack Overflow 和 Google 上搜索了一些关于此的帖子，但即便如此，至少对我来说我还是找不到满意的答案（我检查过是否将 jQuery 脚本放在首位）。这是我的 HTML 源代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Responsive Design</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/slick.css">
        <link rel="stylesheet" href="css/slick-theme.css">
        <!--<script type="text/javascript"  src="js/jquery-3.4.1.min.js"></script>-->
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/slick.min.js"></script>


    </head>
    <body>
        <header>
            <div class="container">
                <div class="row">
                    <a href="" class="logo">

                        <img src="" alt="">
                    </a>
                    <nav>
                        <ul>
                            <li><a href="">Home</a></li>
                            <li><a href="">Work</a></li>
                            <li><a href="">Services</a></li>
                            <li><a href="">Clients</a></li>
                            <li><a href="">Our Team</a></li>
                            <li><a href="">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header> 
           <section class="slider">
               <ul class="slider-carousel" id="#slider-carousel">
                   <li class="img1">
                       <h2>BEAUTIFIED BUSINESS <span>TEMPLATE</span></h2>
                       <p>We believe in creativity always</p>
                       <i class="fab fa-apple"></i>
                       <i class="fab fa-android"></i>
                       <i class="fab fa-windows"></i>
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio modi ducimus aut nihil explicabo, quia voluptatibus. Sint consequatur culpa vel sapiente, et dicta ratione facere distinctio, maiores modi eligendi. Perspiciatis.</p>
                       <a href="" class="btn btn-half">Get Started</a>
                       <a href="" class="btn btn-full">Buy Now</a>
                   </li>
                   <li>
                       <h2>Slider</h2>
                   </li>
                   <li>
                       <h2>Slider</h2>
                   </li>
               </ul>
           </section>   
           <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

这是我的目录结构：

**Project
 |
 +-- index.html
 |    
 +-- js
 |  |  
 |  -- bootstrap.min.js
 |  -- jquery-3.4.1.min.js
 |  -- main.js
 |  -- slick.min.js
 |    
 +-- css
 |  |  
 |  -- all.css
 |  -- bootstrap.min.css
 |  -- slick.css
 |  -- slick-theme.css
 |  -- style.css
 |    
 +-- images
 |  |  
    -- slider1.jpg

这是我运行的单行代码：

$(Document).ready(function(){})

括号中的错误：

ESLint (2)

错误： '$' 未定义。 [no-undef] $(Document).ready(function(){})

错误：未定义“文档”。 [no-undef] $(Document).ready(function(){}) JSLint (7)

'$' 在定义之前使用。 $(Document).ready(function(){})

“文档”在定义之前使用。 $(Document).ready(function(){})

在 'function' 和 '('. $(Document).ready(function(){}) 之间需要一个空格

预计在 ')' 和 '{' 之间正好有一个空格。 $(Document).ready(function(){})

')' 和 '{' 之间缺少空格。 $(Document).ready(function(){})

缺少“使用严格”声明。 $(Document).ready(function(){})

预期的';'而是看到了“（结束）”。 $(Document).ready(function(){})

（我尝试加载本地 jQuery 脚本和另一个，但它们似乎都不起作用） {感谢您的关注}

【问题讨论】：

这似乎是一个 linter 错误，而不是包含脚本的实际问题。确保你的 linter 知道你使用 jQuery，所以它知道 $ 是全局的。
也应该是document 而不是Document。 JS 变量名区分大小写。
@ADyson 你说得对，我也打过文件，还是一样的问题
您在哪里看到这些错误？正如 vlaz 所说，它们看起来大多像 linter 错误。您是否尝试过在浏览器中实际运行脚本？
stackoverflow.com/questions/39510736/… 1. 配置 linter 2. 考虑遵循 linter 中的规则。这将消除错误。如果您不想对代码进行 lint，则只需完全删除 ESLint。

标签： javascript html eslint adobe-brackets

【解决方案1】：

您必须有一个 .eslintrc.json 文件。

确保其中包含以下代码行：

   "env": {
     "browser": true,
     "commonjs": true,
     "es6": true,
     "jquery": true
   },
   "plugins": [
      "dollar-sign",
      "jquery"
   ],
   "rules": { 
      "dollar-sign/dollar-sign": [
          2,
          "ignoreProperties"
       ]
   }

您可以在这里阅读更多内容：https://eslint.org/docs/user-guide/configuring#configuration-file-formats

【讨论】：

以防万一，我用jQuery而不是'$'符号，问题还是一样，我会检查一下，谢谢。
完成了，还是同样的问题
@ArturoBolívarLabautdelRío 试试这个（基于此）eslint.org/docs/user-guide/configuring#specifying-environments 在 main.js 文件的开头添加 /*eslint-env jquery*/ 可能还有 /* global $ */ 你也可以添加在你的 eslintrc.json 文件中 { "globals": { "$": true } }