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