Warning: include_once(/home/sites/heteml/users/m/o/r/moriya-h5/web/hp-kyotoinfo/bin/menu.php): failed to open stream: No such file or directory in /home/users/2/moriya-h5/web/confrage/jQuery/jquery1002.html on line 34

Warning: include_once(): Failed opening '/home/sites/heteml/users/m/o/r/moriya-h5/web/hp-kyotoinfo/bin/menu.php' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/2/moriya-h5/web/confrage/jQuery/jquery1002.html on line 34
 
トップページ >  jQuery >  jQueryオブジェクト
初版2011/09/27: 最終更新日2011/09/27
jQueryオブジェクト
目次
jQueryオブジェクトとは
jQueryの基本メソッド
独自メソッドの拡張
jQueryオブジェクトとは

jQueryオブジェクトとは、jQueryの基本構文によって返されるオブジェクト値のことです。
jQueryは、一般的にリスト1のように外部イテレータのような形でコーディングされます。

リスト1. jQueryの一般的な書き方

function Sample11(){
	// クラス「Sample1」の背景をsilverにし、そのうちの1~4番目(0番目始まり)の枠を赤実線にする。
	jQuery('.Sample1').css('background-color','silver').slice(1,4).css('border','1px solid red');
}

これは、jQueryの結果(メソッドの結果も含む)がjQueryオブジェクトであり、その結果を用いて抽出、設定することができるからです。
リスト1は、変数で分けるとリスト2のようにも書くことができます。

リスト2. 変数を用いた書き方

function Sample12(){
	// クラス「Sample1」のjQueryオブジェクトを抽出する。
	var Sample1 = jQuery('.Sample1');
	// クラス「Sample1」の背景をsilverにする。
	Sample1.css('background-color','silver');
	// クラス「Sample1」のうち、1~4番目(0番目始まり)のjQueryオブジェクトを抽出する。
	var SampleParts = Sample1.slice(1,4);
	// 上記のオブジェクトの枠を青実線にする。
	SampleParts.css('border','1px solid blue');
}

実装例
         

jQueryの基本メソッド

jQueryオブジェクトには、以下のような基本メソッドが存在します。

each(callback)
jQueryオブジェクトを配列として、各メンバーオブジェクト毎に、コールバック関数 callback をループ実行します。
コールバック関数実行中のオブジェクトは、「this」ポインタを用いることができます。
jQueryオブジェクトは0から始まるインデックスを持ちますので、このメソッドは0番目から個数分実行されます。

コールバック関数の戻り値がfalseの場合、ループは終了します。
(ループ時のbreakステートと同様)
コールバック関数の戻り値がtrueの場合、ループは継続します。
(ループ時のcontinueステートと同様)
返り値:jQueryオブジェクト

リスト3. each(callback)

function Sample23(){
	var sum=0;
	jQuery('.Sample23').css('color','');
	jQuery('.Sample23').each(function(){
		// ループします。
		// thisポインタが実行中のオブジェクトです。

		// 実行中のオブジェクトのコンテキストを抽出
		var val = jQuery(this).text();
		// コンテキストを数値化
		var val = new Number(val);
		sum = sum + val;
		// 累計が3の倍数ならば、次にスキップ
		if( sum % 5 == 0) return true;
		// 累計が20を越えると終わり
		if( sum > 20){
			jQuery(this).css('color','red');
			return false;
		}
		// 実行中のオブジェクトのテキストに1を加算
		jQuery(this).text(new Number(val)+1);
	});
}

実装例

  • 1
  • 2
  • 3
  • 4
  • 5
 
size()
length
jQueryオブジェクトの対応するオブジェクト数を返します。
返り値:数値

リスト4. size()とlength

function Sample24(){
	var size = jQuery('.Sample24').size();
	var len = jQuery('.Sample24').length;
	alert("リスト4の本当のオブジェクト数は\nsize() = " + size + "\nlength = " + len);
}

実装例

  • 1
  • 2
  • 3
  • 4
  • 5
 
selector
jQueryオブジェクトの指定されたセレクター書式を取得します。

リスト5. selector

function Sample25(){
	// 初期化
	var chks = jQuery('.Sample25 input:checked');
	jQuery('.Sample25').css('color','');
	if( chks.length > 0){
		// 選択されたCSSセレクタ
		var target = jQuery('.Sample25:' + chks.val());
		// 選択されたオブジェクトの文字色を赤へ
		target.css('color','red');
		// CSSセレクタの表示
		alert('selecorは、「' + target.selector + '」');
	}
	else
	{
		// 選択されていない場合
		alert('radioボタンを選択してください。');
	}
}

実装例

  • 最初だけ
  • 奇数番目
  • 偶数番目
  • 最後だけ
 
context
jQueryオブジェクトが持つDOMノード上でのオブジェクトを保持します。

リスト6. context

function Sample26(){
	// 初期化
	var chks = jQuery('.Sample26 input:checked');
	jQuery('.Sample26').css('color','');
	var str = '';

	if( chks.length > 0){
		// 選択されたCSSセレクタ
		var target = jQuery('.Sample26:' + chks.val());
		// 選択されたオブジェクトでループ
		target.each(function(){
			// ターゲットのDOMオブジェクトを取得
			var ctx = jQuery(this).context;
			// ターゲットのinnerHTMLを書き足す
			str = str + ctx.innerHTML + "\n";
		});
		// ターゲットのHTMLを列記
		alert(str);
	}
	else
	{
		// 選択されていない場合
		alert('radioボタンを選択してください。');
	}
}

実装例

  • 最初だけ
  • 奇数番目
  • 偶数番目
  • 最後だけ
 
eq(position)
jQueryオブジェクトのうち、position 番目のオブジェクトを抽出します。
最初のpositionを0とし、(position - 1)番目までのオブジェクトに対応します。
返り値:jQueryオブジェクト

リスト7. eq(position)

function Sample27(){
	// 初期化
	var list = jQuery('.Sample27');
	list.css('color','');
	// 対象を指定するテキストボックス
	var inp  = jQuery('#Sample27val');
	// 例外対策
	try{
		// 入力したposition
		var pos = new Number(inp.val());
		// 選択されたオブジェクトの色を赤に
		list.eq(pos).css('color','red');
	}
	catch(e){
		alert('対象の選択が不正です。');
	}
}

実装例

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
番目
 
get([position])
jQueryオブジェクトのうち、position 番目のオブジェクトを DOM エレメント として取得します。
最初のpositionを0とし、(position - 1)番目までの要素に対応します。

positionは省略可能で、省略するとjQueryオブジェクト内の全てを DOM エレメント として取得します。
返り値:DOM エレメント

リスト8. eq([position])

function Sample28(){
	// 初期化
	var str = '';
	var list = jQuery('.Sample28');
	list.css('color','');
	// 対象を指定するテキストボックス
	var inp  = jQuery('#Sample28val');
	var val = jQuery.trim(inp.val());
	
	// 対象の選択がなければ全部、選択されればそのエレメントだけ
	if( val == '' ){
		// DOMエレメントの抽出
		var elm = list.get();
		for( var n in elm ){
			str = str + elm[n].innerHTML + '\n';
		}
	}
	else{
		// 例外対策
		try{
			// 入力したposition
			var pos = new Number(val);
			// 選択されたオブジェクトの色を赤に
			str = list.get(pos).innerHTML;
		}
		catch(e){
			alert('対象の選択が不正です。');
			return;
		}
	}
	alert(str);
}

実装例

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
番目
 
index(element)
jQueryオブジェクトのうち、引数で指定されたエレメントのインデックス番号を取得します。
最初のインデックス番号は 0 となります。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、返り値には-1です。

positionは省略可能で、省略するとjQueryオブジェクト内の全てを DOM エレメント として取得します。
返り値:DOM エレメント
※但し、存在しない場合は「-1」

リスト9. index(element)

function Sample29(){
	// 初期化
	var list = jQuery('.Sample29');
	var chks = jQuery('.Sample29 input:checked');
	// ターゲットのオブジェクト
	var target = chks.parent('.Sample29');

	if( target.size() > 0 ){
		// 選択された要素のインデックス
		var pos = list.index(target.get(0));
		alert('選択された要素のインデックス:' + pos);
	}
	else
	{
		// 選択されていない場合
		alert('radioボタンを選択してください。');
	}
}

実装例

  • 0
  • 1
  • 2
  • 3
独自メソッドの拡張

jQueryは、jQueryメソッドを拡張する方法が用意されています。
これらを使うと、独自の処理をプラグインとして定義することができます。

jQuery.extend(object)
jQueryに独自の関数を拡張します。
これはjQueryのユーティリティとして活用するものです。
返り値:拡張された結果による

リスト10. jQuery.extend(object)

// 独自拡張
jQuery.extend({
	// 数値に変換。変換できない場合はnull
	numeric :	function(src){
		var res = null;
		try {
			src = jQuery.trim( src );
			if( src === null ) return res;
			if( src === false ) return res;
			if( src === undefined ) return res;
			if( src === '' ) return res;
			res = src - 0;
		}
		catch(e){}
		return res;
	},
	// 最大値
	max		:	function(a,b){ return ( a > b ) ? a : b ; },
	// 最小値
	min		:	function(a,b){ return ( a < b ) ? a : b ; }
});

実装例

最大値と最小値を求める関数を拡張しました。
を比較します。

 
jQuery.fn.extend(object)
jQueryオブジェクトに独自のメソッドとして拡張します。
これはjQueryのプラグインを作成する場合の典型的な方法です。
返り値:拡張された結果による

リスト11. jQuery.fn.extend(object)

jQuery.fn.extend({
	// 以下、引数 attr があれば対応する属性値を、なければコンテキストを値とします。
	// 内部メソッド 計算
	_samp_calculation :	function( typ, attr){
		// 初期化
		var res = null;
		var now = new Date();
		var target = jQuery(this);
		var clss = typ + 'Values';
		target.removeClass(clss);
		
		// ターゲットをループ
		target.each(function(){
			// ターゲットから値を抽出
			var obj = jQuery(this);
			var val = obj.text();
			var chg = 0;
			if( attr ){
				// attrがある場合は、属性値 attr を抽出
				val = obj.attr(attr);
			}
			// 数値化
			val = jQuery.numeric(val);
			// 数値でなければスキップ
			if( ! val && ( val !== 0 )) return true;
			// 暫定値がnullならば、ターゲットを暫定値とする
			if( ! res && ( res !== 0 )){
				res = val;
				obj.addClass(clss);
				return true;
			}
			// 暫定値とターゲットを比較する
			switch( typ ){
				case 'max':
					// 最大を求める場合
					if( val > res ){
						// 差し替え
						chg = 2;
					}
					else
					if( val == res ){
						// 追加
						chg = 1;
					}
					break;
				case 'min':
					// 最小を求める場合
					if( val < res ){
						// 差し替え
						chg = 2;
					}
					else
					if( val == res ){
						// 追加
						chg = 1;
					}
					break;
				case 'sum':
					// 合計を求める場合
					res = res + val;
					break;
			}
			// 更新処理
			if( chg > 0 ){
				if( chg > 1 ){
					// 暫定値を更新し、結果となるクラスを消去
					res = val;
					target.removeClass(clss);
				}
				// 結果となる要素にクラスを追加
				obj.addClass(clss);
			}
		});
		return res;
	},
	// 最小値
	max :	function(attr){
		// 内部メソッドを使って値を返す。
		return jQuery(this)._samp_calculation('max',attr);
	},
	// 最小値
	min :	function(attr){
		// 内部メソッドを使って値を返す。
		return jQuery(this)._samp_calculation('min',attr);
	},
	// 合計値
	sum :	function(attr){
		// 内部メソッドを使って値を返す。
		return jQuery(this)._samp_calculation('sum',attr);
	}
});

実装例

最大値のテキスト入力と最小値のテキスト入力の探索及び合計値のメソッドを拡張します。
最大値のテキスト入力にはクラス「maxValues」を追加し、背景を赤くします。
最小値のテキスト入力にはクラス「minValues」を追加し、背景を青くします。

1
2
3
4


Warning: include_once(/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/side_bar.php): failed to open stream: No such file or directory in /home/users/2/moriya-h5/web/confrage/jQuery/jquery1002.html on line 628

Warning: include_once(): Failed opening '/home/sites/heteml/users/m/o/r/moriya-h5/web/confrage/bin/side_bar.php' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/2/moriya-h5/web/confrage/jQuery/jquery1002.html on line 628