jQueryの基礎：ID、クラス、HTMLタグにフックさせる

jQueryの本当に基礎から紹介します。

サンプルはこちら。

See the Pen Basics of jQuery by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

テキストをクリックして色を変えます。
特定のIDやクラスをフックし動作をさせるのがjQueryの基礎です。

HTML

<p class="popAlert1">クラスにフックして赤字にする。</p>
<p id="popAlert2">IDにフックして赤字にする。</p>
<p><strong>太字部分</strong>にフックして赤字にする。</p>

JavaScript

$(function () {

  //クラス「popAlert1」をフック
  $(".popAlert1").click(function(){
    $(this).css("color","#f00");
  });

  //ID「popAlert2」をフック
  $("#popAlert2").click(function(){
    $(this).css("color","#f00");
  });

  //strongタグをフック
  $("strong").click(function(){
    $(this).css("color","#f00");
  });

});

まず最初と最後の行はjQueryのお約束と考えてもらって結構です。

4行目、9行目、14行目が実際の処理なのですが、さらに分解したいと思います。

$(".popAlert1")
$("#popAlert2")
$("strong")

この記述で、HTML内にある「popAlert1」のクラス、また「popAlert2」のIDと、strongタグそのものを指定しています。

CSSを宣言する時と同じ形式で、ピリオドが付けばクラス、シャープが付けばID、何もつかなければHTMLタグを指定します。

$(".popAlert1").click();
$("#popAlert2").click();
$("strong").click();

そして次に続くのがイベントです。
「.popAlert1がクリックされたら～」「#popAlert2がクリックされたら～」「strongがクリックされたら～」というイベントになります。

$(".popAlert1").click(function(){
  $(this).css("color","#f00");
});

そしてクリック時の処理をこのように記述します。「click()」の () の中に処理を書くというイメージです。
今回はクリックされたもの自身のCSSを書き換えて赤字にしている処理を入れています。

以上がフックの基礎になります。