東京うぇ部

PHPをメインにしたプログラム情報共有サイト

JavaScript

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>

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

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

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

コメントを残す




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事