1)jQuery(ジェイクエリー)って何だろう?
jQueryはJavaScriptが一つにまとまったライブラリ何です。
2)jQueryって何ができるの?
たとえばWebサイトにアニメーションを付けたり、CSSやHTMLをリアルタイムで編集したり、Ajax(非同期通信)を簡単にやることができます。
3)こんな所でjQueryが使われてるんだよ!
たとえばまがりや.netの商品詳細ページ!
⇒参考サイト:まがりや.netの商品詳細ページ
写真のサムネイルをクリックすると、フェードの効果をしながら、写真が切り替わる。
これ、実はjQueryを使ってやってるんです。
4)jQueryの使い方
jQueryを使うには本体のJavaScriptファイルをダウンロードします。
⇒jQueryのダウンロード先:http://jquery.com/ (jquery-1.4.2.min.js)
ページ右側の「Download(jQuery);」を押すとソースコードが表示されるのでブラウザで「名前を付けてページ保存」をする。
すると、パソコンに「jquery-1.4.2.min.js」というファイルがダウンロードされている。
これをHTMLに書いて、jquery-1.4.2.min.jsを読み込まされる。
以下のコードをの直前に書いてあげる。
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
するとHTMLにjQueryが読み込まれて使える状態になる。 ただ、これだけだと何もすることができない。
5)jQueryに命令してみる。
HTMLに読み込んだだけだと何も起きない。 命令文(コード)を書かかないといけないのです。 ちょっと試しに以下の命令文を 先ほど読み込んだjQueryの下に書いてみよう。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //ページがロードされたら実行
$("body").click(function() { //bodyタグをマウスでクリックしたら
$(this).animate({opacity: "hide"}, "fast"); //bodyタグ(this)、アニメーション「すばやくフェードアウトしながら透明になる」
});
});
</script>
ページを開いてどこかクリックしたら全体が透明になり消える命令文がかけました。
この様に命令文を書いて指示をすることで、簡単にアニメーションができます。
