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

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

.has( )指定した子孫要素を持つ要素を選択

構文

指定した子孫要素を持つ要素を選択返値:jQueryオブジェクト
jQo.has( セレクタ )ver1.4〜
jQo.has( DOM )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうちセレクタで指定した子孫要素を持つ要素を選択します。引数にはDOM要素を設定することも可能です。子孫要素を選択するのではなく、子孫要素を持つ要素が選択されることに注意してください。

解説

引数にセレクタを設定

サンプル(has/01.html)を開いてdiv要素が4つあり、そのうち2つは子要素としてa要素を持っていることを確認してください。

<div>リンク無し</div>
<div><a href="http://www.yahoo.co.jp/">yahooへのリンク</a></div>
<div>リンク無し</div>
<div><a href="http://www.google.co.jp/">googleへのリンク</a></div>

jQueryは以下の様に記述され、buttonをクリックするとdiv要素のうちa要素を子要素として持つ要素を選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

$("button").click(function(){
	$("div").has("a").css("background-color","#FCC");
})

結果として、buttonをクリックするとa要素を子要素として持つ2つのdiv要素が選択され背景色が赤くなります。a要素が選択されるのではなく、div要素が選択されることに注意してください。

対象は子孫要素です

サンプルhas/01.htmlではa要素はdivの子要素でした。しかしhasメソッドは子要素だけでなく子孫要素も選択対象になります。サンプル(has/02.html)を開いて上から2番目のdiv内にあるa要素がb要素に内包されていることを確認してください。つまりa要素はdiv要素の孫要素となり子要素ではなくなっています。

<div>リンク無し</div>
<div><b><a href="http://www.yahoo.co.jp/">yahooへのリンク</a></b></div>
<div>リンク無し</div>
<div><a href="http://www.google.co.jp/">googleへのリンク</a></div>

jQueryには変更はありません。buttonをクリックするとb要素を追加したdiv要素も選択されることから、hasメソッドの選択対象が子孫要素であることが確認できます。

引数にDOM要素を利用

あまり利用する機会は無いかもしれませんが、hasメソッドの引数にはDOM要素を設定することもできます。サンプル(has/03.html)を開いてhtmlの構成がサンプルhas/01.htmlと同じ事を確認してください。jQueryは以下の様に変更されhasメソッドの引数にmyObjが設定されています。myObjは1行目で作成された0番目のa要素にマッチしたDOM要素となっています。

var myObj = document.getElementsByTagName("a")[0];
$("button").click(function(){
	$("div").has(myObj).css("background-color","#FCC");
})

結果として、buttonをクリックすると最初のa要素を持つdiv要素だけが選択されます。

メモ

セレクタにも似たものがあります

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

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

$("button").click(function(){
	$("div:has('a')").css("background-color","#FCC");
})

しかしトラバースのhasメソッドは引数にDOM要素を利用することができるので、ほんの少しだけ便利かもしれません。