jQuery 代码在 Chrome 上不起作用答案

【问题标题】：jQuery Code not working On ChromejQuery 代码在 Chrome 上不起作用
【发布时间】：2014-04-05 05:57:19
【问题描述】：

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 上运行，我做错了什么？

【问题讨论】：

不要使用$download或$about_us...这不是PHP...应该只有var download和var about_us
@kakashihatake2 - 当变量引用作为 jquery 对象的元素时，常见的命名约定是 $variable。例如，$body = $('body'); $body.css('color', 'red')。
only on chrome i got this error: Uncaught TypeError: Illegal constructor 的副本

标签： javascript jquery google-chrome

【解决方案1】：

JavaScript 区分大小写，因此您需要使用document 而不是Document；它们在 Chrome 中是两个不同的东西。

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

【讨论】：

@AmitJoki 在谷歌浏览器中使用$(Document) 会给出错误：`Uncaught TypeError: Object function Document() { [native code] } has no method 'apply' jsfiddle.net/WhLzL
@AmitJoki 不是我的 Chrome 网络控制台。 Document 没有 onreadystatelistener。 document 会。
k.我会收回我的话。

【解决方案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

【讨论】：

【解决方案3】：

首先，$(Document) 应更改为低级$(document)。那么下面有更多的事实。

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

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

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

解决使用$的冲突，让jQuery没有任何歧义

首先，你可以把这段代码sn -p

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

【讨论】：