jQueryでのメソッドチェーン

jQueryなど動的な処理を組み込むのが苦手な管理人。

日々奮闘してますが、jQueryにてメソッドチェーンなるものを紹介。

まずは以下ソース。


<html lang="ja">
<head>
<title>テストページです。</title>
<meta http-equiv="Content-Language" content="ja">
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.0");</script>
</head>
<body>
<script type="text/javascript">
$(function(){
   $("div.foo").addClass("bar");
   $("div.foo").css("background", "#FF0000")
   $("div.foo").click(function(){alert('foo');});
})
</script>
   <div class="foo">
      classがfooの箇所になります。
   </div>
   <div class="hoo">
      classがhooの箇所になります。
   </div>
</body>
</html>


文字コードなどいろいろ端折ってますがスルーで。

以下見て頂ければわかりますが、これだとDOMを

3回見に行って2回見に行くのが無駄かな?と思います。


<script type="text/javascript">
$(function(){
   $("div.foo").addClass("bar");
   $("div.foo").css("background", "#FF0000")
   $("div.foo").click(function(){alert('foo');});
})
</script>


そこで以下のように、$(“div.foo”)を省略する事で、

無駄な読込がなくなります。


<script type="text/javascript">
$(function(){
   $("div.foo")
      .addClass("bar")
      .css("background", "#FF0000")
      .click(function(){alert('foo');});
})
</script>


コードも気持ちすっきりしたかなと思います。

このような小さい事の積み重ねが

後々生きてきますので、是非メソッドチェーンを使いたいですね。


コメントを残す




Menu

HOME

 TOP