jQueryを使っていないサイトをjQueryセレクタで調査の画像
芽萌丸プログラミング部 @programming
投稿日 2019/06/06
更新日 2019/06/14 ✏

jQuery

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")

  // キタ━(゚∀゚)━!
  [099]
  [100199]
  [200299]
  [300399]
  ...

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


芽萌丸プログラミング部
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。