jQuery API の jQuery( elementArray ) は、elementArrayに指定したDOM要素の配列から、jQueryオブジェクトを生成する。
引数
- elementArray
DOM要素の配列。
戻り値
- jQuery
jQueryオブジェクト。
記述方法
jQuery( [ DOM要素1, DOM要素2, DOM要素3 ] )
「DOM要素1」「DOM要素2」「DOM要素3」に指定したDOM要素から、jQueryオブジェクトを生成。
記述例１
jQuery( [ document . body, document . getElementById( 'sample' ) ] )
. css( 'backgroundColor', 'red' );
. css( 'backgroundColor', 'red' );
body要素と、idが「sample」の要素の背景色を、赤色にする。
記述例２
jQuery( '#sample' ) . click( function() {
jQuery( [
this,
document . getElementById( 'sample-a' ),
document . getElementById( 'sample-b' )
] )
. css( 'backgroundColor', 'red' );
} );
jQuery( [
this,
document . getElementById( 'sample-a' ),
document . getElementById( 'sample-b' )
] )
. css( 'backgroundColor', 'red' );
} );
idが「sample」であるDOM要素をクリックすると、idが「sample」「sample-a」「sample-b」であるDOM要素の背景色を赤色にする。
実装例（サンプル）
クリック
実装例（サンプル）の動作について
中央の黄色のdiv要素をクリックすると、中央と左右の3つの黄色のdiv要素の色や形を変える。
再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-click' ) . toggle(
function() {
jQuery( [
this,
document . getElementById( 'jquery-sample-a' ),
document . getElementById( 'jquery-sample-b' )
] )
. css( {
float: 'left',
height: 70,
width: 70,
margin: '5px',
backgroundColor: 'orange',
border: 'thick red solid',
borderRadius: '35px',
} );
},
function() {
jQuery( [
this,
document . getElementById( 'jquery-sample-a' ),
document . getElementById( 'jquery-sample-b' )
] )
. css( {
float: 'left',
height: 70,
width: 70,
margin: '5px',
backgroundColor: 'yellow',
border: 'thick green solid',
borderRadius: '20px',
} );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-click' ) . toggle(
function() {
jQuery( [
this,
document . getElementById( 'jquery-sample-a' ),
document . getElementById( 'jquery-sample-b' )
] )
. css( {
float: 'left',
height: 70,
width: 70,
margin: '5px',
backgroundColor: 'orange',
border: 'thick red solid',
borderRadius: '35px',
} );
},
function() {
jQuery( [
this,
document . getElementById( 'jquery-sample-a' ),
document . getElementById( 'jquery-sample-b' )
] )
. css( {
float: 'left',
height: 70,
width: 70,
margin: '5px',
backgroundColor: 'yellow',
border: 'thick green solid',
borderRadius: '20px',
} );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample div {
float: left;
height: 70px;
width: 70px;
margin: 5px;
background-color: yellow;
border: thick green solid;
border-radius: 20px;
}
#jquery-sample-click {
text-align: center;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample div {
float: left;
height: 70px;
width: 70px;
margin: 5px;
background-color: yellow;
border: thick green solid;
border-radius: 20px;
}
#jquery-sample-click {
text-align: center;
cursor: pointer;
}
-->
</style>
HTML
<div id="jquery-sample">
<div id="jquery-sample-a"></div>
<div id="jquery-sample-click"><p>クリック</p></div>
<div id="jquery-sample-b"></div>
<br style="clear: left;" />
</div>
<div id="jquery-sample-a"></div>
<div id="jquery-sample-click"><p>クリック</p></div>
<div id="jquery-sample-b"></div>
<br style="clear: left;" />
</div>