谷歌Chrome开发者工具在控制台中与Jquery一起出现问题

Question

当我尝试在Google Chrome的开发者工具

中执行以下JQuery代码时

$("#u_16_0").val("AJ College, Sivakasi")

我得到以下错误：

  

未捕获错误：＆lt; [EX [[＆＃34;尝试获取ID为\＆＃34;％s \＆＃34的元素;但它   页面上没有。＆＃34;，＆＃34;＃u_16_0＆＃34;]]]＆gt;（...）h @ LGuPoDEwQGD.js：36i @   LGuPoDEwQGD.js：36（匿名函数）@ VM580：1

有人可以帮我解决这个问题吗？我已经确认该元素存在于页面中。我的意思是如果我只是在控制台中键入$("#u_16_0")，则会打印该元素。

请参阅以下链接，其中包含我的Google Chrome版本信息的屏幕截图。

[

更新 - 1

我设法使用以下简单的JavaScript代码

完成此操作

document.getElementById("u_16_0").value="University of Cambridge"

更新 - 2

  

Amin基于jQuery的答案也奏效了。因此，接受它作为答案并获得赏金。

Answer 1

注意：不要指望 $ 总是JQuery。

  

Chrome控制台似乎无法访问内容脚本的执行上下文。

错了，确实如此。你需要看看正确的地方：

除了动画中的<page context>以下，您还必须选择chrome-extension://<your extension id>

您可以点击Chrome版本中的“顶部”。

之前的截屏视频显示，Chrome开发者工具的控制台标签底部有两个下拉框，可用于更改开发人员工具控制台的执行环境。 左侧可用于更改帧上下文（顶部框架，因此iframe，...），右侧可用于更改脚本上下文（页面，内容脚本，...）。

参考：Why will jQuery not load in Facebook?

Answer 2

问题在于你假设$总是jQuery而不是jQuery。查看它是console.log($)并查看它返回的简单方法。

jQuery通常返回

function (selector,context){return new jQuery.fn.init(selector,context)}

或

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

现在任何人都可以将$定义为任何东西。在Facebook上，它似乎是document.getElementById()的别名，并且在其中有一些检查

function i(j){return h(j);}

运行$("contentCol")将返回一个DOM元素。

如果未定义$，则在Chrome开发工具中，它是document.querySelector的别名

$(selector, [startNode]) { [Command Line API] }

所以最后，不要指望$是jQuery。

Answer 3

通过查看此answer，您可能会看到：

$("#u_16_0")

实际上并没有调用jQuery。

尝试更改页面上下文

Answer 4

这是因为jQuery $标志与其他库（如某些facebook js库）冲突。 您应该使用jQuery代替$：

jQuery("#u_16_0").val("AJ College, Sivakasi");