W3Cから勧告されているDOMに関する規格を用いてDOM要素を抽出すると、どうしてもコード自体が長く、複雑になります。
jQueryでは、CSSセレクタによる要素の指定(「CSSセレクタ」参照)の他に、フィルタリング用などのメソッドが用意され、DOM要素の抽出がより簡単に行えるようになっています。

以下は比較の実装例です。
ここのサンプルのSPAN要素が変化します。
W3C DOMでの抽出 jQueryでの抽出

function Sample11(){
	var objPs = document.getElementsByTagName('p');
	var cnt = 0;
	for( var x in objPs ){
		var objP = objPs[x];
		try{
			if( objP.className == 'Sample1' ){
				var objSPANs = objP.getElementsByTagName('span');
				for( var y in objSPANs ){
					objSPANs[y].style.color = 'red';
					cnt++;
				}
				continue;
			}
			else
			{
				continue;
			}
		}
		catch(e){}
	}
	alert('SPAN : ' + cnt);
}

HTML5には「getElementsByClassName」メソッドがありますが、確定していないためすべてのブラウザで実装されていません。
そのため、クラス名で抽出するためには一旦 P要素で抽出してそこから探す必要があります。

function Sample12(){
	var objSample = jQuery('.Sample1');
	var objSPANs = objSample.find('span');
	objSPANs.css('color','blue');
	alert('SPAN : ' + objSPANs.length);
}

jQueryではCSSセレクタを「.Sample1 span」として抽出することも可能です。
また「.Sample1」と「.Sample1 span」のそれぞれを別途扱いたいとき、「.Sample1」とその子要素「span」で抽出すれば効率的にプログラミングできます。

フィルタリングを用いると、一度抽出した要素のうち、特定の要素だけに処理を施すことが可能です。

eq(index)

要素群のうち、指定した出現順(index)の要素を抽出します。
indexは、0から始まります。

返り値：jQueryオブジェクト

リスト3. eq(index)

function Sample23(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('li.Sample23').css('color','');
	li.eq(x).css('color','red');
	jQuery('span.Sample23').text(x);
}

実装例

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

リスト3の実行
-番目を選択。

　

filter(CSSセレクタ|コールバック関数)

要素群のうち、引数の条件に合致したものを返します。
引数には「CSSセレクタ」と「コールバック関数」のいずれかを指定することができます。

「CSSセレクタ」の場合、カンマ「,」で区切ることで複数指定することが可能です。

「コールバック関数」は、eachメソッドで判定するのと同様なことができます。
コールバック関数の戻り値がfalseの場合、ループは終了します。
(ループ時のbreakステートと同様)
コールバック関数の戻り値がtrue(false以外の値)の場合、ループは継続します。
(ループ時のcontinueステートと同様)

返り値：jQueryオブジェクト

リスト4. filter(CSSセレクタ|コールバック関数)

function Sample24(mode){
	var li = jQuery('.Sample24 li').css('background','').css('border','1px solid silver');
	switch(mode){
		// CSSセレクタでフィルタリング
		case 'css':
			li.filter('.SampleType-B','.SampleType-D').css('background','silver').css('border','2px solid red');
			break;
		// コールバック関数でフィルタリング
		case 'func':
			li.filter(function(index){
				return ((index == 0) || ( jQuery(this).text() == '6' ) || jQuery(this).hasClass('SampleType-C') );
			}).css('background','silver').css('border','2px solid blue');
			break;
	}
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

リスト4の実行(CSSセレクタで) リスト4の実行(コールバック関数で)

　

not(CSSセレクタ|コールバック関数)

要素群のうち、引数の条件に合致しないものを返します。
ちょうど「filter(CSSセレクタ|コールバック関数)」の逆になります。

返り値：jQueryオブジェクト

リスト5. not(CSSセレクタ|コールバック関数)

function Sample25(mode){
	var li = jQuery('.Sample25 li').css('background','').css('border','1px solid silver');
	switch(mode){
		// CSSセレクタでフィルタリング
		case 'css':
			li.not('.SampleType-B','.SampleType-D').css('background','silver').css('border','2px solid red');
			break;
		// コールバック関数でフィルタリング
		case 'func':
			li.not(function(index){
				return ((index == 0) || ( jQuery(this).text() == '6' ) || jQuery(this).hasClass('SampleType-C') );
			}).css('background','silver').css('border','2px solid blue');
			break;
	}
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

リスト5の実行(CSSセレクタで) リスト5の実行(CSSセレクタで)

※リスト4の実行結果と比較してみてください。
　リストはほぼ一緒ですが、結果はちょうど逆になっています。

　

slice(start [,end])

要素群のうち、指定範囲 startから end までのものを返します。
指定範囲は、0から始まります。
end を省略すると、最後までです。

返り値：jQueryオブジェクト

リスト6. slice(start [,end])

function Sample26(sw){
	var li = jQuery('.Sample26 li').css('background','').css('border','1px solid silver');
	if( sw ){
		// 範囲選択
		li.slice( 4, -1).css('background','silver').css('border','2px solid red');
	}
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

リスト6の実行(5～ラスト前) リスト6の初期化

　

map(コールバック関数))

要素群のうち、指定範囲 startから end までのものを返します。
指定範囲は、0から始まります。
end を省略すると、最後までです。

返り値：jQueryオブジェクト

リスト7. map(コールバック関数)

function Sample27(){
	var arr = jQuery('.Sample27 li').map(function(index){
		// 結果を「番号:クラス名」に変換します。
		return ( index + ':' + jQuery(this).attr('class'));
	}).get();
	alert( arr.join('\n'));
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

リスト7の実行

　

is(CSSセレクタ|コールバック関数)

要素群のうち、引数の条件に合致した場合、trueを返します。
内部的には「filter(CSSセレクタ)」を使っています。
引数には「CSSセレクタ」と「コールバック関数」のいずれかを指定することができます。

返り値：Boolen(true/false)

リスト8. is(CSSセレクタ|コールバック関数)

function Sample28(){
	var slc = jQuery('#Sample28').val();
	var li = jQuery('.Sample28 li');
	var res = li.is('.' + slc) ? slc + 'はある。' : slc + 'は無い!!';
	alert( res );
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

存在確認: SampleType-A SampleType-B SampleType-C SampleType-D SampleType-E SampleType-F

リスト8の実行

　

hasClass(クラス名)

要素群のうち、クラス名を持っている場合、trueを返します。
is('.' + クラス名)」とほぼ同じです。

返り値：Boolen(true/false)

リスト9. hasClass(クラス名)

function Sample29(){
	var slc = jQuery('#Sample29').val();
	var li = jQuery('.Sample29 li');
	var res = slc + 'は無い!!';
	if( li.hasClass(slc) ){
		res = slc + 'はある。\n' + li.filter('.' + slc).attr('class');
	}
	alert( res);
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

存在確認: SampleType-A SampleType-B SampleType-C SampleType-D SampleType-E SampleType-F

リスト9の実行

jQueryでは特定要素の子要素を検索したり、追加検索することができます。

add(CSSセレクタ)

要素群に、CSSセレクタと合致した要素群を追加します。

返り値：jQueryオブジェクト

リスト10. add(CSSセレクタ)

function Sample310(){
	var slcA = jQuery('#Sample310a').val();
	var slcB = jQuery('#Sample310b').val();
	var li = jQuery('.Sample310 li').css('color','').css('font-weight','');
	if( slcB == '' ){
		// 初めのクラスだけ適用
		li.filter('.' + slcA).css('color','red').css('font-weight','bold');
	}
	else
	{
		// 初めのクラスと追加のクラスに適用
		li.filter('.' + slcA).add('.' + slcB).css('color','blue').css('font-weight','bold');
	}
}

実装例

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

クラス選択: SampleType-A SampleType-B SampleType-C SampleType-D SampleType-E SampleType-F 　 追加クラス: Dammy-X Dammy-Y Dammy-Z

リスト10の実行

　

children([CSSセレクタ])

要素群の全子要素を抽出します。
但し、直下の子要素のみです。
孫要素以下は対象外です。

「CSSセレクタ」を指定することで、子要素の中でも指定されたものを抽出することができます。

【反対】parents()

返り値：jQueryオブジェクト

リスト11. children([CSSセレクタ])

function Sample311(){
	var li = jQuery('.Sample311').children('li').css('color','red').css('font-weight','bold');
	li.children().children(':last').css('color','blue');
}

実装例

• A
• B
• 1. C
  2. D

リスト11の実行

　

closest([CSSセレクタ])

要素群の直近の親要素を抽出します。
ルートドキュメントまで辿ってもマッチする要素が無い場合、戻り値はnoneになります。

「CSSセレクタ」を指定することで、親要素の中でも指定されたものを抽出することができます。

返り値：jQueryオブジェクト

リスト12. closest([CSSセレクタ])

function Sample312(){
	var li = jQuery('.Sample312 li');
	var ch = li.children('b').closest('li');
	ch.click(function(e){
		li.css('background','');
		jQuery(e.target).css('background','silver');
	});
}

実装例

• Aを選択
• Bは選択できず
• 1. Cを選択
  2. Dは選択できず

上記のうち、太文字を持つ要素だけクリックに反応します。

　

contents()

要素のテキストノードも含めた全子要素を取得します。
対象要素がiframeであれば、呼び出されるコンテンツのDocumentを選択します。

返り値：jQueryオブジェクト

リスト13. contents()

function Sample313(){
	jQuery('p.Sample313').contents().css('color','red');
}

実装例

テキストノードだけを赤くします。
但し太文字(B要素)のところや SPAN要素内だけが適用されます。

リスト13の実行

　

find(CSSセレクタ)

子要素のうち、CSSセレクタで指定された要素を抽出します。

返り値：jQueryオブジェクト

リスト14. find(CSSセレクタ)

function Sample314(){
	var now = new Date();
	var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery('p.Sample314').find('time').text(time);
}

実装例

今の時刻は？です。
This time is ？.
time要素のところが現在時刻になります。

リスト14の実行

　

next([CSSセレクタ])

指定した要素の次の兄弟要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト15. next([CSSセレクタ])

function Sample315(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('li.Sample315').css('color','');
	li.eq(x).next().css('color','red');
	jQuery('span.Sample315').text(x);
}

実装例

-番目を選択の次は？

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

リスト15の実行

　

nextAll([CSSセレクタ])

指定した要素の次以降の兄弟要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト16. nextAll([CSSセレクタ])

function Sample316(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('li.Sample316').css('color','');
	li.eq(x).nextAll().css('color','red');
	jQuery('span.Sample316').text(x);
}

実装例

-番目を選択の後は？

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

リスト16の実行

　

prev([CSSセレクタ])

指定した要素の直前の兄弟要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト17. prev([CSSセレクタ])

function Sample317(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('li.Sample317').css('color','');
	li.eq(x).prev().css('color','red');
	jQuery('span.Sample317').text(x);
}

実装例

-番目を選択の直前は？

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

リスト17の実行

　

prevAll([CSSセレクタ])

指定した要素より前の兄弟要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト18. prevAll([CSSセレクタ])

function Sample318(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('li.Sample318').css('color','');
	li.eq(x).prevAll().css('color','red');
	jQuery('span.Sample318').text(x);
}

実装例

-番目を選択より前は？

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

リスト18の実行

　

siblings([CSSセレクタ])

指定した要素の全兄弟要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト19. siblings([CSSセレクタ])

function Sample319(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('li.Sample319').css('color','');
	li.eq(x).siblings().css('color','red');
	jQuery('span.Sample319').text(x);
}

実装例

-番目の他は？

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

リスト19の実行

　

parent([CSSセレクタ])

指定した要素の親要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト20. parent([CSSセレクタ])

function Sample320(me){
	var arr = jQuery(me).parent().map(function(){
		return this.tagName;
	}).get();
	alert('親要素は' + arr.join('＜'));
}

実装例

リスト20の実行

　

parents([CSSセレクタ])

指定した要素の全先祖要素を抽出します。
「CSSセレクタ」で絞り込むことができます。

返り値：jQueryオブジェクト

リスト21. parents([CSSセレクタ])

function Sample321(me){
	var arr = jQuery(me).parents().map(function(){
		return this.tagName;
	}).get();
	alert('先祖要素は' + arr.join('＜'));
}

実装例

リスト21の実行

jQueryでは入れ子の状態を連鎖して抽出することができます。

andSelf([CSSセレクタ])

現在の要素に加えて、ひとつ前の状態の要素集合を選択抽出します。

返り値：jQueryオブジェクト

リスト22. andSelf([CSSセレクタ])

function Sample422(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('.Sample422 li').css('color','').css('border','');
	li.eq(x).css('color','red');
	li.andSelf().css('border','2px solid red');
	jQuery('span.Sample422').text(x);
}

実装例

-番目は？

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

リスト22の実行

　

end([CSSセレクタ])

ひとつ前の状態の要素集合を選択抽出します。

返り値：jQueryオブジェクト

リスト23. end([CSSセレクタ])

function Sample423(){
	var x = Math.floor( Math.random() * 10 );
	var li = jQuery('.Sample423 li').css('color','').css('border','');
	li.eq(x).css('color','red');
	li.end().css('border','2px solid red');
	jQuery('span.Sample423').text(x);
}

実装例

-番目は？

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

リスト23の実行