jQueryを使っていないサイトをjQueryセレクタで調査

何を言ってるのかわからねーと思うが（AA略）

Webページでセレクタを使って要素を調査する際、$("div")といった感じのコードをブラウザのコンソール上で叩いてデバッグ出力したりすると思います。このやり方は通常、jQuery をロードしているサイトでしか使えません。 jQuery を使っていないサイトの場合は諦めて pure js のdocument.querySelectorAll("div")とかすれば良いのですが、諸般の事情によりどうしても jQuery を使って調査したいという方もいるのではないでしょうか。（私もその一人でした）

実は、 jQuery を使っていないサイトでも jQuery を使ったセレクタの調査は可能です。

方法

以下のコードをブラウザコンソール上で打ち込むことで jQuery が利用できるようになります:

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

テスト

では Amazon.co.jp のページで試してみましょう。Amazon.co.jp は、現時点（2019/06/06）では jQuery を使っていません。

> $("div")

  // jQueryを使っていない...
  <div id="a-page">...</div>

ではさきほど紹介したハックを試してみましょう:

// jQueryを無理やりロード:
> var jq = document.createElement('script');
> jq.src = "https://code.jquery.com/jquery-3.4.1.min.js";
> document.getElementsByTagName('head')[0].appendChild(jq);

// 読み込めた？
> $("div")

  // ｷﾀ━(ﾟ∀ﾟ)━!
  [0 … 99]
  [100 … 199]
  [200 … 299]
  [300 … 399]
  ...

以上、超ニッチなTIPでした。