Question

jQuery代码

$(Document).ready(function() {
    var $download = $('#navbar li:nth-child(1)');
    var $about_us = $('#navbar li:nth-child(2)');

    $download.mouseenter(function() {
        $download.fadeTo('fast', 0.5);
    });

    $about_us.mouseenter(function() {
        $about_us.fadeTo('fast', 0.5);
    });

    $('#navbar li').mouseleave(function() {
        $('#navbar li').fadeTo('fast',1);
    });
});

使用此代码，我试图在您悬停时使列表的某些部分变暗。它适用于Firefox但不适用于Chrome，我做错了什么？

Answer 1

JavaScript区分大小写，因此您需要使用document代替Document;它们是Chrome中的两个独立内容。

Document似乎是Chrome中某些内容的构造函数，但我不确定它的用法。

Answer 2

我可以通过将Document更改为document来重现OP的错误并进行修复：

http://jsfiddle.net/rn5v7/4/适用于Firefox，但不适用于Chrome。

http://jsfiddle.net/rn5v7/5/适用于Firefox和Chrome。

使用DOM就绪处理程序的标准方法是，如jQuery's doc：

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

或简写：

$(function() { ... });

请注意，如在Chrome上看到的，Document是构造函数。它是HTMLDocument的基类，它是对象document的类。

document.__proto__ === HTMLDocument.prototype  // => true
HTMLDocument.prototype.__proto__ === Document.prototype  // => true

Answer 3

首先，应将$(Document)更改为低级$(document)。然后是更多事实。

对于Chrome，不要期望$总是jQuery。

您可以将$放入控制台以检查其是否返回默认值ƒ $(selector, [startNode]) { [Command Line API] }，如果是，则表示未为jQuery定义$。

幸运的是，我们有以下几种尝试方法：

解决使用$的冲突，将其jQuery毫无歧义

首先，您可以输入以下代码段

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.3.1.min.js";  /* Include any online jquery library you need */
document.getElementsByTagName('head')[0].appendChild(jq);

进入控制台，然后将$.noConflict放入控制台，如果它没有返回undefined，而是返回ƒ (t){return e.$===w&&(e.$=Kt),t&&e.jQuery===w&&(e.jQuery=Jt),w}，则表示现在尚未为$定义JQuery。

接下来，您可以继续输入区域代码，然后您会发现它现在运行良好。

引用：https://blog.wplauncher.com/run-jquery-in-chrome-console/

在Chrome中使用.js文件，然后调试JavaScript文件。

引用： Chrome DevTools Snippets

jQuery代码无法在Chrome上运行

3 个答案: