社内講習わくわくjQuery編1 - jQueryを使ってみよう

今回の目標

読める＋書ける＝学べる

2時間ちょっとでいきなり書けるようになる訳はありませんが，書いてみないと覚えられないので，2時間かけて触ってみて独学できるようにします．

最初に，1+1=2の原理を覚える必要はないので，2=1+1でも 2=2＊1 でも 2=1/2＊4 でもいいので，やりたいことをやってみるのが一番です．

やること

• jQueryセレクタをつかってみよう
• 要素をブン回してみよう
• スライドショーの動きを追ってみよう
• 開閉メニューの動きを追ってみよう

やらないこと

• プログラムの基本（習うより慣れる）
• JavaScriptの構文（書きながら覚える）
• jQueryPluginの使い方（オプションをいじる以上のことをやろうと思うと難しい）
• thisなんてしりません
• $.eachなんてしりません
• 変数とかIFなんてわかりません

jQueryを使えるようにする

Downloading jQuery - jQuery JavaScript Library

ファイルをダウンロードして自分でファイルを配置してもいいですが，今回は手抜きでCDNから拝借します．GoogleかMSのいずれかから借りましょう．宗教上の理由でどちらからも借りたくない場合は，自分でダウンロードします．

<!-- GoogleのCDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script >

<!-- MicrosoftのCDN -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script > 

jQueryを書き始める

<script type="text/javascript">
$(function()
{
      // 処理を書く    
});
</script>

この部分は鉄板です．jQueryは $(function() { } ); の中に書く，と暗記してしまってください．

※こうやって書くと，ページを表示し始める際のブラウザの複雑な処理が終わり，jQueryを安全確実に利用できる状態になってから自分の書いた処理が実行されます．

セレクタで要素を選択して，それに処理を適用する

これが基本です．CSSの知識さえあれば，セレクタで要素を選択するところまでは簡単です．例を出しましょう．背景色をピンクにします．

$(function()
{
      $('#header').css('background-color', 'pink');
});

と，

#header {
     background-color: pink;
}

は，ほぼ似たような意味を持ちます．※実際にはjQueryによるcssの操作は，インラインスタイルとして適用されるので固有性が高いので等価とは言えません．

重要な基本はここだけです．とにかくセレクタで要素を選択して，それに対して何らかの処理を適用する，という単純な操作の繰り返しです．

簡単な処理は日本語と同じ語順で読めなくもない

jQueryは簡単な処理のうちは，日本語ライクな語順とフィットします．主語（セレクタ）のあとに述語（処理）がくるようなノリです．

パンツを隠す

$(function()
{
    // パンツを，隠す
    $('#pants').hide();
});

自分の親を見せる

$(function()
{
    // 自分の，親を，見せる
    $('#me').parent().show();
});

ボタンをクリックしたら，箱Aを消す

$(function()
{
    // ボタンを，クリックしたら
    $('#button').click(function()
    {
          // 箱Aを，消す
          $('#boxA').remove();
    });
});

簡単ですよね？？

テキストや属性を書き換えてみる

jQueryは要素を見せたり隠したり消したりだけでなく，テキストや属性を変更することもできます．

テキストの変更

正確には書き込む（追加）ではなく，入れ替え扱いです．

$(function()
{
    // ノートに般若心経を書き込む
    $('#note').text('観自在菩薩行深般若波羅蜜多時、照見五蘊皆空');
});

今のテキストを取得するときは，text()のカッコ内を空にして実行します．

属性の変更

img要素のalt属性や，a要素のhref属性など，さまざまな属性を変更できます．

$(function()
{
    // 代替テキストを変更
    $('#img').attr('alt', '新しい代替テキスト');
});

今の属性値を取得するときは，attr('alt')のように，属性名のみ指定して実行します．

スタイルの変更

冒頭のほうで既にでていましたが，スタイルも変更できます．

$(function()
{
    // ヒューマンを，高さ，200pxにする
    $('#human').css('height', '200px');
});

複数のプロパティを同時に指定することもできます．少し記法が変わります，

$(function()
{
    // 板を，黒板にする
    $('#board').css({
         backgroundColor : 'black',
         color : 'white'
    });
});

今のプロパティを取得するときは，css('property')のように，プロパティ名のみ指定して実行します．

イベントがあったときの処理

イベントを扱うということは，クリックしたら，とかホバーしたら，みたいな何かのアクションに呼応する形で，何かしらの処理を行うことになります．

クリックしたら

これまでの例にもサラッとでていましたが，一番基本的なのはクリックです．

$(function()
{
    // サムネイルをクリックしたら，
    $('#thumbnail').click(function()
    {
         // フルサイズを表示する
         $('#fullsize').show();
    });
});

ホバーしたら

ホバーは，マウスが乗ったときと，マウスが外れたときの処理をセットで指定できます．functionという処理単位を乗ったとき，外れたときで，合わせて2つ指定できます．

$(function()
{
    // サムネイルの
    $('#thumbnail').hover(function()
    {
         // 上にマウスがきたら，フルサイズを表示する
         $('#fullsize').show();
    }, function()
    {
         // 上からマウスが外れたら，フルサイズを隠す
         $('#fullsize').hide();
    });
});

実践サンプル

わくわくjQuery編 — Gist

スライドショーとか開閉メニューです．

これでjQueryがなんとなく使えるはず！

これでjQueryの基本的な部分は把握できたはずです．あとは手を動かすだけです．

手を動かせば動かすほど，できるようになる(はずな)ので，ひたすらセレクタで要素をつかみ取って，何かの処理を適用のルーチンを繰り返してみてください．

---