jQuery API の jQuery( html, props ) は、htmlに指定したHTML要素から、DOM要素を作成する。その際、作成したDOM要素の、属性、イベントなどを、propsにマップで設定できる。
引数
- html
シングルまたはスタンドアローンのHTML要素を定義する文字列。
例：
<div/>または<div></div>。- props
属性、イベントなど。
戻り値
- jQuery
jQueryオブジェクト。
記述方法
jQuery( html, {
'keyA': 'valueA',
'keyB': 'valueB',
} )
'keyA': 'valueA',
'keyB': 'valueB',
} )
「html」に指定したHTML要素の、jQueryオブジェクトを生成。その際、属性などをマップ{"keyA": "valueA","keyB": "valueB",}で設定。
html( htmlString )、 appendTo( target )、 prependTo( target ) などと、組み合わせて使うことが多いだろう。
jQuery( html, {
'keyA': 'valueA',
'keyB': 'valueB',
} )
. appendTo( セレクター );
'keyA': 'valueA',
'keyB': 'valueB',
} )
. appendTo( セレクター );
記述例
jQuery( '<div/>', {
'class': 'sample',
html: '<p>内容</p>',
css: {
color: 'white',
backgroundColor: 'blue'
},
click: function() {
jQuery( this ) . css( 'backgroundColor', 'red' );
}
} )
. appendTo( '#sample' );
'class': 'sample',
html: '<p>内容</p>',
css: {
color: 'white',
backgroundColor: 'blue'
},
click: function() {
jQuery( this ) . css( 'backgroundColor', 'red' );
}
} )
. appendTo( '#sample' );
idが「sample」である要素内のコンテンツの最後に、div要素を追加。その際、「class」属性値を「sample」、div要素の内容を<p>内容</p>とし、文字色を白色、背景色を青色にし、クリックすると背景色を赤色にするイベントも追加。
実装例（サンプル）
赤
青
緑
色を追加：
実装例（サンプル）の動作について
赤 、 青 、 緑 のいづれかをクリックすると、「色を追加： 」の右側に、クリックした色を追加する。
「色を追加： 」の右側に追加した色をクリックすると、クリックした要素を削除する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > span' ) . click( function () {
var strClass = jQuery( this ) . attr( 'class' );
var strText = jQuery( this ) . text();
jQuery( '<span/>', {
'class': strClass,
text: strText,
click: function() {
jQuery( this ) . remove();
}
} )
. appendTo( '#jquery-sample-append' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > span' ) . click( function () {
var strClass = jQuery( this ) . attr( 'class' );
var strText = jQuery( this ) . text();
jQuery( '<span/>', {
'class': strClass,
text: strText,
click: function() {
jQuery( this ) . remove();
}
} )
. appendTo( '#jquery-sample-append' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-div span,
#jquery-sample-append span {
cursor: pointer;
}
.jquery-sample-red {
background-color: red;
color: white;
border-radius: 5px;
}
.jquery-sample-blue {
background-color: blue;
color: white;
border-radius: 5px;
}
.jquery-sample-green {
background-color: green;
color: white;
border-radius: 5px;
}
-->
</style>
<!--
#jquery-sample-div span,
#jquery-sample-append span {
cursor: pointer;
}
.jquery-sample-red {
background-color: red;
color: white;
border-radius: 5px;
}
.jquery-sample-blue {
background-color: blue;
color: white;
border-radius: 5px;
}
.jquery-sample-green {
background-color: green;
color: white;
border-radius: 5px;
}
-->
</style>
HTML
<div id="jquery-sample-div">
<span class="jquery-sample-red"> 赤 </span>
<span class="jquery-sample-blue"> 青 </span>
<span class="jquery-sample-green"> 緑 </span>
</div>
<p>色を追加： <span id="jquery-sample-append"></span></p>
<span class="jquery-sample-red"> 赤 </span>
<span class="jquery-sample-blue"> 青 </span>
<span class="jquery-sample-green"> 緑 </span>
</div>
<p>色を追加： <span id="jquery-sample-append"></span></p>