jQuery入門 | 要素の選択 | CSSセレクター

CSSセレクターを利用した選択

jQueryでは、CSSセレクターを使用してHTML要素を選択できる。

要素のタグ名でHTML要素をすべて選択できる。これはJavaScriptのgetElementsByTagName()メソッドと同じ動作をする。

下の例で<button>をクリックすると、<span>タグの文字サイズが30pxに設定される。

$("button").on("click", function() {
  $("span").css("fontSize", "30px");
});

$()関数に渡す引数は、必ず引用符（""）を使用した文字列形式で渡さなければならない。

要素のIDで特定のHTML要素を選択することもできる。これはJavaScriptのgetElementsById()メソッドと同じ動作をする。

下の例で<button>をクリックすると、IDがdevkumaの文字サイズが30pxに設定される。

$("button").on("click", function() {
  $("#devkuma").css("fontSize", "30px");
});

クラスで同じクラスのHTML要素をすべて選択できる。これはJavaScriptのgetElementsByClassName()メソッドと同じ動作をする。

下の例で<button>をクリックすると、クラスがdevkumaの文字サイズが30pxに設定される。

$("button").on("click", function() {
  $(".devkuma").css("fontSize", "30px");
});

その他にも、属性やさまざまなCSSセレクターに該当する特定のHTML要素を選択できる。

下の例でIDがbtn1の要素をクリックすると、title属性がdevkumaの文字サイズが30pxに設定される。

$("#btn1").on("click", function() {
  $("span[title=devkuma]").css("fontSize", "30px");
});

下の例でIDがbtn2の要素をクリックすると、btn2自身の文字サイズが30pxに設定される。

$("#btn2").on("click", function() {
  $(this).css("fontSize", "30px");
});

下の例でIDがbtn3の要素をクリックすると、<li>の最初の項目の文字色が赤に設定される。

$("#btn3").on("click", function() {
  $("ul li:first").css("color", "red");
});