25.jQueryの使い方 ～イベント監視とアニメーション～
引き続きjQueryについて学習しましたので、整理します。
中でも「イベント監視」と「アニメーション」についてやっていきます。
イベント監視
JavaScriptの所でもやりました、イベント監視。
状態の変化があった時に何らかの処理をさせたい
時に使うものでしたね。
今回もJavaScriptと比較しつつ確認していきます。
要素のクリックを検出して処理を実行
次の処理を行うコードを書きます
ブラウザに読み込まれたHTMLの
id属性にtestが設定されている要素が
クリックされた時に
処理を実行する
まずはJavaScriptから
document.getElementById('test').addEventListener('click',function(){実行させたい処理});
これをjQueryで書くと
$('#test').click(function(){実行させたい処理});
こうなります。
超短いですね。
どちらも「実行させたい処理」を省略して書いてますが、
ここの内部処理の書き方でもコード量に差が出てくるはずです。
要素にカーソルが乗ったときの処理
次の処理を行うコードを書きます
ブラウザに読み込まれたHTMLの
id属性にtestが設定されている要素に
マススカーソルが乗った時に
処理を実行する
まずはJavaScriptから
document.getElementById('test').addEventListener('mouseover', function() {実行させたい処理});
引数が違うだけで、クリックと一緒ですね。
jQueryで書くと、
$('#test').hover(function(){実行させたい処理1},function(){実行させたい処理2});
こうなります。
いやいや、なんか処理２つ書いてるんですけど、コード量増えてるんですけどと思ったそこのあなた！
私も同じ思いでした。
これは実は
引数１の処理がマウスが乗った時の処理
引数２の処理がマウスが外れた時の処理
を書いています。
つまり、JavaScriptで言うところのこの２つの処理
document.getElementById('test').addEventListener('mouseover', function() {実行させたい処理});
document.getElementById('test').addEventListener('mouseleave', function() {実行させたい処理});
を
$('#test').hover(function(){実行させたい処理1},function(){実行させたい処理2});
この１行で済ませているわけです。
ヤバくないですか！（語彙力のなさｗ
jQueryで要素にアニメーションを付ける
とは言っても何も難しい事はありません。
何故なら、全てメソッドとして用意されているからです。
すばらしい。
Effects | jQuery API Documentation
公式のアニメーション一覧です。
例えば要素をフワっと表示させたり、フワッと消したりしたい場合は
フワっと表示
$('#test').fadeIn();
フワっと非表示
$('#test').fadeOut();
これ、だけです。
自分で０から書こうとしたら、
CSSを操作するコードを結構書く必要がありそうなものですが、
たったこれだけで素敵な動きが付けられるなんて感動ですよね。
今日のまとめ
- イベントの監視やアニメーションも殆ど要素指定＋メソッドで完結
- jQueryが使えるだけでも時間短縮に大きな貢献がある
ここまで学習してきて、JavaScriptもjQueryも色々な処理を書いていますが、HTMLの要素や属性とCSSを動的に変化させているだけなんですね。
それがページに動きをつけられるという意味と、今更理解したわけです。
では、また。
