① 体験する事から始めよう

⇒サンプルファイルを開いて中身を確認してみる

② 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');
    });
});

⇒【Google検索】jQuery イベントタイプ

構文 .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()メソッドよりも前に記述する
（後ろに書くと即座にキャンセルされるのでアニメーションしなくなる）

⇒サンプル・デモサイトはこちら

⇒【公式】jQuery 最高の教科書の購入はこちら