jQuery API の jQuery( selector[, context] ) は、contextに指定した検索対象から、selectorにマッチするものを検索し、jQueryオブジェクトを生成する。
contextを指定しない場合は、documentから始まるDOM内で検索を実行する。
引数
- selector
- context
オプション。
DOM要素、ドキュメント、またはjQueryオブジェクトで、検索対象を指定。
contextを指定しない場合は、documentから始まるDOM内で検索を実行する。（jQuery( selector )を参照。）
戻り値
- jQuery
jQueryオブジェクト。
記述方法
jQuery( セレクター, コンテキスト )
「コンテキスト」に指定した検索対象から、「セレクター」にマッチするものを検索し、jQueryオブジェクトを生成。
記述例
jQuery( '#sample' ) . click( function() {
jQuery( 'span', this ) . css( 'backgroundColor', 'red' );
} );
jQuery( 'span', this ) . css( 'backgroundColor', 'red' );
} );
idが「sample」であるDOM要素をクリックすると、idが「sample」であるDOM要素内の「span」要素の背景色を赤色にする。
実装例（サンプル）
実装例（サンプル）の動作について
ピンク色のdiv要素をクリックすると、その中のdiv要素の色や形を変える。
ピンク色のdiv要素を、再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample' ) . toggle(
function() {
jQuery( 'div', this ) . css( {
height: 200,
width: 200,
margin: '5px',
backgroundColor: 'orange',
border: 'thick red solid',
borderRadius: '100px',
} );
},
function() {
jQuery( 'div', 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( 'div', this ) . css( {
height: 200,
width: 200,
margin: '5px',
backgroundColor: 'orange',
border: 'thick red solid',
borderRadius: '100px',
} );
},
function() {
jQuery( 'div', 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: 250px;
width: 250px;
padding: 20px;
background-color: pink;
border: 1px gray solid;
}
#jquery-sample div {
height: 200px;
width: 200px;
margin: 5px;
background-color: yellow;
border: thick green solid;
border-radius: 20px;
}
-->
</style>
<!--
#jquery-sample {
height: 250px;
width: 250px;
padding: 20px;
background-color: pink;
border: 1px gray solid;
}
#jquery-sample div {
height: 200px;
width: 200px;
margin: 5px;
background-color: yellow;
border: thick green solid;
border-radius: 20px;
}
-->
</style>
HTML
<div id="jquery-sample">
<div></div>
</div>
<div></div>
</div>