さっそくですが、jQueryを使うときは自分で処理を記述するにしても、プラグインを使うにしても、まずjQueryライブラリを読み込む必要があります。
jQueryは「jQueryを使うための準備」で説明した通り、javascriptなので、jQueryライブラリをwebページに読み込むときは、scriptタグを使います。
いつものjsファイルを読み込むときと同様に、src属性に正しいパスを記述して、読み込んでおいてください。
jQueryはjsなので、もちろんjQueryで何かしら処理を記述して外部ファイルにするときは拡張子は[.js]になります。
では、jQueryで処理を記述するときのおまじないについて説明します。
自分で処理を記述するのではなく、プラグインを利用する場合でも、何かしらパラメーターを指定しなければならなかったりするので、このおまじないとは無縁ではいられません。
$(function(){
//ここにスクリプト
})
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
jQueryのコード(スクリプト・関数etc.)を記述するときは、とにかくこれで囲ってください。
何故と考えなくても良いです。どうしても知りたい場合は、google先生にお願いしてください。解説書籍とかにも書いてます。
$(document).ready(function(){
//ここにスクリプト
})
こんな風にしている人もいます。ほかにもいろいろあります。どれでもよいです。
あとはprototypeとかmootoolsとか、他のjsライブラリと共存したいときは、別な書き方をする場合もあります。
詳しくはgoogle先生に訊いてください。
このおまじない1やおまじない2の中にはjqueryのコードだけではなく、通常のjsコードも記述できます。
$(window).load(function(){
//ここにスクリプト
})
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
ページを読み込み後に実行させたいjQueryはこれで囲みます。
jQueryのコードを書き込んだり、jsファイルを読み込んだりするのは、たいていheadタグ内だと思います。
ブラウザはHTMLソースの上から順に実行(表示)していくので、当然、headタグ内のjQueryはbodyタグの表示前に実行されるわけです。
しかし、場合によっては、ページの表示がすんでから、実行したい必要があります。
その場合はこのおまじないを使ってください。
もちろん、bodyの終了タグ直前辺りにscriptタグを持ってきて、jQueryを書き込んだり、ファイルを読み込んだりしても良いです(この場合はおまじない1の書き方でおけー)。
headタグ内に収めたい場合におまじない2を活用してください。
通常、jsはbodyの終了タグ直前に記述した方が、webページ全体の表示速度は上がるようです。しかし、表示されるより先にjs(jquery)を実行しておかなければならないこともあるので、jsをどこに記述するかは、目的に合わせて選択してください。
$(function(){
$('セレクター').jQueryの命令というかなんとゆーか;
})
jQueryの処理を記述するときの基本的な書き方です(「jQueryの命令」と言い切ってしまうと語弊があるので濁してますが・・・ここではドットより前が大事です)。
セレクターというのは、htmlのどの要素に対してjQueryを実行するかを指定するものです(タグやclass名、id名などを指定します)。
セレクターとして指定するもので、thisやwiondowなどはクォーテーションで囲みません。これらについては、ここでは説明しません。
なにか抜けると、うまく動作してくれません。とくに'(")で囲むのを忘れがちです・・・。
$('')のシングルクォーテーションとダブルクォーテーション違いは特にないです。処理速度がどーのとか、エスケープシーケンスがどーのとか、世の中にはいろいろ情報が錯綜してますが、気にしなくていいです。
ただ、同じソース上は統一した方が良いとは思います。うっかり、ごちゃ混ぜになりますが・・・。
ちなみに、jQueryだけでなく、一般的なお約束として、クォーテーションの中にクォーテーションを書いて入れ子にしなければならない場合は、シングルの中にダブルとかダブルの中にシングルとか・・・クォーテーションが入れ子になるときは、違いを明確に使い分けます。シングルの中にシングルを書くということはできません。
もちろん、シングルの閉じはシングルだし、ダブルの閉じはダブルになるので、シングルで始まってダブルで終わるという使い方はエラーになります。
入れ子にすると、ごっちゃになってしまうので、特に注意しましょう。