在JavaScript控制台中包含jQuery


Include jQuery in the JavaScript Console

对于不使用jquery的站点，在chrome javascript控制台中包含jquery有没有一种简单的方法？例如，在一个网站上，我想获取表中的行数。我知道使用jquery很容易。

1
$('element').length;

站点不使用jquery。我可以从命令行添加它吗？

相关讨论

在浏览器的javascript控制台中运行此命令，然后jquery应该可用…

1
2
3
4
5
var jq = document.createElement('script');
jq.src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

注意：如果站点有与jquery(其他libs等)冲突的脚本，您仍然可能会遇到问题。

更新：

做得更好，创建一个书签非常方便，让我们来做，一点反馈也很好：

  • 右键单击书签栏，然后单击添加页面。
  • 根据需要命名，例如inject jquery，并使用以下行作为url：

    • javascript:(function(e,s){e.src=s;e.onload=function(){jQuery.noConflict();console.log('jQuery injected')};document.head.appendChild(e);})(document.createElement('script'),'//code.jquery.com/jquery-latest.min.js')

    以下是格式化代码：

    1
    2
    3
    4
    5
    6
    7
    8
    javascript: (function(e, s) {
        e.src = s;
        e.onload = function() {
            jQuery.noConflict();
            console.log('jQuery injected');
        };
        document.head.appendChild(e);
    })(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

    这里使用的是官方jquery cdn url，请随意使用您自己的cdn/版本。

    相关讨论

    在控制台中运行这个

    1
    var script = document.createElement('script');script.src ="https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

    它创建一个新的脚本标记，用jquery填充它并附加到头部。

    相关讨论

    复制http://code.jquery.com/jquery-latest.min.js文件内容并粘贴到控制台中。作品完美无瑕。

    相关讨论

    使用jqueryify小册子：

    http://marklets.com/jquerify.aspx

    这将使它成为一个可点击的书签，而不是复制粘贴其他答案中的代码。

    相关讨论

    添加到@jondavidjohn的答案中，我们还可以将其设置为书签，URL作为javascript代码。

    名称：include jquery

    网址：

    1
    javascript:var jq = document.createElement('script');jq.src ="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log('jQuery loaded'); }, 1000);void(0);

    然后将它添加到Chrome或Firefox的工具栏中，这样我们就可以不必一次又一次地粘贴脚本，而只需单击书签。

    Screenshot of bookmark

    相关讨论

    我是叛逆者。

    解决方案：不要使用jquery。jquery是一个跨浏览器抽象DOM不确定性的库。因为您在自己的控制台中，所以不需要这种抽象。

    例如：

    1
    $$('element').length

    ($$是控制台中document.querySelectorAll的别名。)

    对于任何其他的例子：我确信我能找到任何东西。尤其是如果你使用的是现代浏览器(Chrome、FF、Safari、Opera)。

    此外，了解DOM的工作方式不会伤害任何人，它只会提高您的jquery级别(是的，了解更多关于javascript的知识会使您更好地使用jquery)。

    相关讨论

    我刚做了一个jquery 3.2.1书签，有错误处理(只有在还没有加载的情况下才加载，如果已经加载的话才检测版本，如果加载时出错则显示错误消息)。在铬27中测试。没有理由在Chrome浏览器上使用"old"jquery 1.9.1，因为jquery 2.0与1.9兼容。

    只需在Chrome的开发者控制台中运行以下命令或将其拖放到书签栏中即可：

    1
    javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())

    此处提供可读源代码

    相关讨论

    Jondavidjohn给出的最佳答案很好，但我想对其进行调整，以解决以下几点：

    • 各种浏览器在将脚本从http加载到https上的页面时发出警告。
    • 将jquery.com的协议更改为https时，如果直接从浏览器的URL栏中尝试，将导致警告：This is probably not the site you are looking for!。
    • 我喜欢使用谷歌的内容交付网络(cdn)，当我使用这个控制台对谷歌网站(如Gmail)进行试验时。

    我唯一的问题是，我必须包含一个版本号，在控制台中，我总是想要最新的版本号。

    1
    2
    3
    4
    var jq = document.createElement('script');
    jq.src ="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(jq);
    jQuery.noConflict();

    根据此答案：

    1
    fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))

    出于某种原因，我必须执行它两次才能得到新的"$"(我还必须使用其他方法)，但它是有效的。

    如果您的浏览器不是那么现代化，这是等效的：

    1
    fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r){return r.text()}).then(function(r){eval(r)})
    相关讨论

    fwiw，firebug嵌入include特殊命令，jquery默认别名为：https://getfirebug.com/wiki/index.php/include(包含)

    因此，在您的情况下，您只需键入：

    1
    include("jquery");

    弗洛朗

    相关讨论

    正如其他答案所解释的那样，手动执行此操作非常容易。但是还有jquerify插件。

    相关讨论

    这个答案基于@Genesis answer，起初我尝试了书签版本@Jondavidijohn，但它不起作用，所以我将其更改为(添加到书签中)：

    1
    javascript:(function(){var s = document.createElement('script');s.src ="//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')}());

    谨慎的话，不是在Chrome中测试，而是在Firefox中工作，也不是在冲突环境中测试。

    相关讨论

    最短的方法之一就是将下面的代码复制粘贴到控制台。

    1
    2
    3
    var jquery = document.createElement('script');
    jquery.src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
    document.head.appendChild(jquery);

    如果你想为一个用户脚本做这个，我写了这个：http://userscripts.org/scripts/show/123588

    它将允许您包括jquery、UI和任何您想要的插件。我在一个有1.5.1并且没有用户界面的站点上使用它；这个脚本给了我1.7.1，加上用户界面，在chrome或ff中没有冲突。我自己也没有测试过Opera，但其他人告诉我它也适用于他们，所以这应该是一个很好的跨浏览器用户脚本解决方案，如果这是你需要做的。

    如果您想经常从控制台使用jquery，可以很容易地编写一个用户脚本。首先，如果你在Chrome上安装了TamperMonkey，如果你在Firefox上安装了GreaseMonkey。编写一个具有如下使用函数的简单用户脚本：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    var scripts = [];

    function use(libname) {
        var src;
        if (scripts.indexOf(libname) == -1) {
            switch (libname.toLowerCase()) {
                case"jquery":
                    src ="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
                    break;
                case"angularjs":
                    src ="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
                    break;
            }
        } else {
            console.log("Library already in use.");
            return;
        }
        if (src) {
            scripts.append(libname);
            var script = document.createElement("script");
            script.src = src;
            document.body.appendChild(scr);
        } else {
            console.log("Invalid Library.");
            return;
        }
    }

    从chrome v.70开始，jquery通过源代码加载，并在页面打开时就绪。只需直接在开发人员控制台中键入，脚本就会被解析。

    相关讨论

    以下是备选代码：

    1
    javascript:(function() {var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);})();

    它可以直接粘贴到控制台或创建一个新的书签页面(在Chrome中，右键单击书签栏，添加页面…)并将此代码粘贴为URL。

    要测试是否有效，请参见下面的。

    之前：

    1
    2
    $()
    Uncaught TypeError: $ is not a function(…)

    后：

    1
    2
    $()
    []

    直观的一行程序

    1
    document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))

    您可以更改src地址。我引用了referenceerror:找不到变量：jquery

    交钥匙解决方案：

    将代码放入yourCode_here函数中。防止没有头标记的HTML。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    (function(head) {
      var jq = document.createElement('script');
      jq.src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
      ((head && head[0]) || document.firstChild).appendChild(jq);
    })(document.getElementsByTagName('head'));

    function jQueryReady() {
      if (window.jQuery) {
        jQuery.noConflict();
        yourCode_here(jQuery);
      } else {
        setTimeout(jQueryReady, 100);
      }
    }

    jQueryReady();

    function yourCode_here($) {
      console.log("OK");
      $("body").html("Hello world !");
    }