イモムシでjQuery入門

こんにちは。kamecoです。
androidアプリをhtmlベースで作ったりしています。
それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。
ということで、jQueryを覚えよう！

電卓で入門とか色々考えたのですが、
私が覚えた方法で。。
myベストイモムシを作ろう！！！！
とりあえずあなたのイモムシも用意しよう。
ダウンロード

とりあえず名前を付けると愛着がわきます。
うちの子は「クロスケ」です。

↑クロスケ。かわゆす。
練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。
つまめます。動きます。顔変わります。などなど。
クロスケのjsもブログを書きながら新調してあげようと思います。

イモムシのhtml解説

これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。
cssやhtmlの技術については解説しません。
ただ、css3の角まるがあったからイモムシが生まれた。。ということだけ。。

<html lang="jp"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>imomushi jQuery</title> 
<meta charset="utf-8">
<link rel="stylesheet" href="imo.css" type="text/css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="denchi.js"></script>
</head>
<body> 
    <div id="niwa">
        <div id="imomushi">
        <span class="tsuno">/</span>
        <span class="eye">-</span>
        </div>
    </div>
</body>
</html>

javascriptの記述場所

javascriptを記述場所は2カ所あります。
cssと大体同じなのですが、ページ内に書く方法と、外部に書いて呼び出す方法。
今回は7行目でdenchi.jsを呼び出して使用しています。
内部に記述する場合は下のようになり、bodyにもheadにも記述できます。

jQueryの読み込み

jQueryはjavascriptのライブラリで、
javascriptをとても使いやすく、覚えやすくしてくれます。
特にcssが書ける人にとってはとてもわかりやすくなると思います。

htmlの6行目でjQuery本体を呼び出しています。
今回はgoogleAPIで、自分のサイトにはダウンロードせず、
googleさんのファイルを呼び出す方法をとりました。

でも、htmlをスマフォアプリにしたい場合などは、
オフラインで使用され、googleにアクセスできない可能性があり、
jQueryのサイトからダウンロードして、imo.jsと同じように呼び出す方がいいと思います。
■jQueryサイト

jQueryの記述場所

あとはjQueryを使える呪文の間にコードを書くだけです。
「$(document).ready(function(){」は「$(function(){」という形に省略もできます。

$(document).ready(function(){ //ページを読み込んだら処理を開始
    //ここに記述します
});

準備はととのいました！
では次回は、jQueryのセレクタです。

jQueryでオススメの情報

しっかりjQueryを覚えたい方は下の本やサイトがオススメです。
■はじめてのjQuery(スライド)
■jQuery 日本語リファレンス
■Web制作の現場で使う jQueryデザイン入門(本)

デザイナーがイモムシで覚えるjQuery　まとめ

■イモムシでjQuery入門
■イモモのパーツ(セレクタ)
■イモムシを元気にしよう(メソッド)
■エスナで復活させよう１(イベント)
■エスナで復活させよう２(変数)
■魔法を短縮しよう！(function)
■cssのAnimationsでファイアー！
■定期的にまばたきをさせよう！(タイマー)