.net column

.NET開発者のためのブログメディア
フォルダ

jQuery初心者のための書き方講座その3【要素の取得】

2020年04月20日

jQueryを利用する際は、要素の指定以外に「取得」も頻繁に行います。特に動的に変化するページ内の情報の取得や、ユーザーが指定した情報を処理することができるため、使いこなせれば自由度の高いホームページを作ることができるでしょう。

PG
ページ内の要素ってどうやって取得するのですか?
PM
条件付けなどで、該当する要素を取得できますが、いろいろな指定の方法があるので見ていきましょう。

jQueryにおける要素とは

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

指定した要素の取得

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

表示結果
要素取得の結果

上記のサンプルにあるように、idの場合は#に続いて名前を指定します。クラス名を指定する場合は「ピリオド+クラス名」で指定してください。

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

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

例:id名が「hoge.hoge 」の場合

のいずれか

※開発現場では後者の表記がよく利用されます。

PG
いろんな条件の指定方法があるけど、柔軟に対応できるようになっていますね!
PM
はい。ただ、複数の要素が絡んでくる場合は、ページの処理に時間がかかることがあるので、その点を踏まえて条件はシンプルにしておくのが良いでしょう。

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)