| 目次 |
|---|
|
・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オブジェクトには、以下のような基本メソッドが存在します。
リスト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);
});
}
実装例
リスト4. size()とlength
function Sample24(){
var size = jQuery('.Sample24').size();
var len = jQuery('.Sample24').length;
alert("リスト4の本当のオブジェクト数は\nsize() = " + size + "\nlength = " + len);
}
実装例
リスト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ボタンを選択してください。');
}
}
実装例
リスト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ボタンを選択してください。');
}
}
実装例
リスト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('対象の選択が不正です。');
}
}
実装例
リスト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);
}
実装例
リスト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ボタンを選択してください。');
}
}
実装例
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 ; }
});
実装例
最大値と最小値を求める関数を拡張しました。
と
を比較します。
リスト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 |