JavaScript / jQuery DOM セレクタ

jQuery vs JavaScript

jQuery は John Resig が 2006 年に作成しました。ブラウザの互換性を処理し、HTML DOM 操作、イベント処理、アニメーション、Ajax を簡素化することを目指しています。

10年以上、jQuery は世界で最も人気のある JavaScript ライブラリの一つです。

しかし、JavaScript Version 5（2009）以降では、ほとんどの jQuery 実用プログラムは標準の JavaScript で解決できます：

HTML 要素を id で検索する

id="intro" の要素を返します：

jQuery

var myElement = $("#id01");

自分で試してみる

JavaScript

var myElement = document.getElementById("id01");

自分で試してみる

HTML 要素をタグ名で検索する

すべての <p> 要素を返します：

jQuery

var myElements = $("p");

自分で試してみる

インスタンス

var myElements = document.getElementsByTagName("p");

自分で試してみる

クラス名を使用してHTML要素を検索します

class="intro"を持つすべての要素を返します。

jQuery

var myElements = $(".intro");

自分で試してみる

JavaScript

var myElements = document.getElementsByClassName("intro");

自分で試してみる

Internet Explorer 8および以前のバージョンではクラス名で要素の検索が機能しません。

CSS選択子を使用してHTML要素を検索します

class="intro"を持つすべての<p>要素のリストを返します。

jQuery

var myElements = $("p.intro");

自分で試してみる

JavaScript

var myElements = document.querySelectorAll("p.intro");

自分で試してみる

querySelectorAll() Internet Explorer 8および以前のバージョンではメソッドが機能しません。