jqueryで遊ぶ

プログラム

仕事上必要になったので使ってみる。
prototype.jsは少しだけ使ったことがあったけど、jqueryは名前は知ってても全く使ったことがなかったので遊んでみました。ええ、楽しかった。
ノンプログラマーのためのjQuery入門がすごい参考になりました。

p>spanの挙動がいまいち不明なので、メモる。
p>spanを青色にしたときに(function setColor2実行)こんな感じ。
あれ？孫のspanタグの中身まで変わった。

p spanで赤色にしたあとにp>spanを実行したときには、変わらず。

んーなんでだろう？明日確認してみよう。

(3:30 追記)

考えたら、

  <span style="color:blue">spanタグ1(body > p)
    <span>孫のspan(body > p > span)</span>
  </span>

ってなるからstyleタグがついているspanタグの子供(孫のspanとなっているところ)も、青色になるじゃん…

ソースの一部

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
function addText(){ $("#id1").append("<b>ためらわないことさ</b>"); }
function addClassAbout(){ $(".about").text("高速・軽量ライブラリ"); }
function addPTagAbut(){ $("p.about").text("ためらわないことさ"); }
function changePDiv(){ $("p,div").text("ためらわないことさ"); } 

function setColor1(){ $("p span").css("color","red"); } 
function setColor2(){ $("p>span").css("color","blue"); }
function setColor3(){ $("em+span").css("color","yellow"); }
//-->
</script>

<body>
  <h1 class="about">Jquery</h1>
  <div id="id1" class="about">jqueryとは？</div>
  <div id="id2" class="about">jqueryとは？</div>
  <p id="p1" class="about">jqueryとは</p>
  <p> pタグ
  <span>spanタグ1</span>
  <span>spanタグ2</span> 
  </p>
  <p> pタグ
  <span>spanタグ1(body &gt; p)
    <span>孫のspan(body &gt; p &gt; span)</span>
  </span>
  <span>spanタグ2</span> 
  </p>
  <p> pタグ
  <em>emタグ1(body &gt; p)
    <span>孫のspan(body &gt; em)</span>
  </em>
  <span>spanタグ2(body &gt; p)</span> 
  </p>
  <span> 親のspan </span><br>
  <input type="button" value="id1に追加" onclick="addText()" ><br>
  <input type="button" value="class aboutに追加" onclick="addClassAbout()" ><br>
  <input type="button" value="pタグのclass aboutに追加" onclick="addPTagAbut()" ><br>
  <input type="button" value="p,divタグを書き換え" onclick="changePDiv()"><br>
  <input type="button" value="p,divタグを書き換え" onclick="changePDiv()"><br>
  <input type="button" value="p spanに赤色" onclick="setColor1()"><br>
  <input type="button" value="p>spanに青色" onclick="setColor2()"><br>
  <input type="button" value="em+spanに黄色" onclick="setColor3()"><br>
  
</body>