前回までのおさらいと今回の内容
jQueryを利用したプログラムは、
- どの(X)HTMLの要素を操作するかを指定するセレクター
- 処理の内容（命令）
の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．テキストの変更と取得
(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>
2．(X)HTMLの変更と取得
text() ではテキストを操作できましたが、(X)HTMLのタグを含むテキストを操作したい場合は、html() という命令を利用します。
■(X)HTMLの変更
html()を利用して(X)HTMLを変更するには、html(...)の内側に変更後の(X)HTMLを記述します。
▼サンプルコード（スクリプト部分）
$("p#first").html("<strong>変更後</strong>");
上記のサンプルコードを実行すると、id属性にfirstが設定されているp要素の内容が、「<strong>変更後</strong>」に変更されます。
▼サンプルコード（元の(X)HTML部分）
<p id="first">変更前</p>
▼実行結果（実際のWebページ）
<p id="first"><strong>変更後</strong></p>
■(X)HTMLの取得
(X)HTMLの取得にも html() を使います。text() でテキストを取得する場合と同じく、括弧内には何も記述しません。
▼サンプルコード（スクリプト部分）
$("p#first").html();
以下のサンプルでは、取得した<p id="first">～</p> の(X)HTMLで、<p id="second">～</p> を書き換えています。
▼サンプルコード（スクリプト部分）
$("p#second").html($("p#first").html());
▼サンプルコード（元の(X)HTML部分）
<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>
▼実行結果（実際のWebページ）
<p id="first"><strong>変更後</strong></p>
<p id="second"><strong>変更後</strong></p>
3．(X)HTMLの挿入
html() を使うと、もともとの要素の内容がすべて書き換えられてしまいます。要素の内部を残したまま(X)HTMLを追加したい場合は、要素を挿入する prepend()/append()/before()/after() を利用します。
■(X)HTML要素内の先頭に挿入
指定した要素内部の先頭に(X)HTMLを挿入したいときは、prepend() を使います。prepend() は、html() と同じように追加したい(X)HTMLを括弧内に記述します。
▼サンプルコード（スクリプト部分）
$("p#first").prepend("<strong>先頭に挿入</strong>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<p id="first"><strong>先頭に挿入</strong>テキストテキスト</p>
■(X)HTML要素内の最後に挿入
指定した要素内部の最後に(X)HTMLを挿入したい場合は、append() を利用します。append() も prepend() と同じく、追加したい(X)HTMLを括弧内に記述します。
▼サンプルコード（スクリプト部分）
$("p#first").append("<strong>最後に挿入</strong>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<p id="first">テキストテキスト<strong>最後に挿入</strong></p>
■(X)HTML要素の前に挿入
指定した要素の前に(X)HTMLを挿入したい場合は、before() を利用します。
▼サンプルコード（スクリプト部分）
$("p#first").before("<h1>前に挿入</h1>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<h1>前に挿入</h1>
<p id="first">テキストテキスト</p>
■(X)HTML要素の後ろに挿入
指定した要素の後ろに(X)HTMLを挿入したい場合は、after() を利用します。
▼サンプルコード（スクリプト部分）
$("p#first").after("<h1>後ろに挿入</h1>");
▼サンプルコード（元の(X)HTML部分）
<p id="first">テキストテキスト</p>
▼実行結果（実際のWebページ）
<p id="first">テキストテキスト</p>
<h1>後ろに挿入</h1>
4．(X)HTMLの移動
新規に(X)HTMLを追加するのではなく、既存の(X)HTML要素の出現位置も変更できます。
■(X)HTML要素内の先頭に移動
指定した(X)HTML要素を、他の要素の内部の先頭に移動したい場合は、prependTo() を利用します。prependTo() は括弧内に移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("strong").prependTo("p");
上記のサンプルを実行すると、strong要素をp要素の内側の先頭に移動します。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<strong>先頭に移動</strong>
▼実行結果（実際のWebページ）
<p><strong>先頭に移動</strong>テキストテキスト</p>
■(X)HTML要素内の最後に移動
指定した要素を、他の要素の内部の最後に移動したい場合は、appendTo() を利用します。appendTo() も prependTo() と同様、移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("strong").appendTo("p");
上記のサンプルを実行すると、strong要素をp要素の内側の最後に移動します。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<strong>最後に移動</strong>
▼実行結果（実際のWebページ）
<p>テキストテキスト<strong>最後に移動</strong></p>
■(X)HTML要素の前に移動
指定した要素を、他の要素の前に移動したい場合は、insertBefore() を利用します。insertBefore() は移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("h1").insertBefore("p");
上記のサンプルでは、h1要素をp要素の前に移動します。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<h1>前に移動</h1>
▼実行結果（実際のWebページ）
<h1>前に移動</h1>
<p>テキストテキスト</p>
■(X)HTML要素の後ろに移動
指定した要素を、他の要素の後ろに移動したい場合は、insertAfter() を利用します。insertAfter() は移動先の要素をセレクターで指定します。
▼サンプルコード（スクリプト部分）
$("h1").insertAfter("p");
上記のサンプルでは、h1要素をp要素の後ろに移動します。
▼サンプルコード（元の(X)HTML部分）
<h1>後ろに移動</h1>
<p>テキストテキスト</p>
▼実行結果（実際のWebページ）
<p>テキストテキスト</p>
<h1>後ろに移動</h1>
5．他の要素で包む
指定した要素を追加するのではなく、特定の要素で包む（ラップする）こともできます。
■各要素を指定した要素で包む
wrap() は、セレクターで指定した要素を、別の指定した要素で包む命令です。括弧内に、包みたいhtmlタグを空の状態で記述します。
▼サンプルコード（スクリプト部分）
$("strong").wrap("<h1></h1>");
上記のサンプルを実行すると、strong要素がh1要素で包まれます。セレクターに複数の要素が含まれる場合は、それぞれの要素が個別に包まれます。
▼サンプルコード（元の(X)HTML部分）
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
▼実行結果（実際のWebページ）
<h1><strong>テキストテキスト</strong></h1>
<h1><strong>テキストテキスト</strong></h1>
■全要素を別の要素で包む
指定した複数の要素を、まとめて別の要素で包みたい場合は、wrapAll() を利用します。wrapAll() も、包みたいhtmlタグを空の状態で記述します。
▼サンプルコード（スクリプト部分）
$("strong").wrapAll("<h1></h1>");
上記のサンプルでは、すべてのstrong要素をまとめてh1要素で包む形に変更します。
▼サンプルコード（元の(X)HTML部分）
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
▼実行結果（実際のWebページ）
<h1>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</h1>
wrapAll() は、セレクターで指定した要素が複数ある場合、要素の間に含まれる別の要素やテキストを除外します。たとえば以下の(X)HTMLでは、1つ目のstrong要素と2つ目のstrong要素の間にあるテキストが追い出され、strong要素だけがh1要素で包まれます。
▼サンプルコード（元の(X)HTML部分）
<strong>テキストテキスト</strong>
テキストテキスト
<strong>テキストテキスト</strong>
▼実行結果
<h1>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</h1>
テキストテキスト
■指定した要素の子要素を別の要素で包む
指定した要素の子要素やテキストを別の要素で包みたい場合は、wrapInner() を利用します。wrapInner() も、包みたいhtmlタグを空の状態で記述します。
▼サンプルコード（スクリプト部分）
$("p").wrapInner("<strong></strong>");
上記のサンプルでは、p要素の中身のテキストをstrong要素で包むように変更しています。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキスト</p>
<p>テキストテキスト</p>
▼実行結果（実際のWebページ）
<p><strong>テキストテキスト</strong></p>
<p><strong>テキストテキスト</strong></p>
6．要素の置き換え
指定した要素を他の要素に置き換えることもできます。要素の置き換えは、replaceWith() を利用します。replaceWith() は、括弧内に置き換え後の(X)HTMLを記述します。
▼サンプルコード（スクリプト部分）
$("p").replaceWith("<h1>置き換え後</h1>");
上記のサンプルを実行すると、p要素を「<h1>置き換え後</h1>」に置き換えて表示します。
▼サンプルコード（元の(X)HTML部分）
<p>置き換え前</p>
▼実行結果（実際のWebページ）
<h1>置き換え後</h1>
7．要素の削除
指定した要素を削除できます。削除には remove() を使います。
▼サンプルコード（スクリプト部分）
$("p strong").remove();
上記のサンプルを実行すると、p要素に含まれるstrong要素を削除します。
▼サンプルコード（元の(X)HTML部分）
<p><strong>削除する要素</strong>テキストテキストテキスト</p>
▼実行結果（実際のWebページ）
<p>テキストテキストテキスト</p>
8．属性値の変更と取得
jQueryでは、(X)HTMLの属性の値を簡単に操作できます。
■属性値の変更
attr() を利用すると、属性値を変更できます。attr() は、変更したい属性名と変更後の属性値を括弧内に ,(カンマ)区切りで指定します。
▼attr()の記述方法
$(セレクター).attr("属性名","属性値");
以下に示すのは、a要素のhref属性の値を「http://ascii.jp/」に変更するサンプルです。
▼サンプルコード（スクリプト部分）
$("a").attr("href","http://ascii.jp/");
▼サンプルコード（元の(X)HTML部分）
<a href="http://to-r.net">リンク先</a>
▼実行結果（実際のWebページ）
<a href="http://ascii.jp/">リンク先</a>
属性値の取得
属性値の取得にも、attr() を利用します。attr() の括弧内に属性名のみを指定すると、指定した属性値を取得できます。
▼サンプルコード（スクリプト部分）
$("a").text( $("a").attr("href") );
上のサンプルでは、a要素のhref属性の値を取得し、取得した値を text() でa要素のテキストとして書き込んでいます。
▼サンプルコード（元の(X)HTML部分）
<a href="http://ascii.jp/">リンク先</a>
▼実行結果（実際のWebページ）
<a href="http://ascii.jp/">http://ascii.jp/</a>
■属性の削除
セレクターで指定した要素に特定の属性が設定されている場合、removeAttr() で属性を削除できます。
▼サンプルコード（スクリプト部分）
$("a").removeAttr("target");
上記のサンプルを実行すると、a要素の target属性を削除します。
▼サンプルコード（元の(X)HTML部分）
<a href="http://ascii.jp/" target="_blank">リンク先</a>
▼実行結果（実際のWebページ）
<a href="http://ascii.jp/" >リンク先</a>
9．class属性の追加と削除
class属性は他の属性と違い、スペース区切りで複数の値を設定できるため、属性を追加／削除する専用の命令が用意されています。
■class属性の追加
class属性の追加には、addClass() を利用します。括弧内には追加したいclass属性の値を記述します。複数のclass属性をスペース区切りで追加できます。
▼サンプルコード（スクリプト部分）
$("p").addClass("red");
上記のサンプルでは、p要素にredというclass属性を追加しています。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
<p class="red">テキストテキストテキストテキストテキスト</p>
class属性の削除
class属性の削除には、removeClass() を利用します。括弧内には削除したい class属性の値を記述します。複数のclass属性をスペース区切りで記述できます。
▼サンプルコード（スクリプト部分）
$("p").removeClass("red");
このサンプルでは、p要素からredというclass属性を取り除いています。
▼サンプルコード（元の(X)HTML部分）
<p class="red">テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
<p>テキストテキストテキストテキストテキスト</p>
10．CSSの制御
jQueryでは、CSSのプロパティの設定や値の取得も簡単にできます。
■CSSの設定
css() を使うと、指定した要素のCSSのプロパティを設定できます。プロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述します。
▼サンプルコード（スクリプト部分）
$("p").css("color","red");
このサンプルを実行すると、p要素のCSSのcolorプロパティがredに変更され、p要素のテキストが赤色で表示されます。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
 |
|---|
複数のCSSプロパティを同時に設定したい場合は、css() の括弧内に {...} で以下のように記述します。
$(セレクター).css({
プロパティ名 : "プロパティの値" ,
プロパティ名 : "プロパティの値" ,
(中略)
プロパティ名 : "プロパティの値"
});
プロパティ名とプロパティの値は :(コロン)でつなげ、値は "(ダブルクオーテーション)で包みます。CSSはグループセレクターのように ,(カンマ)でつなげていきます。
ここで指定するプロパティ名は、CSSとルールが少し違うので注意しましょう。CSSのプロパティ名に -(ハイフン)が含まれる場合はハイフンを削除し、その後に続く最初のアルファベットを大文字に変更する必要があります。たとえば、background-colorプロパティは「backgroundColor」、font-weightは「fontWeight」と書きます。慣れない間は特に気を付けてください。
▼サンプルコード（スクリプト部分）
$("p").css({
backgroundColor : "yellow",
fontWeight : "bold",
color : "red"
});
このサンプルを実行すると、p要素のbackground-colorプロパティにyellowが、font-weightプロパティにboldが、colorプロパティにredが設定されます。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
 |
|---|
■CSSの値の取得
CSSプロパティの値を取得するには、css() の括弧内にプロパティ名を記述します。
▼サンプルコード（スクリプト部分）
$("p").text( $("p").css("color") );
このサンプルは、p要素のcolorプロパティの値を取得し、text() を使ってp要素内にテキストとして書き込みます。なお、colorプロパティはブラウザーにより取得できる値の書式が異なるため、結果はrgb(0, 0, 0) もしくは #000000と表示されます。
▼サンプルコード（元の(X)HTML部分）
<p>テキストテキストテキストテキストテキスト</p>
▼実行結果（実際のWebページ）
<p>rgb(0, 0, 0)</p>
<p>#000000</p>
複数の命令をまとめて指定できる「メソッドチェーン」
ここまで(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の命令が実行されるタイミングを制御する、「イベント」について解説します。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
