jQuery API の contents() は、マッチした要素内の、テキストノードや子要素を、取得するメソッド。
記述例
jQuery( '.sample' ) . contents();
クラス名が「sample」である要素内の、テキストノードや子要素を取得。
実装例（サンプル）
red赤
blue青
green緑
実装例（サンプル）の動作について
赤、青、緑のボックス要素をクリックすると、クリックしたボックス要素内のテキストを強調表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample > p' ) . one( 'click', function() {
jQuery( this ) . contents() . wrap( '<b/>' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample > p' ) . one( 'click', function() {
jQuery( this ) . contents() . wrap( '<b/>' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample p {
float: left;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
#jquery-sample p span {
margin: 0 5px;
padding: 0 5px;
color: white;
}
-->
</style>
<!--
#jquery-sample p {
float: left;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
#jquery-sample p span {
margin: 0 5px;
padding: 0 5px;
color: white;
}
-->
</style>
HTML
<div id="jquery-sample">
<p><span style="background-color: red;">red</span>赤</p>
<p><span style="background-color: blue;">blue</span>青</p>
<p><span style="background-color: green;">green</span>緑</p>
<span style="clear: left;"></span>
</div>
<p><span style="background-color: red;">red</span>赤</p>
<p><span style="background-color: blue;">blue</span>青</p>
<p><span style="background-color: green;">green</span>緑</p>
<span style="clear: left;"></span>
</div>