jQueryの基本構文
jQueryの基本的な記述は次のように書きます。
jQuery(“セレクター”).メソッド(引数)
一般的には少し省略した書き方をします。jQuer部分を$にします。
$("セレクタ").メソッド(引数)
jQuery部分を$に省略するとまずいのはWordPressで使用するときです。既存JQueryファイルには、他jsライブラリファイルとの競合(コンフリクト)を回避する設定「noConflict:function(X)」が記述されています。WordPressでjQueryを使用する場合はjquery部分を省略しないで記述します。
実際に使用してみましょう。
次のようなHTMLコードがあります。
<ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> </ul>
#firstだけ文字色を赤にしてみます。
サンプルのHTMLのbodyの終了タグの前に次のコードを記述します。
<script type="text/javascript"> $("#first").css("color","red"); </script>
この基本構文は何をやっているのか少し詳しくみておきましょう。
(理屈が嫌いな方はこんな書き方をすればいいのだと覚えてしまいましょう)
$(“セレクタ”)とすることでjQueryオブジェクトの作成をおこなっています。
$(“セレクタ”)関数の戻り値はjQueryオブジェクトです。これはあたかもDOMのような振る舞いをしますが、DOMではありません。そのためjQueryオブジェクト経由でDOMメソッドを直接呼び出すことはできません。
これはDOM要素をjQueryオブジェクトに変換するような用途で利用します。
はい、何を言っているのかよくわかりませんね。
もう少し具体的にみていきます。
var mydom = $("li");
これでmydomにjQueryオブジェクトが代入されます。
この代入された値、liが複数存在する場合は配列状態で格納されます。これがDOMに似ているがDOMではないよということです。
これはあくまでjQueryオブジェクトです。
ではこれをDOM要素に変換するにはどうすればよいのか?
jQueryオブジェクトの集合に対して、.get()メソッド(jQueryメソッドのget())を実行すると、jQuery オブジェクトではなく、DOM オブジェクトの配列が返されます。
逆にDOMオブジェクトをjQueryオブジェクトにするのは簡単で、DOMオブジェクトに$()をつけるということです。
この件については次回に詳細な例を載せて更に見ていきます。
$(“セレクタ”)のセレクタはCSSで使用するセレクタのことです。CSSで使用するセレクタがそのまま使用することができますのでHTMLコーダーの方はなじみやすい仕様になっています。
$(“#first”)とすることでjQueryオブジェクトが作成され、id=”first”をjQueryで操作できるようになります。
jQueryオブジェクトができあがるとオブジェクトを操作する仕組みが必要になります。
オブジェクトを操作するには「メソッド」という仕組みを使います。jQueryオブジェクトもメソッドで操作します。
オブジェクトとメソッドはドット(ドットシンタックス)を挟んで記述します。
jQueryオブジェクトが何をする(メソッド)という最小限の処理ができます。
css(“color”,”red”)はメソッドです。
このメソッドはcssプロパティの値を設定するものです。
colorプロパティの値をredとしたわけです。
css(name, value)
キーと値を引数に渡して、要素のstyle属性を設定します。
valueに数値が入った場合、自動的に単位はピクセルとみなされます。
メソッドの使い方などはリファレンスを参考にします。
ready関数の役割
スクリプトの実行タイミングを制御するのが ready というJQuery関数です。
先ほどの例ではjQueryオブジェクトとメソッドの基本構文をbodyの終了タグの前に記述しました。
もし、このスクリプトをhead内に記述したらどのようになるでしょうか。
この記述をするとスクリプトが読み込まれた時点ではbodyの内容がまだ読み込まれておらず、スクリプトの指示が解らずに意図した通りに動いてくれません。
そのため、head内にスクリプトを記述する場合はbodyをすべて読み込んだ後に実行する仕掛けが必要になります。
その仕掛けがready()という関数になります。
ready()の使い方は以下のとおりです。
$(document).ready(function(){ $("セレクター").JQueryの処理 });
通常はもっと簡略化した方法で記述します。
$(function(){ $("セレクター").JQueryの処理 });
jQueryでは、ready関数に設定するfunctionは無名関数(リテラル関数)を利用して直接設定します。
無名関数とは 関数リテラルとも呼ばれます。無名関数は関数を一度定義してその関数を呼び出す場合と違い関数名を付ける必要がありません。例えば一度しか使われないような関数を一つ一つ定義していくと、関数名が他の関数や変数名とかぶっていないかどうかを気にしなくてはなりません。無名関数であれば関数名を使用しませんのでその心配が不要となります。一度しか利用されない関数というのはイベント処理やコールバック関数などがあります。
結局jQueryの基本構文はコレ!
$(function(){ $("セレクター").メソッド(引数); });