Progate（プロゲート）でjQueryの学習メモ

こんにちは。Tomoyuki（@tomoyuki65）です。

Progateで久しぶりにjQueryの学習をしましたが、やれることが多いのでとりあえず基本的なことを中心に理解していればよさそうだと感じました。

最近だとReactなど、jQuery以外のものも使われるようになりましたが、シンプルなサイトや小規模なサイトであれば、まだjQueryも現役でしょう。

ということで、jQueryについて学習メモを残しておきます。

jQueryとは？

jQueryとは、JavaScriptのライブラリの一つで、ユーザーのクリックに反応して表示されるフォームやアニメーションなど、HTMLとCSSだけでは実現できなかった様々な動きを表現できます。

jQueryの書き方

jQueryの書き方は「$(‘セレクタ’).メソッド(引数);」で、最初に指定した「$(‘セレクタ’)」に対してメソッドに応じた処理をすることができます。

そして「$(‘セレクタ’)」はjQueryオブジェクトであり、セレクタにはHTMLのタグ名やclass名などを指定します。

例えばh1の要素を隠したい場合、「$(‘h1’).hide();」で処理できます。

また、classとidをセレクタに指定する場合は、「$(‘.class名’).hide();」、「$(‘#id名’).hide();」のように書きます。

※idは同一ページに一箇所しか存在しないため、jQueryの処理が高速化される

尚、逆に要素を表示したい場合は、「$(‘h1’).show();」で処理できます。

イベント構文

ユーザーによってクリックなどの操作が行われたときの処理については、以下のようにイベント構文を使います。

$('セレクタ').イベント名(function() {
  // イベント発生時に実行したい処理
});

例えば、id名「hide-text」がついたボタンがクリックされた時にid名「text」がついた要素を隠したい場合、以下のように書きます。

$('#hide-text').click(function() {
  $('#text').hide();
});

cssメソッド

cssを変更したい場合、cssメソッドを使って「$(‘セレクタ’).css(‘プロパティ’, ‘値’);」のように書きます。

textメソッド

textメソッドを使えば、HTMLのテキストを書き換えられます。

例えば「<p>こんにちは。</p>」の「こんにちは。」を「こんばんは。」に書き換えるには、次の通りです。

$('p').text('こんばんは。');

htmlメソッド

htmlメソッドを使えば、要素の中身のHTMLを書き換えることもできます。

例えば「<p>こんにちは。</p>」の「こんにちは。」を「<span>こんばんは。</span>」に書き換えるには、次の通りです。

$('p').html('<span>こんばんは。</span>');

this構文

this構文「$(this)」を使えば、イベントの中でそのイベントが起こった要素を取得することができます。

例えば以下のようなリストがあります。

<ul>
  <li>リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li>
</ul>

クリックされたリストの文字色を赤に変更したい場合は、次の通りです。

$('li').click(function() {
  $(this).css('color','red');
});

変数

同じjQueryオブジェクトを複数回使用する場合は、以下のように変数に格納して使うと処理の高速化を計れます。（変数名の頭に$を付けるのが慣習）

var $div = $('div');

$div.css('color', 'red');
$div.html('jQuery');
$div.fadeOut();

※ES5以前で変数宣言はvarを使っていたが、ES6以降ではvarは極力使わないので注意

メソッドチェーン

同じjQueryオブジェクトを複数回使用する場合は、メソッドチェーンを使うこともできます。

$('div').css('color', 'red').html('jQuery');

findメソッド

findメソッドは、全ての子孫要素（自分よりも下の階層の全て）の中から、指定したセレクタを持つ要素を取得できます。

例えば<div id=”wrapper”>から</div>の中にある全ての<a>要素を取得し、文字色を赤色に変更するには次の通りです。

$('#wrapper').find('a').css('color', 'red');

childrenメソッド

childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得できます。

例えば<div id=”wrapper”>の一階層下の子要素である<a>要素を取得し、文字色を赤色に変更するには次の通りです。

$('#wrapper').children('a').css('color', 'red');

hoverイベント

要素にマウスが乗った時、外れた時に指定した処理を行うにはhoverを使います。

$('div').hover(
  function() {
    //マウスを乗せた時の処理
  },
  function() {
    //マウスを外した時の処理
  }
);

jQueryの使い方

jQueryを使うには、以下の3つの準備が必要です。

jQueryの読み込み
jQueryのコードを記述するファイルの読み込み
jQueryの型

<head>
　<-- <head>タグ内でjQueryライブラリを読み込み -->
  <script src="https://...jquery.min.js"></script>
</head>

<body>

  <-- </body>タグの上でjQueryのコードを記述したファイルを読み込み -->  <script src="script.js"></script>
</body>

ファイル：script.js

$(function() {
  // この中にjQueryを書く
});

よく使いそうなメソッド

addClassメソッドとremoveClassメソッド

addClassメソッドで指定した要素にクラスを追加できます。

$('.text-contents').addClass('text-active');

その逆に、removeClassで指定した要素から指定したクラスを取り除くことができます。

$('.text-contents').removeClass('text-active');

hasClassメソッド

hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。

オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。

$('.answer').hasClass('open');

prevメソッドとnextメソッド

prevメソッドは、jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から一つ前の要素を、nextメソッドは一つ後ろの要素を取得できます。

jQueryオブジェクトの構造

jQueryオブジェクトの構造としては、配列のような構造をしているため、セレクタに合致した要素が複数ある場合はインデックス番号が割り振られています。

そのためeqメソッドを用いると、jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できます。

例えば以下の通り。

$('li').eq(2).css('color', 'red');

indexメソッド

クラス名がついた要素のインデックス番号を取得するには、indexメソッドを使います。

例えばクラス名「active」がついたリストの要素のインデックス番号を取得するには以下の通り。

$('li').index($('.active'));

また、clickイベントの中でクリックされた要素のインデックス番号を取得するには次の通り。

$('li').click(function() {
  var index = $('li').index($(this));
});

要素の値をゲット

textメソッドやhtmlメソッド、cssメソッドは、値をセットする他に値をゲットできます。

var text = $('p').text();

var html = $('#main').html();

var fontSize = $('h1').css('font-size');

attrメソッド

attrメソッドを使えば、HTMLの属性をセット、ゲットできます。

$('h1').attr('id', 'title');

var url = $('a').attr('href');

valメソッド

inputタグに入力されている値を取得するには、valメソッドを使います。

var name = $('#name').val();

また、selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できます。

var gender = $('#gender').val();

逆に値をセットするには次の通り。

$('#name').val('ポチ');

$('#gender').val('male');

submitイベント

フォームが送信された時のイベントとしては、submitイベントがあります。

$('form').submit(function() {
  // フォームが送信された時の処理
});

カスタムデータ属性

HTMLには属性がありますが、属性は自分で作ることもできます。

これをカスタムデータ属性といい、「data-」から始まる属性名を自由に設定できます。

data属性は、何らかの情報をHTML内に指定しておくのに便利です。

例えば次の通り。

<div data-option="1"></div>

attrメソッドを使えば属性の値を取得できます。

$('div').attr('data-option');

animateメソッド

アニメーションを作るには、animateメソッドを使います。

例えば次の通り。

$('h1').animate({
  'font-size': '50px'
}, 1000);

aタグでのページ内リンク

aタグでページ内リンクを設定するには次の通り。

<a href="#contact">
  お問い合わせ
</a>

<div id="contact">

</div>

scrollTopメソッド

jQueryでページ内リンクを実装すると、リンク先への移動にアニメーションをつけることが可能です。

scrollTopメソッドを使い、$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができます。

scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えます。

$('#top-btn').click(function() {
  $('html body').scrollTop(0);
});

また、スクロールにアニメーションをつけたい場合は次の通り。

$('#top-btn').click(function(){
  $('html, body').animate({
    'scrollTop': 0
  }, 500);
});

offsetメソッド

offsetメソッドで、要素の表示位置を取得できます。

ページの上端からの距離を取得するには次の通りです。

$('h1').offset().top;

また、各ボタンはaタグにし、そのhref属性に飛び先のid名を指定。そしてクリックしたときにattrメソッドでhref属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できます。

$('.scroll-btn').click(function() {
  var id = $(this).attr('href');

  var position = $(id).offset.top;

  $('html, body').animate({
    'scrollTop': position
  }, 500);
});