オブジェクトの操作その7(HTML メソッドチェーン)

セレクターを指定してオブジェクトを操作を複数回行う場合、毎回セレクターで意中のオブジェクトを抽出するのは効率が悪い。
そういう場合、操作関数(javascriptの世界ではメソッドというんだろうか?)を数珠つなぎにしていくことでセレクターの処理を一回におさえることが可能。
なるべくこの方法を使った方がいいらしい。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        alert($("#div1").css("color", "red").css("background-color", "lightgreen").attr("id"));
      })
    </script>
  </head>
  <body>
    <div id="div1">#div1 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div2">#div2 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div3">#div3 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div4">#div4 ぱんぱかぱんつでぱんぱかぱん</div>
  </body>
</html>

よ〜し、これでオブジェクトに対する操作は終わり!


次はイベントだ!