jQueryの基礎文法を学ぼう

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

JavaScriptでの実装と比較しながら進めていくことで、復習にもなりますし、より手軽さを感じられるかと思います。

基礎文法をしっかりと理解することで、学習効率も上がりますので、一緒に学んでいきましょう。

基本構文を理解する

こちらのセクションでは、jQueryの基本構文について解説していきます。

サンプルコードと見比べながら進めていきましょう。

サンプルコード

サンプルコードは、p要素のCSSを変更する処理です。コード内容は、「p要素のCSSのcolorプロパティを#f00(赤)に変更する」といった処理になります。

サンプルコードの構成は、$('セレクタ').css('プロパティ', '値');となっております。

css()に関しては、「jQueryのcss()を使って要素のスタイルを操作しよう」で詳しく解説していますので、気になる方はチェックしてみてください。

jQueryの基礎文法を学ぼう

HTMLコード

<div id="textarea">
  <p id="text1" class="text">テキスト</p>
  <p id="text2" class="text">テキスト</p>
  <p id="text3" class="text">テキスト</p>
</div>

JavaScript（jQuery）コード

$(function(){
  $('p').css('color', '#f00');
});

$(function() { ... });はHTMLの読み込みが全て完了した後に実行するためのコードです。

解説

セレクタ

セレクタとは、処理対象のことを指します。

jQueryでは、CSSと同じ方法でセレクタの指定ができます。しかし、全てのCSSセレクタがサポートされているわけではありませんので、上手くいかない場合は、セレクタがサポートされているか確認するようにしましょう。

以下は、全てp要素のカラーを赤に変更するコードです。

$(function(){
  //要素セレクタを指定して、全てのp要素を赤に変更する
  $('p').css('color', '#f00');

  //classセレクタを指定して、全てのp要素を赤に変更する
  $('.text').css('color', '#f00');

  //子孫セレクタを指定して、全てのテキストを赤に変更する
  $('#textarea p').css('color', '#f00'); 

  //子セレクタを指定して、全てのテキストを赤に変更する
  $('#textarea > p').css('color', '#f00'); 

  //idセレクタを指定して、１番目のテキストを赤に変更する
  $('#text1').css('color', '#f00'); 

  //複数のセレクタを指定して、全てのテキストを赤に変更する (カンマ区切りで複数指定)
  $('#text1, #text2, #text3').css('color', '#f00'); 
}); 

上記以外にも様々なセレクタの指定方法がありますので、ご自身で調べてみてください。

jQueryメソッド

jQueryメソッドとは、命令のことを指します。

サンプルコードのcss()メソッドは、CSSを操作する命令になります。ライブラリは、よく利用する処理をひとまとめにしたものとお伝えしましたが、このメソッドもその一つです。サンプルコードの場合、みなさんがダウンロードしたjQueryファイル(jquery.min.js)内にCSSを操作する処理がまとめられており、それらの処理をjQuery側からcss()メソッドを利用し、引数にプロパティと値を渡すことで、アクセスし、実行しています。

またjQueryメソッドは、jQuery独自の命令となるため、JavaScriptでは利用できません。

jQueryは、JavaScriptのライブラリですので、JavaScriptで用意されている命令・処理等はjQuery内でも利用できます。しかし、反対にjQueryメソッドなどjQuery独自の命令・処理等は、JavaScript内で利用することはできませんので注意してください。

メソッドでは、値の変更だけでなく、追加、取得なども可能です。

以降の解説でもメソッドに関しては扱っていきますが、全てのメソッドは扱いきれませんので、ご自身で調べてみてください。

jQueryオブジェクト

jQueryでは、HTML要素に直接メソッドを指定することができません。メソッドを指定するには、処理対象の要素をjQueryオブジェクトに変換する必要があります。jQueryオブジェクトに変換するとは、処理対象をjQuery形式に変換すると言うことです。

サンプルコードでも、p要素をjQueryオブジェクトに変換し、css()メソッドを実行しています。処理対象であるセレクタを囲んでいる$()部分がjQueryオブジェクトへの変換を行なっています。$()関数の引数に処理対象となる要素を指定すると、指定した要素がjQueryオブジェクトとして返される仕組みになっています。

また、jQueryオブジェクトとメソッドは、.(ドット)で繋ぐことでアクセスが可能となります。この.(ドット)を指定し忘れると動作しませんので、注意してください。

メソッドチェーン

メソッドチェーンとは、複数のメソッドを繋げて記述することを指します。

サンプルでは、css()メソッドのみの指定ですが、メソッドは複数指定することが可能です。

例えば、サンプルのp要素のカラーを赤に、テキストの内容を「Hello world」に変更するとします。

以下は、p要素に対して個別に処理を適応する例です。text()メソッドは、テキストを操作するメソッドで、引数に変更後のテキストを指定することでテキスト内容が変更されます。

$(function(){
  $('p').css('color', '#f00');   //p要素のカラーを赤に変更
  $('p').text('Hello world');   //p要素テキストを「Hello world」に変更
}); 

個別に処理を適応する方法は、シンプルで分かりやすかったりもするのですが、一つ問題があります。

それは$('p')箇所で、同じjQueryオブジェクトを2度生成していることです。jQueryオブジェクトは、生成する数が増えれば増えるほど負荷がかかり、パフォーマンスに影響が出てしまいます。この程度では影響が出ることはありませんが、動きの多いサイトや複雑な処理を実装するとなると、こういった一つ一つの処理に気を配らなれけばなりません。

従って、以下のようにメソッドチェーンを利用し、一つのjQueryオブジェクトに対し、処理を実行します。メソッドは、.(ドット)繋ぎで記述します。

$(function(){
  $('p').css('color', '#f00').text('Hello world');
}); 

フィルタ

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

代表的なフィルタ一覧

以下、代表的なフィルタ一覧になります。

サンプルコード

以下のサンプルコードを利用して、解説していきます。

フィルタを利用し、特定のセレクタのカラーを赤に変更します。

<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>

実装解説

:eq()

$(function(){
  $("li:eq(1)").css('color', '#f00');
});

()内に指定したindex番号目の要素が選択されます。

※JavaScript同様、index番号はゼロから始まりますので注意してください。

:even

$(function(){
  $("li:even").css('color', '#f00');
});

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

:odd

$(function(){
  $("li:odd").css('color', '#f00');
});

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

:lt()

$(function(){
  $("li:lt(3)").css('color', '#f00');
});

()内に指定したindex番号目の要素より前の要素が選択されます。

この時、()内に指定したindex番号目の要素は含まれません。

:gt()

$(function(){
  $("li:gt(3)").css('color', '#f00');
});

()内に指定したindex番号目の要素より後の要素が選択されます。

この時、()内に指定したindex番号目の要素は含まれません。

:first

$(function(){
  $("li:first").css('color', '#f00');
});

最初の要素が選択されます。

:last

$(function(){
  $("li:last").css('color', '#f00');
});

最後の要素が選択されます。

:contains()

$(function(){
  $("li:contains('5')").css('color', '#f00');
});

()内に指定したテキストを含む要素が選択されます。

上記では、5を指定していますので、テキストに5が含まれる「テキスト5」が選択されます。

イベント

こちらのセクションでは、イベントについて学んでいきます。

イベントとは

イベントとは、処理が実行されるきっかけのことを指します。

JavaScriptは、何らかのきっかけが発生したタイミングで処理を実行することが多いです。例えば、ハンバーガーメニューもアイコンがクリックされたタイミングで開閉処理を実行しています。

jQueryでは、イベントをコントロールする様々なメソッドが用意されていますが、こちらのセクションでは、on()メソッドを利用して、実装する方法を解説していきます。イベントを理解することでできることが大幅に増えますので、しっかり理解しましょう。

on()メソッド

on()メソッドとは、何らかのきっかけが発生したタイミングで処理を実行するメソッドです。

構文を理解する

以下が、on()メソッドの構文になります。

構成は、$('セレクタ').on('イベントタイプ', イベントハンドラ);となっております。イベントの種類のことを「イベントタイプ」、実行したい処理(関数)を「イベントハンドラ」と言いますので、用語として覚えておきましょう。

$(function(){
  $("セレクタ").on('イベントタイプ', function(){
    //実行したい処理
  });
});

イベントタイプ一覧

実装解説

実際に実装して理解を深めましょう。

clickイベント

ボタンが押されたら、ボタンの背景色を#00a8beに、カラーを#fffに変更する処理を実装します。

<button class="event-btn">BUTTON</button>

.event-btn{
  color: #ff9158;
  background-color: #fff;
  border: 1px solid #ff9158;
}

$(function(){
  $('.event-btn').on('click', function(){
    $(this).css({
      color: '#fff',
      backgroundColor: '#00a8be'
    });
  });
});

on()メソッドの第一引数にイベントタイプのclickを指定し、第二引数にはclickイベントが発火した際に実行したい処理を記述しています。背景色とカラーの変更に関しては、css()メソッドを利用し処理を行なっていますが、セレクタ、css()メソッド、共に前のセクションとは異なった構文で実装しています。

this

$()内に指定されているthisには、イベントが発生した要素が入ります。上記の場合、.event-btnが格納されます。thisは、イベントだけでなく、様々な処理で利用することができますので、ご自身で調べてみてください。

mouseover, mouseoutイベント

ボタン上にマウスが乗ったら、背景色を#00a8beに、カラーを#fffに変更し、マウスが離れたらデフォルトスタイルに戻す処理を実装します。

<button class="event-btn">BUTTON</button>

.event-btn{
  color: #ff9158;
  background-color: #fff;
  border: 1px solid #ff9158;
}

$(function(){
  $('.event-btn')
  .on('mouseover', function(){
    $(this).css({
      color: '#fff',
      backgroundColor: '#00a8be'
    });
  })
  .on('mouseout', function(){
    $(this).css({
      color: '',
      backgroundColor: ''
    });
  });
});

マウスオーバーした際の処理とマウスアウトした際の処理をメソッドチェーンを利用して実装しています。

マウスオーバーした際の処理は、先ほど解説したクリックイベントのイベントタイプをmouseoverに変更しただけです。マウスアウトした際の処理ですが、css()メソッドの値が空になっています。このようにcss()メソッドの値を空にすることで、マウスオーバー時に設定された値をリセットすることができます。

実装しながら覚えていこう！

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

プログラミングは実際にコードを書きながら学んでいくことで、より理解度が増します。

決して最初から暗記しようとせずに、実装しながら覚えていきましょう！

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー