差分

[[jQuery][JavaScript]]

<&lt;html>&gt; <&lt;head>&gt; <&lt;script type="text/javascript" src="http://typea-mixi01.appspot.com/js/jquery-1.3.2.js"><&gt;&lt;/script>&gt; <&lt;script type="text/javascript">&gt;

$('#msg_area').html("<&lt;span style='font-weight:bold'>&gt;document is ready.<&lt;/span>&gt;");

$('#msg_text').text("<&lt;span style='font-weight:bold'>&gt;document is ready.2<&lt;/span>&gt;");

<&lt;/script>&gt; <&lt;/head>&gt; <&lt;body>&gt; <&lt;div id='msg_area'><&gt;&lt;/div>&gt; <&lt;div id='msg_text'><&gt;&lt;/div>&gt; <&lt;br/>&gt;

<&lt;div class="cls1"><&gt;&lt;/div>&gt; <&lt;span class="cls1"><&gt;&lt;/span>&gt; <&lt;!--

-->&gt; <&lt;br/>&gt; <&lt;input type="button" value="同じclass属性" onclick="javascript:$('.cls1').text('class element no1.');">&gt; <&lt;input type="button" value="タグ+class属性" onclick="javascript:$('span.cls1').text('class element no1 span tag only.');">&gt; <&lt;br/>&gt;

<&lt;!--

-->&gt; <&lt;input type="button" value="同一タグ種" onclick="javascript:$('div').css('border', 'solid 1px black');"/>&gt; <&lt;input type="button" value="複数タグ種" onclick="javascript:$('span,input').css('border', 'solid 2px blue');"/>&gt;

<&lt;div>&gt; <&lt;span>&gt;子供階層<&lt;/span>&gt; <&lt;p>&gt; <&lt;span>&gt;孫階層<&lt;/span>&gt; <&lt;/p>&gt; <&lt;span>&gt;子供階層2<&lt;/span>&gt; <&lt;/div>&gt; <&lt;input type="button" value="包含タグすべて" onclick="javascript:$('div span').css('background-color', 'red');"/><&gt;&lt;br/>&gt; <&lt;input type="button" value="子タグのみ" onclick="javascript:$('div>&gt;span').css('background-color', 'blue');"/>&gt; <&lt;input type="button" value="隣接" onclick="javascript:$('p+span').css('background-color', 'green');"/>&gt;

<&lt;/body>&gt; <&lt;/html>&gt;