今回はjQueryのvalHooksオブジェクトが扱うvalメソッドとvalue属性の互換処理について説明します。
まず、val メソッドの使用方法を見てみましょう。
$("#input1").val() //input要素のvalue属性値を取得
$("#input1").val("hello") //input 要素の value 属性を hello に設定します。
次に、val メソッドのソース コードを見てみましょう。
jQuery.fn.extend({
……
val: function( value ) { var フック、ret、isFunction、 elem = this[0];
if ( !arguments.length ) { //取得操作の場合、つまりパラメータが 0 の場合
if ( elem ) { フック = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName .toLowerCase() ];
//valHooks には、option (ドロップダウン ボックスのサブオプション)、select (ドロップダウン ボックス)、radio (ラジオ ボタン)、checkbox (チェック ボタン) のプロパティ オブジェクトがあります。これは、これら 4 つの要素の互換処理が必要であることを意味します。このうち、radio=radioの種類、checkbox=チェックボックスの種類、selectの種類は、デフォルトではselect-one(単一選択)ですが、select-multiple(<select multiple><)に設定することもできます。 option></option></select> 、複数選択)。
if ( フック && "get" in フック && (ret =フックs.get( elem, "value" )) !== 未定義 ) { return ret; }
ret = elem.value;
戻り値の型 === "文字列" ? ret.replace(rreturn, "") : ret == null ? "" : ret;
}
戻る;
}
isFunction = jQuery.isFunction( 値 );
return this.each(function( i ) { //設定操作は要素ごとに行われます
var val;
if ( this.nodeType !== 1 ) { // 要素ノードでなければなりません
return;
}
if ( isFunction ) { val = value.call( this, i, jQuery( this ).val() ); } else { val = 値; }
if ( val == null ) { //この場合: $("input").val(null);
val = "";
} else if ( typeof val === "number" ) { //渡された場合 If入力は数値型で、文字列に変換されます
val += "";
} else if ( jQuery.isArray( val ) ) { //これはチェックボックスやラジオなどの要素用です。例: $(" #input2" ).val(["hello"]); ここで文字列を渡す場合はチェックボックスのvalue属性に値を代入することになりますが、配列を渡す場合は値が代入されるかどうかを意味しますチェックボックスの は hello と等しく、等しい場合は選択され、等しくない場合は選択されません。
val = jQuery.map(val, function ( value ) { return value == null ? "" : value + ""; }); }
フック = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
if ( !hooks || !(hooks の "set") ||ooks.set( this, val, "value" ) === unknown ) { //this.value = val
;
}については、以下のコードを参照してください。
} );
}
});
jQuery.extend({ valHooks: { option: { //option 要素の value 属性値を取得するとき、このオプションの value 値を明示的に設定しない場合、取得される値はオプションのテキストです。 , オプションのテキスト。ただし、IE6-7 で取得される値は "" です。 get: function( elem ) { var val = elem.attributes.value; //IE6-7 では、val はオブジェクトです。 return val。 Specified ? elem.value : elem.text;//val.specified が true の場合、値が明示的に設定されていることを意味するため、elem.value が直接返されます; false の場合、明示的に設定されていないことを意味します。したがって elem.text が返されます。 } } , select: { get: function( elem ) { //選択が単一選択の場合、取得される値は選択したオプションの値です。複数選択の場合は、値が取得されると、それは選択したすべてのオプションの値です 配列形式 var value, option, options = elem.options, //選択されたすべてのオプションのコレクション index = elem.selectedIndex, //インデックス値現在選択されているオプションの
one = elem.type === "select-one" || インデックス < 0、
値 = 1 ? null : [], //単一選択の場合は、values=null、複数選択の場合、values=[]。
max = 1 ? インデックス + 1 : オプション長さ、
i = インデックス < 0 ? 最大 : 1 ? インデックス : 0;
for ( ; i < max; i++ ) { //単一選択、1 回循環、複数選択、複数回循環
option = options[ i ];
if ( ( option.selected || i === Index ) && //IE6-9 では、リセット ボタンをクリックしても、オプションの選択値はデフォルト値に戻らず、他のブラウザーはデフォルト値に戻ります。すべてのオプションの選択された値。
( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) && //オプションが無効に設定されている場合、オプションの値は取得できません。
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) { //オプションの親要素が無効に設定されており、親要素が optgroup である場合、オプションを無効にすることはできません得られた。
値 = jQuery( オプション ).val();
if ( one ) { 戻り値; }
値.push( 値 );
}
}
戻り値;
}、
set: function( elem, value ) { var optionSet, option, options = elem.options, value = jQuery.makeArray( value ), //value を配列に変換します i = options.length;
while ( i-- ) { option = options[ i ]; if ( (option.selected = jQuery.inArray( jQuery(option).val(),values ) >= 0) ) { //子要素を判定select のオプション 値が値の配列にあるかどうか、存在する場合、このオプションが選択されます。 オプションセット = true; } }
if ( !optionSet ) { elem.selectedIndex = -1; //select の下のオプション値が value と等しいものがない場合、select の選択インデックス値を -1 に割り当てます。select には値が存在しないものとします。箱。 戻り 値; } } }
})
jQuery.each([ "radio", "checkbox" ], function() { jQuery.valHooks[this ] = { set: function( elem, value ) { if ( jQuery.isArray( value ) ) { // value が配列を使用する場合は、この要素の値が配列値にあるかどうかを確認し、存在する場合はその要素を選択します。この要素にはラジオとチェックボックスの 2 つのタイプしかありません。
return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 ); } } };
if
(
!
jQuery.support.checkOn ) { //要素がラジオまたはチェックボックスの場合、デフォルト値を取得する場合、古いバージョンの Webkit によって取得される値は "" ですが、他のブラウザがオンになっているため、この要素の値が明示的に設定されていない場合 (getAttribute で取得した値が null の場合)、その値を取得します。 input.value を通じてデフォルト値を設定すると、すべてのブラウザがオンに戻ります。
jQuery.valHooks[ this ].get = function( elem ) { return elem.getAttribute("value") === null ? "on" : elem.value; }; } });
互換処理はjQueryではフックと呼ばれます。さまざまな互換性処理にはさまざまなフックがあります。例: 値 value、valHook があります、属性値、attrHook、propHook などがあります。