jQueryにおける指定した要素の取得方法6つ｜セレクタの指定方法3つ

プログラマー

ページ内の要素ってどうやって取得するのですか？

プロジェクト
マネージャー

条件付けなどで、該当する要素を取得できますが、いろいろな指定の方法があるので見ていきましょう。

jQueryにおける要素とは

jQueryにおいて、要素とはWebページを構成している1つ1つの要素そのものであり、HTML言語で記述されているidやタグ、クラス名なども含まれます。
jQueryはこれら要素に対して、指定した条件などをもとに絞り込み、要素それぞれに対してアクションを起こすことが可能です。

jQueryにおける指定した要素の取得方法6つ

jQueryでは、要素を指定するときにセレクタを用います。このセレクタでの指定方法では、様々な条件を指定することが可能です。しかし、複数の要素が絡んでくる場合には処理に時間がかかってしまうので、その点を留意しておきましょう。

指定した要素の取得方法1：IDセレクタを指定する場合

IDセレクタとは、任意のid属性をもつ要素を選択するセレクタです。IDセレクタを指定する場合は、$(“”#id名””)と記述しid名の前にシャープを入力する必要があります。

id名は1つのHTML内では重複しないため、対象のHTML要素を容易に操作できます。そして、IDセレクタは要素の取得が速く、要素が1つしかない場合はクラスセレクタより使いやすい点が特徴です。

指定したidなどにピリオドやコロンを含む場合

要素を指定する上で気を付けなければいけないことは、指定するidなどにピリオドやコロンなどの特殊文字を含んでいる場合です。これらの特殊文字を含む場合には、「\\」または「[]」を使用し、以下のように特殊な表記をします。

指定した要素の取得方法2：属性セレクタを指定する場合

属性セレクタとは、HTMLの属性の存在確認および属性値を指定するセレクタであり、$(“”[属性名]””)で記述されます。jQueryで属性セレクタを指定する場合、attr()メソッドを使用しても要素を取得することができます。attr()メソッドの基本書式は、$(“”セレクタ””).attr(“”属性名””)です。

属性セレクタでは、部分一致や末尾一致など属性値と指定属性値の関係性から要素を見つけることもできます。

指定した要素の取得方法3：要素セレクタを指定する場合

要素セレクタは、特定のHTML要素を直接指定するセレクタであり、タグセレクタやタイプセレクタとも呼ばれます。要素セレクタの書式は、$(“”要素名””)です。 例えば、$(“”x””).css(“”color””,””blue””)と記述すれば、xタグすべての文字を青色に変化させることができます。

要素セレクタは指定した要素すべてに反映されるため、初期設定やCSSのリセット、子孫セレクタにおける対象の限定などに役立ちます。

指定した要素の取得方法4：クラスセレクタを指定する場合

クラスセレクタは、指定したクラス名の要素を選択するセレクタです。クラスセレクタの指定方法は$(“”.クラス名””)であり、複数タグの一斉処理や同じイベントの付与に便利です。

クラス属性はドキュメント内に複数存在している場合がほとんどであり、クラスセレクタの取得によってページに負荷がかかります。要素が1つしかないときは、クラスセレクタよりIDセレクタを指定することがおすすめです。

指定した要素の取得方法5：子孫セレクタを指定する場合

子孫セレクタは、特定の要素の内側にある子孫要素を選択するセレクタであり、文章を装飾するCSSセレクタとして使用されます。

子孫セレクタを指定する場合は、$(“”elementA elementA1″”)のように大元となる先祖セレクタと指定したい子孫セレクタを配列し半角スペースで区切ります。

子孫セレクタではクラス名を指定することも可能で、深い階層まで装飾の範囲を広げてくれます。

指定した要素の取得方法6：グループセレクタを指定する場合

グループセレクタは、複数のidやクラスを指定するセレクタであり、まとめて記述したセレクタに同じメゾットを適用させることができます。

グループセレクタを指定する場合、$(“”要素1,要素2,要素3″”)のようにダブルクォーテーションマークでくくった各セレクタをコンマで区切ります。

グループセレクタの指定方法は、後述のor条件におけるセレクタの指定方法と要領が同じです。

正規表現でセレクタを使うには？

jQueryのセレクタ指定は正規表現に対応していませんが、eachやfilterなどのメソッドと組み合わせることで正規表現を使用できるようになります。また、javascriptをjQueryに置き換える際、javascript内のreplaceを使用すると正規表現のパターンを作成できます。

正規表現による前方一致、後方一致、部分一致、不一致が使うことができれば、よりidやクラスの条件指定がしやすくなります。

セレクタの指定方法3つ

jQueryでは、複数の要素の条件を含めたり除外したりしてセレクタを指定することが可能ですセレクタの指定条件には、複数の条件から少なくとも1つを満たす要素を洗い出すor、条件すべてを満たす要素を示すand、指定した条件を対象外にするnotの3種類があります。

jQueryにおけるor・and・notの記述方法は、一般的に使用されるプログラミング言語とは異なります。それぞれの記述方法や使い方を確認しましょう。

セレクタの指定方法1：「or」を用いる場合

or条件は、指定した条件から少なくとも1つを満たす要素に絞り込むことができます。セレクタをor条件で指定する場合は、$(“”要素1″”,””要素2″”)のように条件を並べて「,」で区切ります。

「divタグとspanタグのいずれかを対象にする」場合は$(“div,span”)、「testクラスとsampleクラスのいずれかを対象にする」場合は$(“.test,.sample”)となります。

セレクタの指定方法2：「and」を用いる場合

and条件は、指定した条件すべてを含む要素のみを対象とする方法です。セレクタをand条件で指定する場合、$(“”要素1″”＋””要素2″”)もしくは$(“”要素1″”””要素2″”)と記述します。

「testクラスが指定されているdivタグを対象にする」場合は$(“div.test”)、「testクラスとsampleクラスの両方のクラスが指定されているタグを対象にする」場合は$(“.test.sample”)とします。

セレクタの指定方法3：「not」を用いる場合

not条件は、除外したいidやクラスを選択し要素を限定することができます。.notでの記述方法は.not(除外する要素)、not()での記述方法は対象要素.not(除外する要素) です。「対象はxタグ、idとしてtext1が指定されているものを除く」場合は「$(‘x’).not(‘#text1’)」で絞り込めます。

なお、:not()はセレクタ指定と併せて除外したい要素があるときに使用し、$(対象要素+除外したい要素)と記述します。

プログラマー

いろんな条件の指定方法があるけど、柔軟に対応できるようになっていますね！

プロジェクト
マネージャー

はい。ただ、複数の要素が絡んでくる場合は、ページの処理に時間がかかることがあるので、その点を踏まえて条件はシンプルにしておくのが良いでしょう。

jQueryでは条件の書き方によって様々な要素の取得方法がある

要素の指定の方法は、条件の書き方によって単一、もしくは複数となる場合があります。jQueryでは、その指定した要素に対してさらに様々な設定変更や情報の取得などの処理を行うことが可能です。ただし、条件の指定方法によってはページの読込みが遅くなる場合があるので注意しましょう。