jQuery実行のタイミングについて
前回までに説明した方法では、ブラウザを起動したタイミングやリロードしたタイミングでCSSが変化してしまうので、CSSを直接入力しているのと変わりありません。
そこで今回は実行のタイミングをコントロールする方法を紹介します。よく使用するタイミングには以下のものがあります。
- 特定の要素にマウスオーバーしたタイミング
- 特定の要素にマウスアウトしたタイミング
- 特定の要素をクリックしたタイミング
- マウスが動いたタイミング
- ウィンドウのサイズが変更されたタイミング
- スクロールしたタイミング
上記のタイミングでCSSを変化させたら、インタラクティブな表現が可能になります。それでは説明してまいります。
$(function()){
$('#typo').on('mouseover',fuction(){
$('#typo').css('color','#ebc000');
});
});
上記をブラウザでリロードし、#typoの要素にマウスオーバーすると、マウスオーバーしたタイミングで文字色が変化します。
コードの解説
今回は3つのパートに分けて解説します。
■1つめのパート
$(function(){
//2つめ・3つめのパートが記述されている
});
■2つめのパート
$('#typo').on('mouseover', function(){
//3つめのパートが記載されている
});
■3つめのパート
$('#typo').css('color', '#ebc000');
1つめと3つめのパートは前回ご紹介したコードと同じです。タイミングのコントロールの役割を担っているのは2つめのパートです。
まず$()関数でcssセレクタを使用して対象の要素をjQueyオブジェクトに変換しています。on()メソッドは特定の出来事が起こるタイミングに実行したい命令を設定するメソッドです。この特定の出来事のことをイベントといい、イベントの種類のことをイベントタイプといいます。また実行したい命令（関数）のことをイベントハンドラといいます。
onメソッドの1つめの引数にはイベントタイプを渡し、2つめの引数にはイベントハンドラを渡します。
■on()メソッド
on('イベントタイプ', イベントハンドラ)
上記の構文を参考に今回の例を見ると、実行する命令として以下のコードを渡していることになります。
■２つめ・３つめのパート
$(function(){
$('#typo').on('click', function(){
$('#typo').css('color', '#ebc000'); ←①
)};
)};
{}で囲まれた部分が任意の処理になり、３つめのパート①が任意の処理ということになります。つまり、#typoに該当する要素にマウスオーバーしたら、その要素のcolorプロパティを、#ebc000に変更するという処理になります。
イベントタイプを変更してみよう
以下のようにイベントタイプをclickにすると、#typoの要素をクリックしたタイミングで文字色が変化します。
$(function(){
$('#typo').on('click', function(){ ←①
$('#typo').css('color', '#ebc000');
)};
)};
on()メソッドを複数指定する
以下のように複数のon()メソッドを指定することも可能です。
$(functio(){
$('#typo').on('mouseover', function(){
$('#typo').css({
color: '#ebc000',
backgroundColor: '#ee5e9b'
});
)};
$('#typo').on('mouseout', function(){
$('#typo').css{(
color: ''
backgroundColor: ''
});
});
});
ここでは以下の処理を実装しています。
- #typo要素にマウスオーバーしたら文字色と背景色を変更する
- #typo要素からマウスアウトしたら元の色に戻す
このコードのポイントは、マウスアウトした際にcss()メソッドの２つめの引数に”を渡している点です。cssメソッドの２つめの引数に空っぽの文字列を指定すると、元のcssに戻ります。
メソッドチェーンとは
以下コードのようにメソッドをチェーンのように繋げて記述し、実行するプログラミング手法です。
■jQueryのメソッドチェーン
$('セレクタ').メソッドA.メソッドB.メソッドC()…
メソッドは左から順に実行されます。各メソッドの処理対象は基本的に、最初の$()関数によって生成されるjQueryオブジェクトです。
■メソッドチェーンを使った例
$(function(){
$('#typo')
.on('mouseover', function){
$('#'typo').css({
color: '#ebc000',
backgroundColor: '#ae5e9b'
});
)};
.on('mouseover', function(){
$(#typo).css({
color: '',
backgroundColor: ''
});
)};
)};
メソッドチェーンは、実行の順番が結果に関係しないメソッドについては、順番を変えても同じ結果になります。
メソッドチェーンのメリットは主に以下の２点です。
- $()関数の記述が１回で済むため、コードがシンプルになる
- プログラム処理速度が向上する
