［アラフォプログラミング未経験］JavaScriptのライブラリ「jQuery」のセレクタとは？ - アラフォ〜プログラミング未経験会社員のエンジニアへの道

今回は、「jQuery」のセレクタについて学んでみました

目　次

「jQuery」のセレクタには大きく分けて３つあるとのことです。

IDセレクタとは、HTML要素のid属性で指定するセレクタのことです。

IDセレクタは、取得したいHTML要素のid属性の値に#（ハッシュ）を

付けたものをセレクタとして利用します。

$(“#idSelector”)              // idがidSelectorの要素を取得

クラスセレクタとは、HTML要素のclass属性で指定するセレクタのことです。

クラスセレクタは、取得したいHTML要素のclass属性の値に.（ドット）を付けたものを

セレクタとして利用します。

$(“.classSelector”)         // classがclassSelectorの要素をすべて取得

要素セレクタとは、h1やpのようなHTML要素を対象としたセレクタのことです。

要素セレクタは取得したいHTML要素の要素名をそのままセレクタとして利用します。

$(“h1”)                        // h1要素をすべて取得

※セレクタを指定した場合、該当するすべてのHTML要素が取得されます。
そのためidセレクタは1つしか要素が取得されませんが（id属性の値は被ることがないため）
他のセレクタでは複数の要素が取得される可能性があります。

text()を使うと、取得したHTML要素のテキストを書き換えることができます。

引数には書き換えたいテキストを文字列で指定します。

$(“#title”).text(“変更したタイトル“);

html()を使うと、取得したHTML要素のテキストをHTMLのタグを含むテキストに書き換えることが出来ます。

引数には書き換えたいHTML要素を文字列で指定します。

$(“p”).html(“<strong>変更されたコンテンツ</strong>“);

なるほど、、、

それぞれの要素を取得して、それに対して変更したりができるわけですね

次はセレクタ要素を使って、HTML操作してみます！