JavaScript がある程度わかっていて、これから jQuery をはじめようとしている人、および、サンプルコードをコピペしたり、プラグインで jQuery は使っているけど、結局 jQuery ってなんだかよくわかっていない人向け。
JavaScriptの基本
JavaScriptは、HTMLとCSSを操作するプログラミング言語です。
操作する要素、操作する内容、操作するタイミングの3つを強く意識することが大切です。
また、”操作する”というのは、具体的には、要素の「属性」の値を変更することが多いので、その概念もよく理解しておきましょう。
以下のHTMLでは、「a」が要素で、「href」と「target」が属性、「http://hijiriworld.com/web/」と「_blank」がそれぞれの値です。
<a href="http://hijiriworld.com/web/" target="_blank">リンク</a>
以下のCSSでは、「a」が要素で、「color」がプロパティ（属性）、「red」がその値ですね。
a {
color: red;
}
jQueryの書き方
JavaScriptは、HTMLの読み込みが終わった後に実行される必要がある為、jQueryの処理は以下のように記述します。
これは決まりごとです。
$(document).ready(function(){
ここにjQueryの処理を書く
});
省略形でも可↓
$(function(){
ここにjQueryの処理を書く
});
jQueryの基本構文
$(セレクター).イベント(function() {
$(セレクター).命令
});
操作する要素を指定する「セレクター」、操作する内容の「命令」、操作するタイミングを決める「イベント」の3つで構成されています。
ここまで覚えたら、jQueryは分かったも同然。
そして、この基本構文を完璧に覚えておくことが超重要です。
寝てても酔っ払ってても思い出せるくらい頭に叩き込みましょうッ
基本構文を覚えたら、「セレクター」の指定方法と、「命令」と「イベント」にどんなものが用意されているのかを覚えていけば、いろんなことができるようになります。
プラグインの基本構文
プラグインは以下のような形式で、メソッド名（命令名）を決めて、「jquery.メソッド名.js」という名前のファイルを作成します。
プラグイン内のセレクターは、イベントが発生した要素を取得する $(this) にしておきます。
> jquery.メソッド名.js
$.fn.メソッド名 = function() {
ここに処理を書く
}
このファイルを読み込んで、メソッドを呼び出せはOKですね。
もちろん、オプションとして引数も設定できます。
$(function(){
$(セレクター).メソッド名();
});
ということで
jQueryはサンプルから学ぶのが一番の近道ですが、どんなサンプルもプラグインも、すべてはこの基本構文に基づいて書かれています。
基本構文をしっかり理解すれば、サンプルコードをコピペするだけの生活から開放されるでしょう。また、世の中にたくさんある素晴らしいプラグインのコードも読めるようになるはずです。たぶん