jQuery特集　ホームページ作成にはかかせないjQuery　MKSITE

jQuery基礎

jQueryとは

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

メソッドを使ってみよう

jQueryの書き方
jQueryの操作は非常に直感的かつシンプルです。jQueryの使い方は、
①jQueryオブジェクトを作成し、
②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す、という2つが基本になります。
jQueryはJavaScript（JS）なので、文末にセミコロンが必要です。またコメントもJS同様に//を用います。

オブジェクト作成　メソッド呼び出し
('セレクタ').メソッド(引数)；
何を　　　　　どうするか

jQueryオブジェクト

jQueryオブジェクトは、図のように$('セレクタ')とするだけで作成できます。
セレクタにはHTMLのタグ名やclass名などを指定し、それに合致したHTMLの要素がjQueryオブジェクトになります。
セレクタはCSSセレクタ（CSSで使用するセレクタ）と同じなので、CSSの知識さえあれば直感的に操作できます。

SCRIPT
//h1タグをjQueryオブジェクトにする $('h1') セレクタ

HTML>
＜h1＞HTML＜/h1＞

CSS>
h1 {color:red;}

hideメソッドを使ってみよう

メソッドとは、便利な機能のことです。jQueryのメソッドは前述のjQueryオブジェクトでしか利用できません。メソッドを使うと、jQueryオブジェクトの内容（HTMLの要素）を変更したり、アニメーションをつけたりすることができます。メソッドは$('セレクタ').メソッドというように、ドットに続けて呼び出します。要素を隠すhideというメソッドを使ってみましょう。

//$('h1')に対してhide()というメソッドを呼び出します
$('h1').hide();
　　　ドットをつけてメソッドを呼び出します

アニメーション付きで要素を隠す

hideメソッドに似たものとしてfadeOutメソッドがあります。fadeOutメソッドを用いると、要素を隠す際に、アニメーションを付けることができます。fadeOutメソッドは、後ろの()内に引数として、アニメーションの速度を指定できます。ミリ秒での指定や、文字列での指定が可能です。

$('セレクタ').fadeOut();
要素を隠す前に消えていくアニメーションを追加
$('セレクタ').fadeOut(1500);
引数でアニメーションの速度を1500ミリ秒（15秒）に設定

アニメーション付きで要素を隠す2

slideUpメソッドを用いても、アニメーション付きで要素を隠すことができます。 fadeOutと異なるアニメーションを実現できます。また、slideUpメソッドも後ろの()内に引数として、アニメーションの速度を指定できます。

$('セレクタ').slideUp();
要素を隠す前に上から下へスライドするアニメーションを追加
$('セレクタ').slideUp(1500);
引数でアニメーションの速度を1500ミリ秒（15秒）に設定

classとidをセレクタにする

classとidをセレクタにするには下図のようにします。CSSのセレクタと同様にclass名の前にはドット（.）、id名の前にはシャープ（#）を用います。idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されます。jQueryオブジェクトのセレクタにはできるだけidを用いるようにしましょう。

CSS
idはセレクタに#を用います
#list {margin:10px;}
classはセレクタにドットを用います
.list-item {color:blue;}

JS
$('#list').css('margin','20px');
　　cssのセレクタと同様
$('#list-item').css('color','red');

要素を表示しようdisplayプロパティ

CSSにはdisplayプロパティというものがあります。「display: none;」とすると要素を隠すことができます。

CSS
img {display:block;}
h1 {display:none;}

隠れた要素を表示しよう

隠れた要素を表示するメソッドとして、showメソッドがあります。表示したい要素に対し、$('セレクタ').show();と指定することで隠れた要素を表示できます。hideメソッドと合わせてセットで覚えるとよいでしょう。

CSS
img {display:none;}
JS
$('img').show();

アニメーション付きで要素を表示

CSS
img {display:none;}
JS
$('img').show();

アニメーション付きで要素を表示

fadeOutの反対としてfadeInメソッド、slideUpメソッドの反対としてslideDownメソッドがあります。どちらもアニメーション付きで隠れた要素を表示することができます。

JS
$('セレクタ').fadeIn();
要素を表示する際に様々に表示するアニメーションを追加する
$('セレクタ').fadeIn('slow');
引数でアニメーションの速度をゆっくりに設定する

$('セレクタ').slideDown();
要素を表示する際に様々に上から下へスライドするアニメーションを追加する
$('セレクタ').slideDown('slow');
引数でアニメーションの速度をゆっくりに設定する

イベントを使おう

イベントとは

イベントを用いると、ある処理を行うタイミングを設定できます。WEBページ内で、ユーザーによってクリックなどの操作が行われた時、あらかじめイベント内に指定した処理を実行します。イベントの構文は、$('セレクタ').イベント名(function(){ });のように書きます。

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

clickイベント

clickイベントを用いると、「セレクタがクリックされた時に処理をする」ことができます。例えば、ボタンをクリックしたときに関連する文章を表示する、といったイベントを設定できます。下図の例では、ボタンをクリックすると文章を隠すというイベントを作成しています。

HTML
＜div id="hide-text"＞説明をする＜/div＞
＜p id="test"＞ボタンをクリックすると紋章が隠れます＜/p＞

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

CSSメソッドとは

CSSメソッドは、CSSを変更できるメソッドです。1つ目の引数にCSSのプロパティを、2つ目の引数にプロパティの値をいれます。

$('セレクタ').css('プロパティ名','値');
　　　　　　　jQueryオブジェクトのcssを変更するメソッドです

cssメソッドで色を変えよう

cssメソッドの具体例を見てみましょう。cssメソッドで要素の文字の色を変更したいときは、$('セレクタ').css('color', 'red');のように記述します。widthやfont-sizeなど他のプロパティもすべてcssメソッドで変更することができます。

CSS
p {color:blue;}
JS
//cssのp:color:redに等しい
$('p').css('color','red');

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

cssメソッドでdisplayプロパティの値を変更することもできます。$('セレクタ').css('display', 'none');はhideメソッドと全く同じです。このようにhideメソッドやshowメソッドは、実はdisplayプロパティの値を変更しているだけだということを覚えておきましょう。

HTML
＜h1＞h1を隠す＜/h1＞
＜img src="...."＞
CSS
img {display:none;}
JS
//h1を隠す
$('h1').css('display','none');
//imgを表示する
$('img').css('display','block');

textメソッドとhtmlメソッド

HTMLを変更する(1)- textメソッドjQueryではCSSだけでなく、textメソッドを用いることでHTMLそのものを変更することも出来ます。textメソッドは、$('セレクタ').text('書き換える文字列');のように記述します。

HTML
＜p＞こんにちわ＜/p＞＜!--この部分を変更--＞
JS
$('p').text('こんばんわ');
　　　　　　　p要素内の引数の文字列を変更する

HTMLを変更する(2)-htmlメソッド

htmlメソッドは、要素の中身のHTMLを書き換えることが出来ます。textメソッドと違い、htmlメソッドの引数は、単なる文字列ではなくHTMLだということです。例えば下図の例をtextメソッドで行うと、タグもそのまま文字列としてブラウザに表示されますが、htmlメソッドならタグがHTMLタグと認識され、ブラウザには「こんばんは」とだけ表示されます。

HTML
＜p＞こんにちわ＜/p＞＜!--この部分を変更--＞
JS
$('p').html('');
　　　　　　　p要素内の引数のHTMLを変更する

thisの構文

$(this)はイベントの中で、そのイベントが起こった要素を取得することができます。$()の中でthisをクォーテーション（"や'）で囲まないことに注意してください。$(this)は非常に重要な概念なので覚えておきましょう。

HTML
＜ul＞
＜li＞リスト１＜/li＞
＜li＞リスト２＜/li＞
＜li＞リスト３＜/li＞
＜/ul＞
JS
$('li').click(function() {
$(this).css('color','red');
});

thisの使い方

thisはイメージしにくいので、具体例を見てみましょう。例えば下図のように、複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があります。このようなときはthisを用いて、実際にイベントが起こった要素を取得しましょう。

HTML
＜ul＞
＜li＞リスト１＜/li＞
＜li＞リスト２＜/li＞
＜li＞リスト３＜/li＞
＜/ul＞
JS
//どのli要素をクリックしてもクリックイベントが発生
$('li').click(function() {
//$(this)には実際にクリックされたli要素が入っています
$(this).css('color','red');
});

変数とメソッドチェーン変数を使おう

同じjQueryオブジェクトを複数回使用する時は変数にしましょう。コードが見やすくなる上、jQueryの処理が高速化されます。JavaScriptと同じく、jQueryで変数宣言にはvarを用います。変数には文字列や数値、jQueryオブジェクトなどを格納することができますが、jQueryオブジェクトを格納する時は、わかりやすいように変数の頭に$を付けるのが慣例となっています。

JS
$('div').css('color','red');
$('div').html('jQuery');
$('div').fadeOut();
JS2
var $div = $('div');　←$('div')を変更する
$('div').css('color','red');
$('div').html('jQuery');
$('div').fadeOut();

メソッドチェーンを使おう

同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化できます。メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文です。$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用されます。

JS
//ドットで続けてメソッドを繰り返す
$('div').css('color','red').html('jQuery');

要素の取得

子要素を取得しよう(1)-findメソッド

findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用います。下図の例では、＜div id="wrapper"＞から＜/div＞の中にあるすべての＜a＞要素を取得することができます。

HTML
＜div id="wrapper"＞
＜a href="#"＞リンク＜/a＞
＜p＞
＜a href="#"＞リンク２＜/a＞
＜/p＞
＜/div＞
JS
$('#wrapper').find('a').css('color','red');

子要素を取得しよう(2)-childrenメソッド

childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用います。下の例では＜div id="wrapper"＞の子要素は＜a＞タグと＜p＞タグが1つずつなので、＜a＞タグが1つ取得されます。

HTML
//childrenメソッドは親要素（wrapper）のー階層下の子要素だけを取得
＜div id="wrapper"＞
＜a href="#"＞リンク＜/a＞
＜p＞
＜a href="#"＞リンク２＜/a＞
＜/p＞
＜/div＞
JS
$('#wrapper').children('a').css('color','red');

hoverイベントを作ろう

hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。下図のように「jQueryとは？」にマウスが乗った時にだけ、説明文が表示されるようにしてみましょう。

図なし

hoverイベント

hoverイベントは、 $('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);のように書きます。clickイベントと違い、引数を2つ書くことに注意しましょう。引数の間はコンマで区切ります。

JS
$('div').hover(
//第一引数
function() {
//マウスをのせた時の処理
}, //各functionの間にはコンマが必要
//第二引数
function() {
//マウスをのせた時の処理
}
);