基本的jQuery命令不起作用

Basic jQuery commands not working

本文关键字：命令 不起作用 jQuery      更新时间：2023-09-26

谁能告诉我为什么我尝试的javascript/jQuery命令在我的计算机上不起作用，但总是在互联网上工作？ 下面是一个基本命令的示例：

Javascript 文件 (test.js(， css file (test.css( (donmind the css( 和 html file (test.html(： 

var $list = $('li');
$list.click(function() {
  alert("working");
  });
li {
  list-style-type: none;
  position: relative;
  margin: 1px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: grey;
}
li.done {
  background: #CCFF99;
}
li.done::before {
    content: '';
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    
    <ul>
  <li>Acheter du lait</li>
  <li>Promener le chien</li>
  <li>Faire de l'exercice</li>
  <li>Coder</li>
  <li>Jouer de la musique</li>
  <li>Relax</li>
</ul>
  </body>
</html>

看？ 它适用于堆栈溢出。 然而，当我从我的计算机运行html文件时，js/jq脚本永远不会工作。 我知道我没有不正确地链接js文件，因为Safari开发人员工具能够从html文件访问它。 这是怎么回事？

如果$list.click部分处于测试.js中，则在构造li元素之前执行此代码。将代码包装在$(document).ready(function(){...})

注意：

它在这里工作，因为在代码片段框架中，源代码stackoverflow将javascript片段附加到html下面 - 以便在DOM完全构建时执行代码。

尝试用 $(document(.ready(( 编写代码，以便 DOM 可以使用，否则它可能无法正常工作。您必须添加：

$(function(){
    //Your Js code
});

在您的示例中，请使用：

$(function(){
var $list = $('li');
$list.click(function() {
  alert("working");
  });
});

同样的问题：脚本标签在正文内部有效，但在正文外部不起作用

好的，我找到了。 我只需要将代码包装在

$(function(){
});

或

$(document).ready(function(){
//code
});

感谢伊戈尔和琼·

您遇到的问题可能与您在浏览器中打开网页的方式有关。

您不能只将它们作为文件打开：c:'website'index.html

相反，你应该安装一个堆栈，如WAMP，XAMPP或EasyPHP。我推荐XAMPP

安装后，您只需输入浏览器地址栏：

localhost

您将从c:'xampp'htdocs文件夹中看到index.html的渲染内容。 该文件夹(c：''xampp''htdocs(成为您的网站，其工作方式与网站完全相同。资源将正确加载(这听起来像是您遇到的问题(。

安装后，只需清除该文件夹，然后将所有网站.html和.php等文件复制到该文件夹中。使用与网站上相同的文件夹结构。CPANEL 网站的public_html文件夹是 C： 驱动器上的c:'xampp'htdocs文件夹。

如果您在其中创建一个文件夹，例如dev，并在其中放置一个名为mytest.html的文件，则可以在浏览器地址栏中键入：

localhost/dev/mytest.html

另一个很棒的技巧是通过编辑 Windows hosts 文件给自己一个域。例如，您可以通过编辑此文件在本地使用 duchesne.com 域：

c:'windows'system32'drivers'etc'hosts

请注意，该文件没有扩展名。

然后，在该文件中，在最底部的某一行上键入：

127.0.0.1     duchesne.com

保存该文件后，当您在浏览器地址栏中键入时：

http://duchesne.com

您将从c:'xampp'htdocs文件夹中获取索引.html文件。如果您键入：

http://duchesne.com/dev

您将从 c:'xampp'htdocs'dev 文件夹中获取 index.html 文件。

不要忘记该文件非常重要！它将永远阻止您访问在线http://duchesne.com网站。当然，禁用它就像注释掉该行一样简单(通过在前面放一个#(或弄乱重定向，这是我通常做的：

127.0.0.1     xduchesne.com

(删除前导 x 比重新键入整行更容易(。最酷的事情：更改立即发生，无需重新启动 - 甚至没有弹跳浏览器。

资源：

Windows： XAMPP vs WampServer vs EasyPHP vs 替代方案

你可能必须包含你的网站的JQuery库，才能知道它将使用JQuery。以下是包含它的一种方法：在 html 的 head 标签中，粘贴以下脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

如果您通过"拖放"将 html 文件放入浏览器窗口，并且您看到file://作为协议，则 jQuery 无法从 URL 下载。这很可能是你的问题。

编辑：

我看到您的 JS 代码在 test .js 文件中加载在 head 部分中。因此，如果这仍然不起作用，请尝试将 test.js 文件中的代码替换为以下内容：

$(document).on('click', 'li', function (){
    alert('working');
});

在这样的时代，CDN 回退至关重要。例：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write('<script src="//code.jquery.com/jquery-1.10.2.min.js"><'/script>');
    }
</script>
<script>
    if (!window.jQuery) {
        document.write('<script src="/Scripts/jquery-1.10.2.min.js"><'/script>');
    }
</script>

如果Google CDN失败，它会加载jQuery CDN。如果 THAT 也失败，则加载本地副本。

试试这是否有帮助

使用安全的jquery编码怎么样？

jQuery(document).ready(function ($) {
    $('li').click(function() {
        alert("working");
    });
});

或

jQuery(document).ready(function () {
    jQuery('li').click(function() {
        alert("working");
    });
});
相关文章：