目次：ｊQuery入門

jQueryは人気のAjaxライブラリーの一つです。
ただプラグインを読み込むだけじゃ勿体無い！less write do moreがコンセプト！
もっと簡単に、もっとたくさんのことをやろうじゃないか。今こそちゃんとjQuery入門して、高機能AjaxライブラリjQueryをとことん使い倒そう！

• jQuery日本語リファレンスを使って実際にjQueryを書いてみよう
• さあ！jQueryを使ってみよう

jQuery日本語リファレンスを使って実際にjQueryを書いてみよう

jQuery日本語リファレンス

jQuery日本語リファレンス
今回からjQuery日本語リファレンスを使って、実際にjQueryで処理を書いてみることにします。
jQuery日本語リファレンスはあなたが日本人でjQueryを使うなら、このサイトはおそらく最もお世話になるであろうサイトです。

jQueryAPIリストを大きく分ける

jQueryのAPIリストを見ると、関数のようなものが大量にあり、まず何からしていいのかが分かりません。そこでAPIリストを大きく分けてみることにします。

APIをざっくり分けるとこうなる

Selectors(要素の選択)	#id、element、.class、*など。	$("#hoge").css("color", "red"); *idがhogeのテキストを赤くする
Attributes(属性)	attr(name)、attr(properties)、attr(key,fn)、removeAttr(name)	var img = $(“img”).attr(“src”); *imgタグのsrcを取得しています
Traversing(要素を選択したり、孫ザをチェックしたり)	css(name)、css(properties)、css(name, value)	var img = $(“img”).attr(“src”); *imgタグのsrcを取得しています
Manipulation(挿入)	append(content)、appendTo(content)、prepend(content)、prependTo(content)
CSS(CSSの変更、見た目に関すること)	append(content)、appendTo(content)、prepend(content)、prependTo(content)	$("#hoge").css("color", "red"); *idがhogeのテキストを赤くする
Events(マウスやロードなどユーザーの動作に合わせて発動)	ready(fn)、click()、blur()、focus()、load()、submit()、hover(over, out)、toggle()
Effects(エフェクト アニメーション効果など)	show()、hide()、fadeIn()、fadeOut、animate()
*1Ajax(HTTP通信など)	load()、jQuery.get()、jQuery.removeData(elem)

*1:個人的にはAPIのうち　Ajaxについてはあまり高頻度に使ってはいませんがページを特定の場所に読み込んだり、JSON形式のデータの通信を行ったり出来ます。
使い方にもよりますが、RSSのパーツを読み込んだり、ブログパーツのような形で部分的にデータを読み込ませることが可能です。

jQueryの基本的な使い方

jQueryで何かしようと思った場合(普通のjavascriptでも)自分のやりたいことを日本語で書いて、それをAPIに置き換えればいいんです。

何をどうしたらどんな風にしたいかってね。

下記のように毎回表で置き換えると分かりやすいかもしれません。
『何を』はSelectors、『どうしたら』はEvents、『どんな風に』はEffectsといった具合に。
正確にはもっとたくさんあるんだけど、初級レベルならこれだけで何でも作れます。

何を(Selectors)	どうしたら(Events)	何がSelectors	どんな風に(Effects)
pタグを	クリックしたら	クリックされたpタグ自身が	フェードアウトする
$(‘p’)*2	click(fn)fnとはfunctionのこと	$(this)自分自身のこと	fadeOut([speed], [callback])

*2$(‘p’):とはjQuery(‘p’)の省略系。
Selectorsなら、jQuery日本語リファレンス　Selectorsの欄から自分のたりたいことにマッチしたAPIを探せばいいんです。ただそれだけ。

ではこれはどう書けばいいでしょうか

赤字の～したらはfunction(){}として置き換えられます。

先ほどの例をjQueryで書いてみよう

書き出しはこれ。ready(function(){この中に処理を書く})と、DOM要素全てが読み込まれてから処理が開始されるんでしたね。
もし、</body>の直前に書くことが可能でしたらそれでもかまいません。

jQuery書き出し

<script>

  $(document).ready(function(){
 });

</script>

クリックしたら、クリックされたほうの処理はclick()この括弧内に書いていきます

$(document).ready(function(){
$("p").click(function () {

$(this).fadeOut("slow");

});
});

どうですか？簡単でしょう？
慣れていないうちは、このfunction(){}を見ただけで難しく考えてしまいますが、(クリック)したらの『～したら』という接続的な役割をしているものと考えればさほと難しくありませんね。
クリックされた方自体の処理は、click()の中のfunction内に書いていけばいいのです。

基本的な処理の書き方は以上です。後はDOM要素をどのように選択するかさえ掴めれば、大抵の処理は可能になります。
と、いうわけで次回は様々なSelectorsの勉強をしていきたいと思います

さあ！jQueryを使ってみよう

Google Libraries APIより、jQueryを読み込み

まずはjQueryの読み込みから。
下記URLにてGoogleAPIより最新版のｊQueryをお借りすることが出来ます。
当然自分のサーバーに設置してあげる方が効率がいいわけですから、最終的には自分のサーバーへ置くのがいいでしょう。このコーナーのサンプルのjQueryは下記URLのものを利用しています。
http://code.google.com/intl/ja-JP/apis/libraries/devguide.html#jquery
なお、最新版以外も設置することが可能です。
view older versionsのリンクをクリックすると、バージョンが出てきますから、
https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
数字を自分の好みのバージョンに書き換えることで　古いバージョンのjQueryを読み込むことが可能です。
当然古いバージョンのjQueryでは使えないメソッドもありますから注意が必要です。(メソッドが何かは後々やっていきますね)

人気Ajaxライブラリ群を手軽に、そして無制限に貸してくれるのがGoogle AJAX Libraries API

jQuery本家からダウンロードする場合

もちろん、jQueryをダウンロードして、自分のサーバーや、ローカル環境に設置して読み込むことも出来ます。
本家サイトからjQuery本体をダウンロードする場合、必ずMinified and Gzippedをダウンロードします。これは安定かつ、改行を全て排除して圧縮済みのファイルです。反対にUncompressed Codeは改行も、コメントアウトも大量に入っており、ファイルそのものも重たいです。
自分でさらにカスタマイズして使いたいプロフェッショナル向けというところでしょうか。

jQueryの読み込みと簡単なスクリプトの実行

ではｊQueryを読み込んで、簡単なスクリプトを実行してみます。
全体の読み込みが完了してから

の中身をalertの中に呼び出します。

<script type="text/JavaScript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/JavaScript">

jQuery(document).ready(function(){

alert(jQuery('p').text());

});

</script>
<p>あああああああああ</p> 

jQuery(document).ready(function(){});の意味

多くのWEBデザイナーの方はjQuery(document).ready(function(){});の意味を理解されていません。他ブログの解説には『ｊQueryの書き出しの決まり文句』としている場合がありますが、それは間違いです。

『DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。』とあります。

DOMって何さ

Document Object Modelの略称のことで、HTMLやXML文書を取り扱うためのAPIのことです。
(さらに意味が分かりませんね)
下記のソースコードのあいうえおをかきくけこに変更したい、これがDOM操作です。

ほぼ全てのブラウザでデフォでDOMはあらかじめ扱えるようになってありますから、DOM操作をするにあたって特別な設定はありません。

ready()の解説に戻りますよ～

つまりですね、ready(function(){})の中に書いたものは、jQuery(document)の読み込みを待ってから、処理を実行するということです。
(HTMLやCSS、画像など、WEBページの表示に必要なものを一通り読み込んでから)

window.onloadとの決定的な違い

よく通常のJavascirptで使われる
window.onloadとは決定的な違いがあります。それは、ウィンドウ(ページが)開かれた瞬間に処理を実行されるので、もし重たい処理が実行されてしまえば、処理が完了するまで一切WEBページのHTMLや画像、CSSは読み込まれません。これはユーザビリティを考えると、とてもいいことですね。

jQuery(document).ready(function(){});を使わない方法

ready()を使わなくても、jQuery(document).ready(function(){})と全く同じことをする方法があります。(ソースコードはより短いほうがいいですものね)
それは、欲しい処理を、</body>の直前に書くということです。
HTMLやCSS,もちろんJavascriptは上から順に読まれていきます。
つまり、jQueryでの処理も一番最後に書いてあげればready()メソッドを使わないでjQuery(document).ready(function(){})と同じことが出来るわけです。

<script type="text/JavaScript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<p>あああああああああ</p> 

<script type="text/JavaScript">

alert(jQuery('p').text()); 

</script>

redy() メソッドを使えばどこに処理を書いても、DOMの読み込み完了してから処理が実行できますし、処理を</body>の最後に書くことが出来たら、それもまた同じことです。
どちらも好きなほうを使ってください。
なお、このサイトのサンプルではredyメソッドを使う方向で対応します。
(なんかjQuery使ってる感がするから)