jQueryを使用しないサイトのChrome JavaScriptコンソールにjQueryを簡単に含める方法はありますか？たとえば、ウェブサイトでテーブルの行数を取得したいとします。これはjQueryを使用すると本当に簡単です。

$('element').length;

このサイトはjQueryを使用していません。コマンドラインから追加できますか？

これをブラウザーのJavaScriptコンソールで実行すると、jQueryが使用可能になります...

var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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（他のライブラリーなど）と競合するスクリプトがある場合でも、問題が発生する可能性があります。

更新：

最善を尽くしてブックマークを作成すると、とても便利になり、それをやりましょう。少しのフィードバックも素晴らしいです。

1. ブックマークバーを右クリックし、[ ページの追加 ] をクリックします
2. Inject jQueryなど、好きな名前を付けて、URLに次の行を使用します。

javascript：（function（e、s）{e.src = s; e.onload = function（）{jQuery.noConflict（）; console.log（ 'jQuery embedded'）}; document.head.appendChild（e）; }）（document.createElement（ 'script'）、 '// code.jquery.com/jquery-latest.min.js'）

以下はフォーマットされたコードです：

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 /バージョンを自由に使用してください。

これをコンソールで実行します

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

新しいスクリプトタグを作成し、jQueryを入力して、headに追加します。

すべてをコピー：https :
//code.jquery.com/jquery-3.4.1.min.js

そして、それをコンソールに貼り付けます。完璧に動作します。

jQueryifyブックレットを使用します。

http://marklets.com/jQuerify.aspx

他の回答にコードをコピーして貼り付ける代わりに、クリック可能なブックマークにします。

@jondavidjohnの回答に加えて、URLをJavaScriptコードとしてブックマークとして設定することもできます。

名前： Jqueryを含める

URL：

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のツールバーに追加して、スクリプトを何度も貼り付ける代わりに、ブックマークレットをクリックするだけです。

私は反逆者です。

解決策：jQueryを使用しないでください。jQueryは、ブラウザー間でDOMの矛盾を抽象化するライブラリーです。自分のコンソールにいるので、この種の抽象化は必要ありません。

あなたの例のために：

$$('element').length

（$$はdocument.querySelectorAllコンソールののエイリアスです。）

他の例については、私は何かを見つけることができると確信しています。特に、最新のブラウザー（Chrome、FF、Safari、Opera）を使用している場合はそうです。

その上、DOMの仕組みを知っていても誰にも害はありませんが、jQueryのレベルが上がるだけです（そうです、javascriptについてもっと学ぶと、jQueryが上手になります）。

エラー処理付きのjQuery 3.2.1ブックマークレットを作成しました（まだ読み込まれていない場合は読み込み、既に読み込まれている場合はバージョンを検出、読み込み中にエラーが発生した場合はエラーメッセージ）。Chrome 27でテスト済み。jQuery2.0は1.9とAPI互換であるため、Chromeブラウザで「古い」jQuery 1.9.1を使用する理由はありません。。

Chromeの開発者コンソールで次のコマンドを実行するか、ブックマークバーにドラッグアンドドロップしてください。

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。
• ブラウザのURLバーから直接試行すると、jquery.comのプロトコルを変更するだけでhttps警告が表示されます。This is probably not the site you are looking for!
• コンソールを使用してGmailなどのGoogleサイトを実験しているときに、GoogleのCDNを使用したい。

私の唯一の問題は、コンソールで常に最新の情報が欲しいバージョン番号を含める必要があることです。

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();

この回答ごと：

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

何らかの理由で、新しい「$」を取得するために2回実行する必要があります（これは他のメソッドでも行う必要があります）が、機能します。

これは、ご使用のブラウザーが最新でない場合に相当します。

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

他の答えが説明するように、これを手動で行うのはかなり簡単です。ただし、jQuerifyプラグインもあります。

FWIW、Firebugはinclude特別なコマンドを埋め込み、jqueryはデフォルトでエイリアスされています：https : //getfirebug.com/wiki/index.php/Include

したがって、あなたの場合、あなたはただタイプする必要があります：

include("jquery");

フローレント

この回答は@genesisの回答に基づいています。最初にブックマークバージョンの@jondavidjohnを試してみましたが、機能しません。これを次のように変更します（ブックマークに追加します）。

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')}());

注意の言葉は、クロムではテストされていませんが、Firefoxで動作し、競合環境ではテストされていません。

最短の方法の1つは、以下のコードをコピーしてコンソールに貼り付けるだけです。

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

あなたはuserscriptのためにこれを行うために探している場合は、私がこれを書いた：http://userscripts.org/scripts/show/123588

jQuery、UI、および必要なプラグインを含めることができます。1.5.1でUIがないサイトで使用しています。このスクリプトは代わりに1.7.1とUIを提供し、ChromeやFFでの競合はありません。私は自分でOperaをテストしていませんが、他の人からも同様に動作することがわかりました。そのため、これを実行する必要がある場合、これは完全なクロスブラウザユーザースクリプトソリューションであるはずです。

ここに代替コードがあります：

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としてこのコードを貼り付けます。

これが機能するかどうかをテストするには、以下を参照してください。

前：

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

後：

$()
[]

コンソールからjQueryを頻繁に使用する場合は、簡単にユーザースクリプトを記述できます。まず、Chromeを使用している場合はTampermonkeyをインストールし、Firefoxを使用している場合はGreasemonkeyをインストールします。次のようなuse関数を使用して簡単なユーザースクリプトを記述します。

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;
    }
}

ターンキーソリューション：

コードをyourCode_here機能させる。そして、HEADタグのないHTMLを防ぎます。

(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("<h1>Hello world !</h1>");
}

最新のブラウザー（Chrome、Firefox、Safariでテスト済み）は、jQueryによく似たドル記号を使用していくつかのヘルパー関数を実装$しています（Webサイトがwindow.$）。

これらのユーティリティは、DOMの要素を選択して変更するのに非常に役立ちます。

ドキュメント：Chrome、Firefox

直感的なワンライナー

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

src住所は変更できます。ReferenceError
を参照しました：変数が見つかりません：jQuery