jQuery API の jQuery . extend( object ) は、プラグイン開発時などで、jQueryに新しいメソッドを追加したい場合に便利だ。
jQuery . extend( object )のように、引数がobject１つだけの場合、jQuery . extend( target[, object1][, objectN] )のターゲットの引数が省略されたことを意味し、jQueryオブジェクト自体が、ターゲットであるとみなされ、jQueryの名前空間（namespace）に新しい関数を追加することができる。
引数
- object
オブジェクト。
戻り値
- Object
オブジェクト。
記述例
jQuery . extend( {
USD: function( JPY ) {
return Math . round( JPY / 77 * 100 ) / 100;
},
EUR: function( JPY ) {
return Math . round( JPY / 98 * 100 ) / 100;
}
} );
var JPY = 100;
var USD = jQuery . USD( JPY );
var EUR = jQuery . EUR( JPY );
jQuery( '#sample' ) . append( '<p>USD ' + USD + '</p>' );
jQuery( '#sample' ) . append( '<p>EUR ' + EUR + '</p>' );
USD: function( JPY ) {
return Math . round( JPY / 77 * 100 ) / 100;
},
EUR: function( JPY ) {
return Math . round( JPY / 98 * 100 ) / 100;
}
} );
var JPY = 100;
var USD = jQuery . USD( JPY );
var EUR = jQuery . EUR( JPY );
jQuery( '#sample' ) . append( '<p>USD ' + USD + '</p>' );
jQuery( '#sample' ) . append( '<p>EUR ' + EUR + '</p>' );
idが「sample」の要素に、
<p>USD 1.3</p>
<p>EUR 1.02</p>
<p>EUR 1.02</p>
実装例（サンプル）
¥
実装例（サンプル）の動作について
入力欄に、数字を入力し、「exchange」ボタンをクリックすると、１ドル７７円と、１ユーロ９８円の為替レートで、計算した結果を、入力欄の下に表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery . extend( {
USD: function( JPY ) {
return Math . round( JPY / 77 * 100 ) / 100;
},
EUR: function( JPY ) {
return Math . round( JPY / 98 * 100 ) / 100;
}
} );
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '#jquery-sample-ul' ) . text( '' );
var JPY = jQuery( '#jquery-sample-jpy-input' ) . val();
var USD = jQuery . USD( JPY );
var EUR = jQuery . EUR( JPY );
jQuery( '#jquery-sample-ul' ) . append( '<li>$' + USD + '</li>' );
jQuery( '#jquery-sample-ul' ) . append( '<li>€' + EUR + '</li>' );
} ) . click();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery . extend( {
USD: function( JPY ) {
return Math . round( JPY / 77 * 100 ) / 100;
},
EUR: function( JPY ) {
return Math . round( JPY / 98 * 100 ) / 100;
}
} );
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '#jquery-sample-ul' ) . text( '' );
var JPY = jQuery( '#jquery-sample-jpy-input' ) . val();
var USD = jQuery . USD( JPY );
var EUR = jQuery . EUR( JPY );
jQuery( '#jquery-sample-ul' ) . append( '<li>$' + USD + '</li>' );
jQuery( '#jquery-sample-ul' ) . append( '<li>€' + EUR + '</li>' );
} ) . click();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample-jpy-input {
margin: 5px;
}
#jquery-sample-ul {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample-jpy-input {
margin: 5px;
}
#jquery-sample-ul {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
¥<input type="text" id="jquery-sample-jpy-input" value="100">
<button id="jquery-sample-button">exchange</button>
</p>
<ul id="jquery-sample-ul">
</ul>
</div>
<p>
¥<input type="text" id="jquery-sample-jpy-input" value="100">
<button id="jquery-sample-button">exchange</button>
</p>
<ul id="jquery-sample-ul">
</ul>
</div>