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

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

[ 属性名 != '値' ]指定した値と異なる属性値をもつ要素を選択

構文

指定した値と異なる属性値をもつ要素を選択
$("[ 属性 != '値' ]")ver1.0〜

機能

属性とはタグに記述される各種設定のことです。例えばaタグであればhrefやtargetが属性となります。
[ ]内に属性と値を!=で挟んでを記述すると、[ ]内に指定した属性の値を持つ要素「以外」が選択されます。
[ ]内には1つの属性しか記述できません。複数の属性を指定したい場合は複数の属性を利用してください。

解説

単独で利用することはないと思います

サンプル(notEqual/01.html)を開いてbody内にdiv要素が4つあることを確認してください。上から2つ目と4つ目にclass属性があり、値は上からtest、sampleと設定されています。jQueryは以下の様に記述され、buttonをクリックすると「class属性がtest以外」の要素だけを選択します。選択された要素はcssメソッドで赤枠を表示します。

$("button").click(function(){
	$("[class!='test']").css("border","3px solid red");
});

このセレクタの注意点としては指定した属性が無い要素も選択対象になるという点です。
つまりnotEqual/01.htmlの場合、class属性が設定されていない要素(htmlやbody)も選択されるということです。結果として、buttonをクリックすると上から2番目のdiv要素以外、html要素やbody要素も含めて全て選択されます。

html要素と組みあわせて利用

このセレクタはnotEqual/01.htmlのように広範囲の要素が選択されてしまうため、単独の利用ではなく他のセレクタと組みあわせて利用されることが多いでしょう。サンプル(notEqual/02.html)を開いてbody内の構成がnotEqual/01.htmlと同じことを確認してください。jQueryはセレクタに複数のセレクタ(and)を利用してdiv要素を追加しています。

$("button").click(function(){
	$("div[class!='test']").css("background-color","#9f9");
});

そのためサンプルbody要素やhtml要素は選択されず、buttonをクリックするとclass属性がtest以外のdiv要素が選択され、背景色が緑になります。

メモ

属性が無いものは除外してみる

サンプルnotEqual/02.htmlではclass属性が無いdiv要素まで選択対象になってしまいますので、さらに要素を絞ってみましょう。もしnotEqual/02.htmlにおいてclass属性があるdiv要素のうち、class属性の値がtestではないものを選択したい場合は、複数の属性を利用します。

サンプル(notEqual/test01.html)を開いてください。body内の構成はnotEqual/02.htmlと同じですが、jQueryのセレクタを以下の様に変更しました。これでdiv要素の内、class属性を持っておりclass属性の値がtest以外のdiv要素を選択することができます。

$(function () {	
	$("div[class][class!='test']").css("border","3px solid red");
});

結果として、buttonをクリックすると一番下のdiv要素が選択され、背景色が緑になります。

notセレクタの紹介

:not( )を利用してもnotEqual/02.htmlと同じ事ができます。サンプル(notEqual/test02.html)を開いて、body内の構成はnotEqual/02.htmlと同じことを確認して下さい。

jQueryは以下の様に記述されています。これでnotEqual/02.htmlと同じようにクラス属性がtest以外のdiv要素を選択する事ができます。

$("button").click(function(){
	$("div:not(.test)").css("background-color","#9f9");
});