jQueryをもっと理解する

jQueryを理解するというより、jQueryからjavascriptへとシフトしていく上で知らざるを得ないこと？をまとめていきます。jQuery本を読んでて、読んでいるときは何となく理解していたことが後でほかの何かを見てた時に「あ～」とか思うことってあると思うんですが、それです。（あくまで自分の場合）

jQueryの$関数

$(function(){
	$("#z1").css("marginLeft","20px");
});

こんな感じの命令を何回か書いていると、そのうちzenbackとかを入れるときにコンフリクトの問題に直面して$の意味について考えさせられることがある。

$とはjQueryと同じなんだと。alert($);で返されるのがfunction・・・という関数であるということをその時に知ります。

$()っていうのは関数であることがわかると、プリロードの時の$(<img>)で要素を生成するといっていた意味もわかるし、$(<p>あいうえお</p>)で要素生成も可能なこともわかった。

$関数と中にhtmlのタグとして解釈できる文字列を入れるとそれは要素生成で、$関数の中にDOM要素を入れるとその要素はjQueryオブジェクトに変換されるというカラクリだった。

jQueryの別の構文

jQueryのイベントを定義する方法は、$("セレクタ").click(function(){});とする方法以外に、$("セレクタ").bind(click mouseover,function(){});とする方法があります。

単一のイベントであれば前者の方法が圧倒的にらくだけど、複数のイベントを定義したい場合は後者の記述方法を使用しなければなりません。もちろん後者の記述方法で単一のイベントを記述することもできます。

この書き方は、javascriptでいうイベントリスナに該当します。

要素を指定方法

$(function(){
	$("#z1 div.z2").css("marginLeft","20px");
});

まず大前提として、セレクタは"（ダブルクォート）か'（シングルクォート）でくくらなければならない。

$関数の中にこんな感じの子孫セレクタを入れることがあると思うが、この形は、

$(function(){
	$("div.z2","#z1").css("marginLeft","20px");
});

のようにカンマで区切って書いても書いても同じ意味になる。記述する順番が逆順になることに注意する。

これがわかると、「$("#z1",this).css・・・」がthisの子孫のidがz1の要素という意味になることがわかる。

では、要素を複数並べたいときはどうするのかというと、上と似た形になるが、

$(function(){
	$("#z1,#z2").css("marginLeft","20px");
});

のようにクォートの中にカンマ区切りで区切ってあげればよい。

ところでクラスの複数指定は？というと、

<div class="z1 clearfix";>

のように半角スペースで区切るだけでよい。

thisとは？

$(function(){
	$("#z1 div.z2").click(function){
		$(this).("marginLeft","20px");
	});
});

こんな感じで最初出てくると最初躓くのが普通ではないだろうか。

thisがでてくるのは必ずfunctionの中で、thisはそのイベント（ここではクリック）を引き起こした要素（ここでは#z1 div.z2）と同じ意味になる。ただし、ここで注意するのは該当する要素が複数あったとしても、クリックイベントを引き起こした要素だけが該当するということです。

jQueryにおけるthisはセレクタなんだけど、javascriptのthisはその関数のことを指します。

return falseって？

$(function(){
	$("a").click(function){
		$(this).("marginLeft","20px");
	return false;
	});
});

なんでaに始まるイベントにはreturn falseと書くとリンクが無効化できるのか？

returnというのはjavascriptのfunction内で返り値を返すものです。それがfalseだから、リンクが無効になるわけです。return trueってのもあるし、return hogeみたいのもあるし、ただのreturnだけってのもある。

falseは数字でいうと０、trueは１、何も返さないはundefinedです。この辺はjavascriptの型の話になるので割愛しますが、要はこのクリック関数は値としてfalseを返す関数だよってことです。

first-childと:firstの違い

IE6がfirst-childに対応していないから、どうしてもこのスタイルを使うためにはIE6だけスターハックするか、javascriptでスタイルを定義するかのどちらかになってしまうわけですが、区別が非常にわかりづらいです。

簡単に言えば、firstフィルターはすべての中で一番、first-childは共通の親を持つものの中で最初の要素を選択します。

クラスに30人いて1番の生徒を指定するのがfirstフィルター、そのクラスに双子がいて、うちに帰って家族の中で（双子の中で）一番を指定するのがfirst-childという感じです。30人全員一人だったら全員がfirst-childに該当します。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>