jQuery基礎メモその1

jQueryとは

jQueryはJavaScriptのライブラリの1つである。
HTMLやCSSでは実現できないアニメーションを表現できる

jQueryの書き方

jQueryの使い方は、①jQueryオブジェクトを作成し、②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す、という2つが基本となる。

$('セレクタ').メソッド(引数);

classとid

セレクタにclassとidを指定する場合は以下のようにする。

// id
$('#title').slideUp();

// class
$('.item').fadeOut();

要素を隠す

fadeOutメソッドは、要素を隠す際に、徐々に消えてくいくアニメーションを追加する。
引数にアニメーションの速度を指定できる。

要素を隠すhideメソッド

$('h1').hide();
// 要素を隠す

$('セレクタ').fadeOut();
// 要素を隠す際に、徐々に消えていくアニメーションを追加

$('セレクタ').fadeOut(1500);
// 引数でアニメーションの速度を1500ミリ秒（1.5秒）に指定

slideUpメソッドは要素を隠す際に、下から上にスライドするように消えてくアニメションを追加する。
引数にアニメーションの速度を指定できる。

$('セレクタ').slideUp();
// 要素を隠す際に、下から上へスライドするアニメーションを追加

$('セレクタ').slideUp(1500);
// 引数でアニメーションの速度を1500ミリ秒(1.5秒)に指定

隠れた要素を表示させる

隠れた要素（display: none;）を表示させるメソッドとして、showメソッドがある。

stylesheet.css

img {
  display: none;
}
/* 隠れた要素 */

script.js

$('img').show();
// $('セレクタ').show();で隠れた要素を表示する

faeInメソッドは要素を表示する際に徐々に表示する

$('セレクタ').fadeIn();
// 要素を表示する際に徐々に表示するアニメーションを追加

$('セレクタ').fadeIn('slow');
// 引数でアニメーションの速度をゆっくりに指定

slideDownメソッドは要素を表示する際に、上から下にスライドするアニメーションを追加

$('セレクタ').slideDown();
// 上から下にスライドするアニメーションを追加

$('セレクタ').slideDown('slow');
// 引数でアニメーションの速度をゆっくりに指定

イベント

イベントとは、ある処理を行うタイミングを設定する際に用いる。

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

clickイベント

clickイベントを用いると、『セレクタがクリックされた時に処理をする』ことができる。

index.html

<div id="hide-text">文字を隠す</div>
<p id="text">ボタンをクリックすると文字が隠れる</p>

script.js

$('#hide-text').click(function() {
  // #hide-textがクリックされた時に #textを隠す
  $('#text').hide();
});

CSSメソッド

CSSメソッドは、CSSを変更できるメソッドである。

$('セレクタ').css('プロパティ名', '値');

CSSメソッドで色を変える

stylesheet.css

p {
  color: blue;
}

script.js

$('p').css('color', 'red');
// p要素のcolorをredに変える

CSSメソッドで要素を隠す、表示する

// h1を隠す
$('h1').css('display', 'none');

// imgを表示
$('img').css('display', 'block');

htmlを変更する

textメソッドは、要素の文字列を変更する。

index.html

<p>こんにちは</p>

script.js

$('p').text('こんばんは');
// p要素内を引数の文字列で変更

htmlメソッドは、要素の中身のhtmlを書き換える。

index.html

<p>こんにちは</p>

script.js

$('p').html('<span>こんばんは</span>');
// p要素内を引数のHTMLで変更

p要素の中にHTMLが追加される

<p><span>こんばんは</span></p>

this

$(this)はイベントの中で、そのイベントが起こった要素を取得することができる。
thisは例として、複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があるとする。このようなときはthisを用いて、実際にイベントが起こった要素を取得する。

index.html

<ui>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ui>

script.js

// どのli要素をクリックしてもクリックイベントが発生
$('li').click(function() {

  // $(this)には実際にクリックされたli要素が入っている
  $(this).css('color', 'red');
});

変数

jQueryオブジェクトは、変数を使うことができる。
JavaScriptと同じくvarを用いて変数定義する。
jQueryオブジェクトを格納するときは、わかりやすいように変数の頭に$をつけるのが習慣になっている。

// $('div')を変数にする
var $div = $('div');

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

メソッドチェーン

メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文である。
$('セレクタ').メソッド().メソッド()・・・のように書くことで、それぞれのメソッドが適用される。

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

findメソッド

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

index.html

<div id="wrapper">
  <a half="#">リンク1</a>
  <p>
    <a half="#">リンク2</a>
  </p>
</div>

script.js

$('#wrapper').find('a').css('color', 'red');
// findメソッドで親要素(Wrapper)の中にある全ての子要素を取得

childrenメソッド

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

index.html

<div id="wrapper">
  <a half="#">リンク1</a>
  <p>
    <a half="#">リンク2</a>
  </p>
</div>

script.js

$('#wrapper').children('a').css('color', 'red');
// childrenメソッドは親要素(wrapper)の一階層下の要素だけ取得する
// リンク2はp要素の下にある為呼び出されない

hoverイベント

hoverイベントは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントである。

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