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

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.is( )マッチした要素があるかを判断

構文

マッチした要素があるかを判断する返値:true/false
jQo.is( セレクタ )ver1.0〜
jQo.is( jQo/DOM )ver1.6〜
jQo.is( function )ver1.6〜

機能

jQueryオブジェクトで指定した要素とセレクタがマッチしたときにtrueを返しますします。他のTraversingのメソッドと異なりブール値(true/false)を返すので、プログラム的な処理内での利用が多いと思います。

ver1.6から引数にjQueryオブジェクトやDOM要素を設定することも可能です。また引数にfunctionを設定して条件によって返す値を変更するなど高度な処理にも対応できます。

解説

引数にセレクタを設定

サンプル(is/01.html)を開いてdiv要素が4つあり、そのうち1つにはtestのクラス属性があることを確認してください。

<div></div>
<div></div>
<div class="test"></div>
<div></div>

jQueryは以下の様に記述され、div要素がクリックされたら、クリックされたdiv要素(this)にtestのクラス属性が有るかどうかをチェックし、その値を変数chkに代入しアラートで表示します。

$("div").click(function(){
	var chk= $(this).is(".test");
	alert(chk);
})

結果として、上から3番目のdiv要素(testのクラス属性有り)をクリックするとtrueとアラートで表示され、それ以外のdiv要素ではfalseと表示されます。

引数にjQueryオブジェクトを設定

サンプル(is/02.html)を開いてhtmlの構成がサンプルis/01.htmlと同じ事を確認してください。jQueryは以下の様に変更されisメソッドの引数にmyObjが設定されています。myObjは1行目で作成されたtestのクラス属性にマッチするjQueryオブジェクトです。

var myObj = $(".test");
$("div").click(function(){
	var chk= $(this).is(myObj);
	alert(chk);
})

結果としてサンプルis/01.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryではマッチした要素を選択するのに負荷がかかるため、選択の回数をなるべく減らす必要があります。ですので、すでに要素を選択したjQueryオブジェクトを使いまわすことで負荷が減るのです。→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」
今回のサンプルではisメソッドのためにわざわざjQueryオブジェクトを作成しているので高速化にはつながりません。

引数にFunctionを設定

サンプル(is/03.html)を開いてdiv要素が4つあり、そのうち2つのdiv要素にテキスト(aaaとbbb)があることを確認して下さい(クラス属性の指定はありません)。

<div>aaa</div>
<div></div>
<div>bbb</div>
<div></div>

jQueryは以下の様に記述されisメソッドの引数にfunctionの「isFunc」が設定されています。

$("div").click(function(){
	var chk= $(this).is(isFunc);
	alert(chk);
})

isメソッドの引数に設定するfunctionは以下の様な構文になっています。まず引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で、条件に合わせてブール値(true/false)をreturnで返すようにします。

isに設定するFunctionの構文
function 任意の名前(インデックス番号){
 任意の処理(引数を利用可能)
 return true/false;
}

サンプルis/03.htmlで利用したisFuncは以下の様になっており、textメソッドを利用してテキストを取得し、その内容が空だったらtrue、空でなかったらfalseを返すようにしています。結果として、文字のないdivをクリックするとtrueがアラートで表示され、それ以外のdiv要素をクリックするとfalseがアラートで表示されます。

function isFunc(){
	return $(this).text() == "";
}

メモ

ver1.7以前では位置セレクタの一部で正常に機能しないケースがあったようです。例えば以下の処理(最初のli要素で最後のli要素)でtrueになる等。→参考:本家サイトのisメソッド

$("li:first").is("li:last")