デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

セレクタの自作(1)

概要

フィルタタイプのセレクタを自作する

jQueryはセレクタが豊富にあり自作する必要は少ないと思うのですが、比較的簡単に作れるそうなので挑戦してみました。作成できるのはセレクタの内「フィルタ」と呼ばれるタイプです。
→リファレンス:セレクタ「フィルタ」

フィルタの特徴は:(コロン)を利用して対象を絞ることです。例えば:firstはセレクタの内の最初の要素に絞るので、以下の様に記述した場合は最初のli要素だけ背景色をピンクにします。→サンプル(make1/01.html

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

解説

セレクタの拡張

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

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

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

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

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

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

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

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

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

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

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

絞り込むための処理を記述

では絞り込むための処理を説明します。まずはfunctionの引数(下記ソース2行目のelem)についてですが、ここにはセレクタで指定されたページ内の要素(divやliなど)がDOM要素として送られてきます。次にfunction内の処理を確認します。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を返します。

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

結果として、幅が80px以上の要素が選択されます。次は実際に利用している部分を確認しましょう。

自作したセレクタの利用

自作したセレクタの利用方法は簡単です。以下の様に絞り込みたいセレクタに続けて自作のフィルタを記述します(サンプルでは:largeArea)。フィルタなので:(コロン)を忘れないで下さい。このサンプルでは幅が80px以上のdiv要素が選択され、textメソッドによってdiv要素にbigと表示されます。

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

次回は引数を利用して、より汎用的なフィルタを作成します。