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>
コードも気持ちすっきりしたかなと思います。
このような小さい事の積み重ねが
後々生きてきますので、是非メソッドチェーンを使いたいですね。
