jQuery入門講座使い方-セレクタを自作する

セレクタを自作する

：（コロン）を使用するセレクタ

セレクタには:（コロン）を使用して対象を絞る仕組みがあります（リファレンス：セレクタ）。この：を使用した要素の絞り込みは、簡単に自作（拡張）することができます。セレクタの拡張に入る前に:（コロン）を使用したサンプルを確認しましょう。サンプル（04/03_01.html）を開いて下さい。

body内にはリストが作成されており、jQueryには以下の様に記述されています。着目するのはセレクタの：（コロン）です。今回はfirstを利用しました（この設定はcss3にもあります）。

$(function () {
	$("li:first").css("background-color","#F99");				
});

:firstを使用すると:（コロン）の前に記述した要素のうち１番最初の要素だけを選択することができます。サンプルではcssメソッドを利用して背景をピンクにしているので、ブラウザ上では１番目のリストだけ背景がピンクになります。このように要素に続いて：を使用することで、対象を絞り込むことができるのです。

セレクタの自作

セレクタを自作する構文は途中まで決まっています。サンプル（04/03_02.html）を開いてjQueryを確認してください。まず着目するのが下記のextendメソッドです。これはセレクタに対して利用するのではなく$つまりjQueryに対して直接利用し、jQueryの機能を拡張します。$とextendの間にある.（ドット）を忘れないようにして下さい。

$.extend($.expr[":"], {

続いてはextendメソッドの（）内、第1引数に記述した以下の部分です。exprはメソッドではなくjQuery上の表現を指定しています（exprはexpression「表現」の略です）。この部分で:（コロン）を利用したセレクタを指定することで、:（コロン）を使用したセレクタを追加できるのです。この部分に関しても$とexprの間の.（ドット）を忘れないようにして下さい。

$.extend($.expr[":"], {

そしてextendメソッドの第2引数には以下の様にobjectオブジェクトを指定して追加したい内容を記述します。追加したいセレクタの名称をプロパティとして記述（サンプルではlargeArea）、そして要素を絞り込む仕組みを値としてfunctionで設定します。

$.extend($.expr[":"], {
	largeArea: function(elem) {
		var myWidth = $(elem).width();
		return myWidth >= 80;
	}
});

objectオブジェクトを利用していることが分かりやすいように、あらかじめobjectオブジェクトを作成したサンプル（04/03_03.html）も用意したので合わせて確認して下さい。

下記１行目でmySelectorObjという名のobjectオブジェクトを作成し、２行目でlargeAreaという名のプロパティを設定します。この値にはfunctionを代入し、絞り込みの機能を記述します。

mySelectorObj = new Object();
mySelectorObj.largeArea = function(elem) {
	var myWidth = $(elem).width();
	return myWidth >= 80;
}

そして以下の行で、作成したobjectオブジェクトを設定しています。ソースの量が増えるので余り利用しない書き方ですが、サンプル04/04_02.htmlよりも構文を理解しやすいと思います。

$.extend($.expr[":"], mySelectorObj);

絞り込みたい内容を記述

難しく感じるのは絞り込みの処理を記述しているfunction内の部分です。まず忘れてはいけないのがfunctionの引数（下記ソース１行目のelem）です。ここにはjQueryによってページ内の要素（div等）が全て順々に送られてきます。

この送られた要素をセレクタとして利用し、絞り込みに残すか否かを決めていくのです。サンプル（04/03_02.html）は何を、どの様に調べているかを確認しましょう。まずは3行目です。ここではwidthメソッドを利用して、ページの要素（elem）の幅の値を取得して変数myWidthに格納しています。

$.extend($.expr[":"], {
	largeArea: function(elem) {
		var myWidth = $(elem).width();
		return myWidth >= 80;
	}
});

送られてきた要素を絞り込みに残す場合はreturnでtrueを返します（値しない場合はfalseです）。このサンプルではreturnの部分に以下のソース4行目ように条件式を設定しています。条件式は正しい場合はtrueになり、間違っていたらfalseになります。

つまり幅が80以上だったら条件式が正しくなり、returnでtrueを返すことになります。その結果、幅が80px以上の要素が選択されるのです。次は実際に利用している部分を確認しましょう。

$.extend($.expr[":"], {
	largeArea: function(elem) {
		var myWidth = $(elem).width();
		return myWidth >= 80;
	}
});

自作したセレクタの利用

セレクタを作成する事に比べたら、利用方法は簡単です。以下の様に絞り込みたい要素に続いて、自作の:（コロン）のセレクタを記述します。このサンプルでは幅が80px以上のdivが選択され、続くtextメソッドによってdiv内にbigと表示されます。

$(function () {
	$("div:largeArea").text("big");
});

引数を利用できるようにする

：を利用したセレクタは引数が利用できます。これまでのサンプルでは要素の幅が80pxと固定されていましたが、この値を引数で自由に設定できるようにします。サンプル（04/03_04.html）を開いて下さい。まずはセレクタを利用している以下の行を確認しましょう（以下のソース２行目）。これまでのサンプルと異なりセレクタ名に続いて（）があり、その中に引数として100を設定しています。

$(function () {
	$("div:largeArea(100)").text("big");
});

つづいてセレクタを作成している部分で、どのように引数を受け取るかを確認しましょう。まず確認するのは以下の２行目、functionの引数を受け取る部分です。elemの他にiとdataObjが追加されています。このうちiにはページ内の要素の番号が入っているだけなので利用しません。dataObjだけを利用します。

$.extend($.expr[":"], {
	largeArea: function(elem, i, dataObj) {
		var myWidth = $(elem).width();
		return myWidth >= dataObj[3];
	}
});

しかしdataObjには引数以外にも色々なデータが格納されており、引数を取り出すためには以下の様に３番目の要素を指定します。このサンプルでは、今まで80と固定していた以下の4行目の部分で引数を利用しています。

$.extend($.expr[":"], {
	largeArea: function(elem, i, dataObj) {
		var myWidth = $(elem).width();
		return myWidth >= idataObj[3];
	}
});

本当にidataObj[3]に引数で渡した100が入っているか確認できるようにアラートで表示するようにしたサンプル（04/03_05.html）を用意したので確認して下さい。アラートによって100と表示されるのが確認できます。

アラートが6回表示されるのはページ内にdivが6つ有るためです。今回作成した:largeAreaはdiv要素に続けて記述しているので、ページ内にある全てのdivついて調べているのです。

これでセレクタの自作については終了です。現段階では「４章：上級アラカルト」はここで終了です（興味のあるテーマが見つかったら追加していきます）。「５章：研究」では、どの様に利用できるか分からないけれど、興味があるので研究してみた内容を紹介しています。最初のテーマはthisをコントロールするproxyメソッドです。

次のページ：5章 proxyメソッド(1)