jQuery选择器隐藏功能答案

【问题标题】：jQuery selector hide functionjQuery选择器隐藏功能
【发布时间】：2018-07-20 05:22:52
【问题描述】：

这是我的 HTML 文件的内容：

<!DOCTYPE html>
            <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
    <head>

        <meta http-equiv="author" content="Chris" />
        <link href="jquery.css" type="text/css" rel="stylesheet" />
</script>
    <script src="js/jquery-3.3.1.min.js">
</script>
<script>
    $(document).ready(function() {
        $('#message').hide();
    });
</script>
    </head>
    <body>
        <p id="message">Hello World!</p>
    </body>
</html>

我有一个名为 jquery.js 的文件，它是 jQuery 3.3.1 的缩小版本，它保存在我的 HTML 文件和 CSS 文件所在的文件夹 js 中。在本文档中，我尝试使用 hide() 函数隐藏 ID 为 message 的段落，但是当我在 Google Chrome 浏览器中打开该文件时，该段落仍然存在。

注意：很明显，我是 JavaScript 和 jQuery 库实现的新手。

【问题讨论】：

也在此处发布控制台消息
你能分享一下 html、css 和 js 的确切文件结构吗
我做错了什么？
看起来您的 jquery 文件路径错误。如果您的 html 和 jquery 文件都在同一个文件夹中，您可以尝试使用<script src="jquery-3.3.1.min.js">吗
更新代码：

标签： javascript jquery html function selector

【解决方案1】：

好的。所以我弄清楚发生了什么。我正在从一本书中学习 JavaScript，当您将其链接到 JavaScript 文件时，这本书说在 HTML 文件中包含版本号和“min”扩展名，即使它不是正确的文件名。由于我的 jQuery 库是 jquery.js，我只是删除了版本号和“min”扩展名。一旦我这样做了，根据 hide() 函数，该段落就消失了。谢谢大家的回复。这只是书和我的大脑之间的沟通失败。

<!DOCTYPE html>
    <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
    <head>
        <meta http-equiv="author" content="Chris" />
        <link href="jquery.css" type="text/css" rel="stylesheet" />
  <script src="jquery.js"></script>
  <script>
  $(document).ready(function() {
    $('#message').hide();
    console.log($.fn.jquery);
  });
  </script>
</head>
<body>
  <p id="message">Hello World!</p>
</body>
</html>

【讨论】：

文件名与它无关...但是由于您在两个地方都更改了它（在代码和文件本身中）...也许问题在于加载它。
控制台是你最好的朋友。它有一个选项卡，您可以在其中检查每个文件加载是否成功。还有很多东西。
控制台实际上为我指出了这一点。最初，我的文件名和文件扩展名是“js/jquery-3.3.1.min.js”，即使实际的文件名和扩展名是“jquery.js”当我运行控制台时，它告诉我文件“js /jquery-3.3.1.min.js”不存在。我以为你必须把库的版本和“min”部分按照一些标准。一旦我将 SRC 属性中的值更改为文件的名称，代码就起作用了。
文件名只是一个字符串。将其命名为stupid-thing.js，它将起作用。这是一个文本文件，里面没有任何专有的编辑器代码......只是纯文本。与 MS Word 文件相反。（示例）。
再次感谢您的帮助，@LouysPatriceBessette

【解决方案2】：

几个盲目的错误...假设您的 jQuery 库已加载。

<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<html> <!-- MISSING -->
<head>
  <meta http-equiv="author" content="Chris" />
  <link href="jquery.css" type="text/css" rel="stylesheet" />
  <!--/script--> <!-- WHAT? Commented out -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
  $(document).ready(function() {
    $('#message').hide();
  });
  </script>
</head>
<body>
  <p id="message">Hello World!</p>
</body>
</html>

一个缺失的标签和一个额外的标签。
告诉我它是否解决了奇怪的问题。

【讨论】：

好吧...其他人正在关注您加载的 jQuery 库。在控制台中进行测试：console.log($.fn.jquery);... 它应该输出版本号。
注意额外的标签。我删除了那个。我把标签放在第二行。我在 Chrome 和 Firefox 中重新加载了该页面，但仍然可以看到该段落。
我从 jQuery 网站下载了最新的 jQuery 库，将内容放在记事本文件中，并以 .js 扩展名保存。我不确定“在控制台中测试”是什么意思。就像我说的，我是 JavaScript 的新手。
好的...Console...这里是 Xyce...Xyce，这里是 Console。 -- 一定要探索 ;) A tutorial quickly found.
也阅读code indentation。它有助于人类快速阅读标记。

【解决方案3】：

<!DOCTYPE html>
<html>
            <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
    <head>
        <meta http-equiv="author" content="Chris" />
        <link href="jquery.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#message').hide();
        });
    </script>
    </head>
    <body>
        <p id="message">Hello World!</p>
    </body>
</html>

如上所述修改您的 HTML。我删除了多余的</script> 并添加了缺失的<html>。

【讨论】：

【解决方案4】：

问题是你有一个额外的`</script>` 标签。只需将其删除。

 <html>
    <head>
       <meta http-equiv="author" content="Chris" />
       <link href="jquery.css" type="text/css" rel="stylesheet" />

       <script src="js/jquery-3.3.1.min.js"></script>
       <script>
           $(document).ready(function() {
               $('#message').hide();
           });
       </script>
   </head>
   <body>
      <p id="message">Hello World!</p>
   </body>
 </html>

【讨论】：

问题是你有一个额外的&lt;/script&gt; 标签。只需将其删除。

问题是你有一个额外的`</script>` 标签。只需将其删除。