Web制作の現場で使えるjQuery　UIデザイン入門 ― 第5回

サンプルで学ぶjQuery：(X)HTML/CSSを操作する (7/7)

複数の命令をまとめて指定できる「メソッドチェーン」

　ここまで(X)HTMLとCSSを操作するさまざまな命令を紹介してきました。最後に、1つのセレクターに対して複数の命令を同時に指定できる「メソッドチェーン」について触れておきたいと思います。

　以下のサンプルコードを見てください。

▼サンプルコード（スクリプト部分）

$("p").prepend("<strong>先頭に挿入</strong>");
$("p").append("<strong>最後に挿入</strong>");

　このサンプルでは、$("p") というセレクターに対して、prepend() と append() の2つの命令を実行しています。このように複数の命令がある場合、jQueryはいったんp要素を探してきて prepend() を実行し、次にまたp要素を探してきて append() を実行します。p要素を2回も探しに行くのは、ちょっと効率が悪いですね。そこで登場するのがメソッドチェーンと呼ばれるjQueryの文法です。

▼サンプルコード（スクリプト部分）

$("p").prepend("<strong>先頭に挿入</strong>").append("<strong>最後に挿入</strong>");

　今度のコードは1行ですが、実行してみると先ほどのスクリプトと同じように動作します。jQueryでは命令と命令を .(ドット)をつなげて記述することで、2つの命令を連続して実行できるのです。これが、メソッドチェーンです。

　記述が単に短くて済むだけでなく、内部的にもp要素を探してきて prepend() を実行し、そのまま次の命令である append() を実行するので、効率よく処理できます。同一のセレクターに対して複数の命令を指定する場合は、メソッドチェーンを利用するように心がけましょう。

(X)HTML/CSSを操作するjQueryの命令のまとめ

　今回紹介したjQueryの命令を以下にまとめます。

命令	意味
テキストの変更と取得
text(...)	テキストを変更する
text()	テキストを取得する
（X)HTMLの変更と取得
html(...)	(X)HTMLを変更する
html()	(X)HTMLを取得する
(X)HTMLの挿入
prepend(...)	要素内の先頭に(X)HTMLを挿入する
append(...)	要素内の最後に(X)HTMLを挿入する
before(...)	要素の前に(X)HTMLを挿入する
after(...)	要素の後に(X)HTMLを挿入する
(X)HTMLの移動
prependTo(...)	他の要素内の先頭に要素を移動する
appendTo(...)	他の要素内の最後に要素を移動する
insertBefore(...)	他の要素の前に要素を移動する
insertAfter(...)	他の要素の後に要素を移動する
他の要素で包む
wrap(...)	要素を他の要素で包む
wrarpAll(...)	要素をまとめて他の要素で包む
wrapInner(...)	子要素/テキストを他の要素で包む
要素の置き換え
replaceWith(...)	要素を他の要素に置き換える
要素の削除
remove()	要素を削除する
属性値の変更と取得
attr(... , ...)	指定した属性の値を変更する
attr(...)	指定した属性の値を取得する
removeAttr(...)	指定した属性を削除する
class属性の追加と削除
addClass(...)	class属性を追加する
removeClass(...)	class属性を削除する
CSSの制御
css(... , ...)	指定したCSSプロパティの値を設定する
css(...)	指定したCSSプロパティの値を取得する

◆

　次回は、jQueryの命令が実行されるタイミングを制御する、「イベント」について解説します。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。