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

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

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第5回です。過去の記事もご覧ください。

　今回は、jQueryを利用して(X)HTMLとCSSを操作する方法について解説します。(X)HTMLとCSSの操作は、jQueryを利用したプログラミングでは非常によく登場しますので、しっかり押さえておきましょう。

前回までのおさらいと今回の内容

　jQueryを利用したプログラムは、

1. どの(X)HTMLの要素を操作するかを指定するセレクター
2. 処理の内容（命令）

の2つが基本です。前回・前々回ではこのうち、1．のセレクターの使い方について解説しました。今回は、セレクターで指定した要素を操作する、2．の命令について紹介します。jQueryでは、$("...") の内側にセレクターを書き、その後ろに .(ドット) でjQueryの命令を記述するという約束でしたので、 .（ドット）の後ろに来る部分ですね。

　実務で使うjQueryのプログラムでは、このほかに、命令が実行されるタイミング（「イベント」と言います）を指定します。イベントについては次回詳しく説明しますので、今回のところは、ページの読み込みが終わったタイミングで実行される前提で解説を進めます。第3回で説明した $(function(){...}) を使って、以下のように記述します。

<script type="text/javascript">
$(function(){
    $("セレクター").jQueryの命令
})
</script>

　jQueryには、(X)HTMLに含まれるテキストや要素を書き換えたり、CSSのプロパティを変更したりできるさまざまな命令が用意されています。1つずつ、詳しく紹介していきましょう。

(X)HTML/CSSを操作するjQueryの命令（目次）

1. テキストの変更と取得
2. (X)HTMLの変更と取得
3. (X)HTMLの挿入
4. (X)HTMLの移動
5. 他の要素で包む
6. 置き換え
7. 要素の削除
8. 属性値の変更と取得
9. class属性の追加と削除
10. CSSの制御

1．テキストの変更と取得

　(X)HTML要素に含まれるテキストをjQueryで変更／取得するには、text() という命令を利用します。

■テキストの変更

　text()を利用してテキストを変更するには text(...) の内側に変更後のテキストを記述します。テキストは "（ダブルクォーテーション）で包む必要があります。

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

$("p#first").text("変更後");

　たとえば上記の命令を実行すると、セレクターで指定された要素（id属性にfirstが設定されているp要素）の内容が「変更後」というテキストに書き換わります。

▼サンプルコード（元の(X)HTML部分）

<p id="first">変更前</p>

▼実行結果（実際のWebページ）

<p id="first">変更後</p>

■テキストの取得

　テキストを取得するには、text() と記述します。括弧内には何も記述しません。

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

$("p#first").text();

　たとえば、以下の(X)HTMLで上記の命令を実行すると、「取得する文字列」というテキストを取得できます。

▼サンプルコード（元の(X)HTML部分）

<p id="first">取得する文字列</p>

　取得と変更を組み合わせると、特定の要素に含まれるテキストを読み込み、別の要素に書き込むことができます。

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

$("p#second").text($("p#first").text());

　上記のサンプルを実行すると、$("p#first").text() で <p id="first">～<p>内のテキストを取得し、$("p#second").text(...) で <p id="second">～<p>内を取得したテキストで書き換えます。なお、text() の括弧内に記述するjQueryの命令は、 "（ダブルクォーテーション）で包む必要はありません。

▼サンプルコード（元の(X)HTML部分）

<p id="first">取得する文字列</p>
<p id="second">変更前</p>

▼実行結果（実際のWebページ）

<p id="first">取得する文字列</p>
<p id="second">取得する文字列</p>