【jQuery最高の教科書】第2章 3ステップではじめるかんたんjQuery入門
① 体験する事から始めよう
⇒サンプルファイルを開いて中身を確認してみる
② CSSのスタイルを変更してみよう
⇒jQueryを使用してCSSのスタイルを変更する
構文
$(セレクタ).メソッド（プロパティ, 値）;
コード例
$('#item').css('color', '#000');
jQueryの最も基本的な構文の解説
・何処を（セレクタ）、どの様に（メソッド）、
どうする（プロパティ、値）のか
・$()はHTML要素をもとにして、
jQueryの独自の要素を生成する機能を持っている関数
・$関数によってjQuery形式に変換された要素をjQueryオブジェクトと言う
※メソッドと関数の違いについて
※.(ドット)と;(セミコロン)の役割
・.(ドット)はjQueryオブジェクトをつなぐ
・;(セミコロン)はjQuery(Javascript)の文の終わりを表す
HTMLの準備が整うのを待つ仕組み
構文
$(function() {
HTMLが読み込まれた後に行う処理
});
css()メソッドで現在のプロパティ値を取得、一括変更する方法
構文(現在の値を取得する)
$(function() {
$(セレクタ).css(プロパティ);
});
※値を指定しないでプロパティのみを記述すると取得できる
構文(現在の値を一括変更する)
$(function() {
$(セレクタ).css(プロパティ,値);
$(セレクタ).css(プロパティ,値);
$(セレクタ).css(プロパティ,値);
});
※以下の様に指定した方がスマートに記述できる
$(function() {
$(セレクタ).css({
'プロパティ' : '値';
'プロパティ' : '値';
'プロパティ' : '値';
});
});
③ タイミングをコントロールしてみよう
・特定の要素にマウスオーバーしたタイミング
・特定の要素からマウスアウトしたタイミング
・特定の要素をクリックしたタイミング
・マウスが動いたタイミング
・ウィンドウのサイズが変わったタイミング
・スクロールしたタイミング
.on()は特定の出来事(イベント)が起こるタイミングで
実行したい命令を設定するメソッド
イベントの種類のことをイベントハンドラと言う
.on()メソッドの第1引数にはイベントタイプを渡し、
第2引数にはイベントハンドラを渡す
構文 .on()メソッド
.on('イベントタイプ', イベントハンドラ);
構文 イベントハンドラ
function(){
任意の処理
}
構文 タイミングをコントロールする
$(function() {
$(セレクタ).on('イベントタイプ', function(){
任意の処理
});
});
例
$(function() {
$('#item').on('click', function(){
$('#item').css('color', '#f00');
});
});
構文 .on()メソッドを複数指定する
$(function() {
$(セレクタ).on('イベントタイプ', function(){
任意の処理
});
$(セレクタ).on('イベントタイプ', function(){
任意の処理
});
});
例
$(function() {
$('#item').on('mouseover', function(){
$('#item').css('color', '#f00');
});
$('#item').on('mouseout', function(){
$('#item').css('color', '#000');
});
});
メソッドチェーン
メソッドをチェーン(鎖)の様につなげて記述し、実行するプログラム手法
構文
$(セレクタ).メソッドA().メソッドB().メソッドC()・・・
例
$(function() {
$('#item')
.on('mouseover', function(){
$('#item').css('color', '#f00');
})
.on('mouseout', function(){
$('#item').css('color', '#000');
});
});
メソッドチェーンのメリット
・$関数の記述が一回で済むため、コードがシンプルになる
・プログラムの処理速度が上がる
④ アニメーションさせてみよう
jQueryは予め用意されているanimate()メソッドの使い方を
覚えるだけで簡単に実装できる
構文 アニメーション①
.animate({
'CSSプロパティ': '値',
'CSSプロパティ': '値',
'CSSプロパティ': '値'
},
アニメーション時間(ミリ秒)
);
構文
$(function() {
$(セレクタ).メソッド('イベントタイプ', function(){
$(セレクタ).animate({
プロパティ: 値,
プロパティ: 値
},
アニメーション時間(ミリ秒)
);
});
});
例
$(function() {
$('#item').on('click', function(){
$('#item .inner').animate({
opacty: 0,
fontSize: '20px'
},
1200
);
});
});
※animate()メソッドだけではアニメーションできない
CSSプロパティもいくつか存在する
※jQuery UIを組み込みすると対応できるものもあるが、
transformなどは対応できない
※animate()メソッドはCSSオブジェクトとアニメーション時間
以外にも様々な値を指定できる
基本的なアニメーションを指定する際に主に使用する引数は2つ
「イージングの種類」と「アニメーション終了時に実行する処理」がある
構文 アニメーション②
.animate({
アニメーション用CSS
},
アニメーション時間(ミリ秒),
'イージングの種類',
function() {
アニメーション終了時に実行する処理
}
);
例 イージングの種類
$(function() {
$('#item')
.css('top', '-100px')
.on('click', function(){
$('#item .inner').animate({
top: '100px'
},
1200,
'liner'
);
});
});
例 アニメーション終了時に実行する処理
$(function() {
$('#item')
.css('top', '-100px')
.on('click', function(){
$('#item .inner').animate({
top: '100px'
},
1200,
function() {
$('#item .inner').animate({top: '0px'}, 500);
}
);
});
});
animate()の仕様に関する注意点
animate()メソッドでは、アニメーション中の同じ要素に対して、
別のanimate()メソッドを実行してもキャンセルされず、
順番待ちする仕様になっている
※二つのアニメーションを同時にさせたい場合は
最初のアニメーションをキャンセルして
次のアニメーションを実行させる
アニメーションを途中でキャンセルする方法
stop()メソッドを記述することでアニメーションをキャンセルできる
※stop()は要素のアニメーションを停止するメソッド
引数にはtrue、またはfalseを指定する
（trueはキャンセル、falseはキャンセルしない）
例
$(function() {
$('#item')
.on('mouseover', function(){
$('#item').stop(true).animate({
top: '100px'
},
1200
);
});
.on('mouseout', function(){
$('#item').stop(true).animate({
fontSize: '20px'
},
500
);
});
});
※stop()メソッドはanimate()メソッドよりも前に記述する
（後ろに書くと即座にキャンセルされるのでアニメーションしなくなる）