jQueryの基礎！

こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回はjQueryの基礎についてお伝えしていきます。

jQueryとは何か

jQueryとは、JavaScriptライブラリの1つです。

複雑なJavaScriptコードを書くことなく、簡単かつスマートにコードを書くことができます。

基本的な書き方

指定したセレクタに対して、メソッドを実行し、DOM操作を行うというのがjQueryを扱ううえでの一般的な流れです。

$("セレクタ").メソッド();

セレクタには、HTMLのタグ・id・classを指定したり、条件を絞り込むフィルタを記述できます。

メソッドには、セレクターに変化を与えたい処理を記述します。

以下のHTMLでjQueryを使い操作してみたいとおもいます。

<div id="test01">
      <p id="test02">1番目の文章などがここに入ります</p>
      <p id="test03">2番目の文章などがここに入ります</p>
</div>

$("#test03")でid="test03"を持つPタグにアクセスしています。

.cssでアクセスしたPタグのスタイルを変更でき、フォントサイズを30pxにしています。

 $("#test03").css("font-size", "30px");

remove()で指定したセレクターを非表示(消す)ことができます。

 $("#test03").remove()

フィルタ

フィルタを利用して、セレクタを指定する方法を学んでいきます。

以下のコードを利用します。

<ul class="list">
  <li class="list-item">テキスト1</li>
  <li class="list-item">テキスト2</li>
  <li class="list-item">テキスト3</li>
  <li class="list-item">テキスト4</li>
  <li class="list-item">テキスト5</li>
  <li class="list-item">テキスト6</li>
</ul>

:ep()

:ep()は指定した番号目の要素が選択されます。

$(".list-item:eq(3)").css("color", "#f00");

:even

:evenは偶数番目の要素が選択されます。

$(".list-item:even").css("color", "blue");

:odd

:oddは奇数番目の要素が選択されます。

$(".list-item:odd").css("font-size", "30px");

:first

:firstは最初の要素だけが選択されます。

$(".list-item:first").css("color", "red");

:last

:lastは最後の要素だけが選択されます。

$(".list-item:last").css("color", "blue");

jQueryイベント メソッド

$(セレクタ).on(イベント名, 実行する処理())

イベント名に、行いたいイベントを入力します。

以下のHTMLを使ってイベント処理を行います。

<div id="test01">
      <p id="test02">1番目の文章などがここに入ります</p>
      <p id="test03">2番目の文章などがここに入ります</p>
</div>

クリックイベント

イベント名に"click"と記述する事で、クリックイベントを実装できます。

thisは "test02"を指しています。

$("#test02").on("click", function () {
　　// クリックしたら、id="test02"を持つ要素の色を赤色にする
  $(this).css("color", "red");
});

マウスイベント

"mouseenter"はマウスが要素の上に来たら、処理が行われます。

"mouseleave"はマウスが要素の上から外れたら、処理が行われます。

.onを繋げて別の処理を書くことができます。

$("#test02").on("mouseenter", function () {
  $(this).css("color", "red");
}).on("mouseleave", function() {
  $(this).css("color", "");
});

その他のイベント

イベントは色々ありますので、調べてみてください！

今回は、jQueryの基礎について解説しました。