javascript - 如何让 javascript/jquery 工作？-6ren

javascript - 如何让 javascript/jquery 工作？

转载作者：行者123 更新时间：2023-12-02 16:44:07

编辑:谢谢大家的建议。感谢您的帮助，我已经解决了问题!

我正在 codeschool/codeacademy 上做 javascript/jquery 教程，那里的一切似乎都很顺利。但是当我尝试自己做某事时，我无法让 JavaScript 真正触发。我尝试了 Chrome 和 Firefox。我禁用了所有插件扩展。一定是一个简单的问题，请帮忙!

以下代码是我从 jquery 剪切并粘贴的 ( http://learn.jquery.com/about-jquery/how-jquery-works/ )

这里是 jsfiddle 的链接:http://jsfiddle.net/interestinall/n5mqryrj/

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>

    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "The link will no longer take you to jquery.com" );
            event.preventDefault();
        });
    });

    </script>
</body>
</html>

这对我不起作用。有人可以解释为什么并告诉我如何让它工作吗？非常感谢!

最佳答案

你的代码没有任何问题。我们都是从某个地方开始的，其中一些建议具有误导性

如果您还不知道，jQuery 是一个综合库，它使复杂的 javascript 开发变得更加简单。值得注意的是，您使用 jQuery 所做的一切都可以使用 native javascript 来实现，这只是一个小技巧，jquery 可以处理在各种浏览器上工作的所有复杂性。也就是说，某些功能在某些浏览器中有效，而其他浏览器则以不同的方式(尤其是 IE)执行操作。

要在您的网站上使用 jQuery，您需要将其包含在您的页面上。它是自动执行的，您可以通过以下方式判断其是否有效:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
    <script>
        console.log($)
    </script>
</body>
</html>

如果您在 chrome 中打开控制台(按 f12)，您应该会看到:

function (a,b){return new m.fn.init(a,b)}

请注意，我使用 src="https://code.jquery.com/jquery-1.11.1.min.js" 作为脚本源。您可以根据脚本使用 src="jquery.js"，但这意味着您需要保存 https://code.jquery.com/jquery-1.11.1.min.js 的内容到一个名为 jquery.js 的文件，该文件与您的index.html(或无论您在何处保存的代码.html)处于同一级别

我注意到一些建议说你应该在标签中包含 jQuery，尽管这可行，但将脚本保留在页面底部被认为是最佳实践，原因我不会在这里详细讨论。

因此，这应该适合您(无论浏览器扩展如何):

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
    <script>

    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "The link will no longer take you to jquery.com" );
            event.preventDefault();
        });
    });

    </script>
</body>
</html>