jQueryセレクターとは？基本構文から使い方まで徹底解説

セレクターはjQueryライブラリの基盤となる機能です。jQueryでDOMを操作する際には必ず使用されるもので、条件に一致する要素を返す関数として動作します。セレクターはjQueryライブラリに標準で組み込まれているため、追加の設定なしですぐに使い始められます。

セレクター関数は特徴的な見た目をしており、ドル記号（$）の後に括弧が続く形式です。

$()

括弧の中には、選択したい要素のタグ名、id、またはクラス名を指定します。要素を選択した後は、ドット記法を使ってjQueryのメソッドをチェーン（連結）し、その要素に対してさまざまな操作を行うことができます。

$('p').html("jQueryから出力された新しいコンテンツ")

このコードは、ページ上のすべてのp要素を選択し、その内部のHTMLを指定した文字列に置き換えます。jQueryは、任意の要素に素早くアクセスし、メソッドを使って望む変更を加えるために設計されました。この機能により、動的なWebアプリケーション開発における試行錯誤が大幅に減ります。

jQueryセレクターとは？

jQueryセレクターは、jQueryライブラリに付属する関数であり、jQueryを使用するうえで欠かせない存在です。引数として、要素名・クラス・idを文字列で受け取ります。その後、jQueryメソッドをチェーンすることで、DOM操作を実行できます。

なぜこれが便利なのでしょうか？jQueryは、プレーンなJavaScriptでは冗長になりがちな処理を簡潔に書けるよう設計されています。セレクターを使えば、document.querySelector()やdocument.querySelectorAll()を明示的に呼び出す代わりに、対象の要素を直接参照できます。

つまり、jQueryセレクターはJavaScriptのquerySelector()を$()という短い記述に置き換えたものです。documentオブジェクトへの呼び出しが暗黙的に行われるため、必要なコード量も削減できます。

jQueryセレクターの構文

ここまで、jQueryセレクター関数について抽象的に説明してきました。セレクターは、指定されたDOM要素を直接参照する関数であり、必要な情報は要素名・クラス・idだけです。HTMLの構造に応じて、要素名をクラスやidと組み合わせて指定することも可能です。

セレクターは、ページ上のすべての要素を選択するといった汎用的な指定もできます。

$('*')

ただし、このような使い方は一般的には推奨されません。より実践的なのは、同じ種類の要素グループを選択する方法です。たとえば、すべての段落要素を変更したい場合は、次のように直接選択できます。

$('p')

これで、現在のページ上のすべての<p>タグが選択されました。続いて、jQueryメソッドをチェーンして変更を加えます。

$('p').html('元の段落のHTMLをこのテキストに置き換えます。')

html()メソッドは、選択されたすべての<p>タグのHTMLコンテンツを置き換えます。

では、特定の段落要素だけを選びたい場合はどうすればよいのでしょうか？複数の<p>タグがあり、そのうち1つに「new-content」というidが付いているとします。この場合、次のように直接選択できます。

$('p#new-content')

jQueryセレクターはCSSの記法を利用しています（# = id、. = クラス）。これにより、「new-content」というidを持つ段落要素だけが選択され、変更の準備が整いました。

最後に、クラスが割り当てられた要素を選択してみましょう。アプリ内に複数の<div>要素があり、その一部が「main-content」というクラスを持つ<div>で囲まれているとします。メインコンテンツを選択して動的に変更したい場合は、要素名とクラス名をセレクターに渡します。

$('div.main-content')

これで、選択された<div>内のすべてのコンテンツを操作できる状態になりました。

まとめ

jQueryセレクター関数は、ライブラリ全体を支える中核的な機能です。セレクターの使い方と、そこへjQueryメソッドをチェーンする方法を理解することが、jQueryの真価を引き出す鍵となります。本記事では、jQueryセレクターとは何か、そして要素を選択するための構文について学びました。

ここまで読めば、jQueryセレクターの仕組みと基本的な使い方をしっかり理解できているはずです。あとは実際にセレクターを使い、jQueryメソッドをチェーンしながら練習してみてください。楽しいコーディングを！