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

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

.not( )指定した要素を除外

構文

指定した要素を除外します返値:jQueryオブジェクト
jQo.not( セレクタ )ver1.0〜
jQo.not( DOM )ver1.0〜
jQo.not( jQo )ver1.4〜
jQo.not( function )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうちセレクタで指定された要素を「除外」します。引数にはDOM要素を設定することも可能です。

ver1.4からは引数にjQueryオブジェクトやfunctionを設定することもできるようになりました。functionを設定することで、条件によって「除外」する内容を変更するなど高度な処理にも対応できます。

解説

引数にセレクタを設定

サンプル(not/01.html)を開いてul要素の中にli要素が5つあることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとli要素のうち最初の要素(:first)を除外します。選択された要素はcssメソッドを利用して背景を赤くしています。

$("button").click(function(){
	$("li").not(":first").css("background-color","#f99");
})

結果として、buttonをクリックするとli要素のうち最初の要素以外が選択され背景色が赤くなります。

引数にDOM要素を設定

サンプル(not/02.html)を開いてbody内の構成がサンプルnot/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されnotメソッドの引数にmyObjが設定されています。myObjは1行目で設定されli要素の3番目のDOM要素となっています。

var myObj = document.getElementsByTagName("li")[3];
$("button").click(function(){
	$("li").not(myObj).css("background-color","#f99");
})

結果として、buttonをクリックすると3番目のli要素が除外され、それ以外のli要素が全て選択されます。

引数にjQUeryオブジェクトを利用

サンプル(not/03.html)を開いてbody内の構成がサンプルnot/01.htmlとほとんど同じ事を確認してください。異なっているのは上から3番目のli要素にtestのクラス属性が設定されている点です。

jQueryは以下の様に変更され、notメソッドの引数にmyObjが設定されています。myObjは1行目で作成されたtestのクラス属性にマッチするjQueryオブジェクトです。

var myObj = $(".test");
$("button").click(function(){
	$("li").not(myObj).css("background-color","#f99");
})

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

引数にfunctionを設定

サンプル(not/04.html)を開いてbody内の構成がサンプルnot/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、notメソッドの引数にfunction「notFunc」が設定されています。

$("button").click(function(){
	$("li").not(notFunc).css("background-color","#f99");
})

notメソッドの引数に設定するfunctionは以下の様な構文になっています。まず引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で「除外」する要素はtrue、「除外」しない要素はfalseをreturnで返すようにします。

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

サンプルnot/04.htmlで利用したnotFuncは以下の様になっており、インデックス番号を3で割った余りが0だったら除外(trueを返す)、それ以外は除外しない(falseを返す)ようにしています。

function notFunc(index){
	return index%3==0;
}

結果として、buttonをクリックすると0番目と3番目のli要素が除外されます。

メモ

Traversingのメリット

セレクタの:not()を利用すればnotメソッドと同じようなことが可能です。サンプル(not/test01.html)を開いてbody内の構成がサンプルnot/01.htmlと同じ事を確認してください。

jQueryはセレクタの部分をセレクタの:not()を利用したものに置き換えただけです。buttonをクリックするとサンプルnot/01.htmlと同じ結果になることを確認して下さい。

$("button").click(function(){
	$("li:not(':first')").css("background-color","#f99");
})

しかしトラバースのnotメソッドは引数にfunctionを利用できるためセレクタの:notよりも高度な処理が可能です

v1.8.0のバグ

jQueryのバージョンが1.8.0だとnot/test01.htmlのサンプルが機能しませんでした。not/test01.htmlにはv1.8.2を利用しており正常に機能しています。→参考:v1.8.0のサンプル(not/test01b.html

<script type="text/javascript" src="../../../css_js/jquery-1.8.0.min.js"></script>