jQuery始めました

お待たせしました。やっとjQueryです.+'ﾟ'+.ヾ(´ﾟ∀ﾟ)ﾉ.+'ﾟ'+.

まずはjQueryを読み込む！

jQueryを使うにはjQueryファイルをまず最初に読み込まなければいけません。
記述順に読んでいくので、jQueryファイルを読み込む前に、jQuery処理が書いてあるJSを読むと
【は？こんな処理知らんぞ】
ってブラウザが怒り狂います。
jQueryの読み込みには２パターンあります。
ひとつはファイルをDLしてきて、設置してそれを読む
もうひとつは、googleが提供しているのを読む
です。
余談ですが、僕はファイルDLして読み込む派です。
Google社員「ファイルパス書き換えちゃった(ゝω・)ｖ」
って万が一なった場合、無事死亡するからです。
便利ですけどここは信用できないからです。

jQueryのバージョンは？

バージョンはいっぱいあります。
最新を使う場合とか、ブラウザの問題とかその辺が怖いので
現時点(2014/09/18)では 1.8.3が安定しているのでそいつを使っています。

Googleから読み込む場合

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

1.8.3って所で切り替えていきます。

DLして読み込む場合

過去バージョンはもうここから取るのが早いですね。よいまとめありがとうございます
http://matome.naver.jp/odai/2138301798034832301

じゃぁjQueryを使えるように整備してあげましょう

jQueryはとあるおまじないをしてあげる必要があります。
JS部分にこのように記述してあげます。

$(function(){
  // 処理
});

これで、//処理の部分はjQueryを使えるようになりました。
何も考えずにこれからスタートなんだ、と覚えておいてください。
少し難しい事を言いますが、この形は
【DOM要素がすべて読み込まれた（操作可能になった）時に実行する(readyメソッドの省略型)】
つまり、htmlとかが全部読み込まれたら実行しますよーって事です。

htmlの準備

まぁなんでも良いので適当にaタグかなんかで作ってあげます
idまたはclassの設定はお忘れなく

jQueryの処理

$(function(){
 $('.clickClass').on('click',function()
 {
  alert('ちゃお');
 })
});

では上記順番に解説をしていきます。

$('.clickClass')

この部分では先頭に$がついています。
これを付けることによって、jQueryの処理でやりますね。っていう宣言になります
('.clickClass')これはクラス名です。
ID名やクラス名や要素名のつけかたはCSSと同じです。

$('.className') クラスの指定
$('#idName') IDの指定
$('elementName')要素の指定

$('.clickClass') までで、【clickClassのクラスが付与されている要素に対して】という意味になります

.on('click',

.(ドット)が入ってますね。
これは【メソッドチェーン】と呼ばれる使い方で、順番に処理される事になります。
で、on('click', ですが
onは、【イベントを指定された要素に付与させる】メソッドです。
onの最初の引数に 'cllick' と書いてありますが、ここで、【クリックイベントを指定された要素に付与させる】になります。
,(カンマ)で、次の引数になり、次の引数では【何をする？】を命令してあげます。

function(){(以下略)

何をする？部分は関数を指定してあげる必要があります。
特に名前もないしここだけで動けばいいよと言った時は
function (){ // ここに処理を記述 } としてあげます。
無名関数という言葉が使われます。この時点では【クリックイベントを指定された要素に付与させる。で、クリックされたらこれを動かすぜ！】となります。

alert('ちゃお')

普通のalertです。最終的に【クリックイベントを指定された要素に付与させる。で、クリックされたらalert('ちゃお')を実行する！】となります。

今回で出て来た用語について

今回出て来た用語

メソッドチェーン
イベント

あたりの説明をします。

イベント

つまり、ユーザーが何か動作したらの動作部分にあたるものです。基本的にイベントは

クリック
マウスオーバー
マウスアウト
マウスムーブ
フォーカスイン
フォーカスアウト
チェンジ
リサイズ

の８つが基本です。
他にもたくさんあるのですが、この辺が良く使う感じです。

クリック

【マウスでの左クリック】の事です。
とある要素の上でクリックされた時に何かしたい場合に使用します。

マウスオーバー

【マウスポインタが上にのったとき】の事です。
とある要素にマウスが乗った時に何かしたい場合に使用します。

マウスアウト

【マウスポインタが外れた時】の事です。
とある要素にマウスが乗って、ポインタが外れた時に何かしたい場合に使用します。

マウスムーブ

【マウスポインタが動いた時】の事です。
とある要素にマウスが乗って、乗ったままでマウスポインタが動いた時に何かしたい場合に使用します。

フォーカスイン

【その要素がフォーカスされた時】の事です。
フォーム等で使われるinput要素等で、文字入力ができる時　それが【フォーカスが当たっている状態】
となります。
その状態の時に何かしたい場合に使用します。

フォーカスアウト

【その要素のフォーカスが外れた時】の事です。
フォーム等で使われるinput要素等で、文字入力ができる時　それが【フォーカスが当たっている状態】
となります。
で、他部分をクリックしたりして、入力できなくなった時が【フォーカスが外れている状態】となります。
その時に何かしたい場合に使用します。

フォーカスアウト

チェンジ

セレクトボックスで何か選択された時の事です。
その時に何かしたい場合に使用します。

リサイズ

大きさが変更された時にの事です。
基本的にブラウザのサイズが変更された時に使用される事が多いです。