jQuery 命令

メニューを開く

jQuery 命令

jQuery の命令には HTML に含まれるテキストや要素を書き換えたり、CSSのプロパティを変更したりする命令が多数用意されています。

jQuery の命令のまとめ
HTML/CSSを操作する命令一覧

jQuery の命令のまとめ

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

トップへ

HTML/CSS を操作する jQuery の命令

jQuery を利用したスクリプトでは、（１）どの HTML の要素の操作をするかをセレクタで指定し、（２）操作する内容をメソッド、パラメータとして記述します。

セレクタの記述：
- $(function(){
- 　　$("セレクタ").jQuery の命令
- });

ここでは、メソッド、パラメータをjQuery の命令としてみていく。

テキストの変更と取得
HTMLの変更と取得
HTMLの挿入
HTMLの移動
他の要素で包む
親要素を取り除く
要素の置き換え
要素の削除
属性値の変更と取得
class 属性の追加と削除
CSS の制御
メソッドチェーン

これらを順次みていきます。

トップへ

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

HTML 要素に含まれるテキストを変更または取得するには、text() という命令を使います。

text(…) - テキストの変更

text(…) の内側に変更後のテキストを、" （ダブルクォーテーション）または ' (シングルクォーテーション) で包んで記述します。

テキストの変更
- 　$("p#first").text("テキスト２");

HTML（実行前）
- 　<p id="first">テキスト１</p>
　　　 (実行時)
- 　<p id="first">テキスト２</p>

id 属性が first の p 要素が、「テキスト２」というテキストになります。

text() - テキストの取得

text() のカッコ内に何も記述しない場合は、セレクタで指定した要素に含まれるテキストを取得できます。

テキストの取得
- 　$("p#second").text($("p#first").text());

HTML（実行前）
- 　<p id="first">テキスト１</p>
- 　<p id="second">テキスト２</p>
　　　 (実行時)
- 　<p id="first">テキスト１</p>
- 　<p id="second">テキスト１</p>

id 属性に first が設定された p 要素のテキストで、id 属性 second の p 要素のテキストが変更されます。

トップへ

２．HTML の変更と取得

HTMLのタグを含むテキストを操作するには、html() という命令を使います。

html(…) - HTML の変更

html を変更するには、html（…）の内側に変更後の HTML を記述します。

HTML の変更
- 　$("p#first").html("<strong>論理強調</strong>");

HTML（実行前）
- 　<p id="first">テキスト</p>
　　　 (実行時)
- 　<p id="first"><strong>論理強調</strong></p>

id 属性に first が設定された p 要素の内容が、<strong>論理強調</strong> に変更されます。

html() - HTML の取得

HTML を取得するには html() を使います。

htmlの取得
- 　$("p#second").html($("p#first").html());

HTML（実行前）
- 　<p id="first"><strong>論理強調</strong></p>
- 　<p id="second">テキスト</p>
　　　 (実行時)
- 　<p id="first"><strong>論理強調</strong>テキスト</p>
- 　<p id="second"><strong>論理強調</strong>テキスト</p>

<p id="first"> ～ </p> の内側の html を取得し、<p id="second"> ～ </p> の内側を書き換えます。

トップへ

３．HTML の挿入

要素の内容をのこしたままHTMLを追加するときは、要素を挿入する prepend()、append()、before()、after() を使います。

prepend() - HTML 要素内の先頭に挿入

prepend() を使います。挿入する HTML をカッコ内に記述します。

HTML 要素内の先頭に挿入
- 　$("p#first").prepend("<strong>論理強調</strong>");

HTML（実行前）
- 　<p id="first"> テキスト</p>
　　　 (実行時)
- 　<p id="first"><strong>論理強調</strong>テキスト</p>

p 要素内の先頭に strong 要素を挿入しています。

append() - HTML 要素内の最後に挿入

append() を使います。

HTML 要素内の最後に挿入
- 　$("p#first").append("<strong>論理強調</strong>");

HTML（実行前）
- 　<p id="first"> テキスト</p>
　　　 (実行時)
- 　<p id="first">テキスト<strong>論理強調</strong></p>

p 要素内の最後に strong 要素を挿入しています。

before() - HTML 要素の前に挿入

before() を使います。

HTML 要素の前に挿入
- 　$("p#first").before("<h1>挿入</h1>");

HTML（実行前）
- 　<p id="first"> テキスト</p>
　　　 (実行時)
- 　<h1>挿入</h1>
- 　<p id="first">テキスト</p>

p 要素の前に h1 要素を挿入しています。

after() - HTML 要素の後ろに挿入

after() を使います。

HTML 要素の後ろに挿入
- 　$("p#first").after("<h1>挿入</h1>");

HTML（実行前）
- 　<p id="first"> テキスト</p>
　　　 (実行時)
- 　<p id="first">テキスト</p>
- 　<h1>挿入</h1>

p 要素の後ろに h1 要素を挿入しています。

トップへ

４．HTML の移動

prependTo() - HTML 要素内の先頭に移動

prependTo() を使います。カッコ内に移動先の要素をセレクタで指定します。

HTML 要素内の先頭に移動
- 　$("strong").prepentTo("p");

HTML（実行前）
- 　<p> テキスト</p>
- 　<strong>強調文字</strong>
　　　 (実行時)
- 　<p><strong>強調文字</strong>テキスト</p>

p 要素の後ろにあった strong 要素を、p 要素の内側の先頭に移動しています。

appendTo() - HTML 要素内の最後に移動

appendTo() を使います。カッコ内に移動先の要素をセレクタで指定します。

HTML 要素内の最後に移動
- 　$("strong").appendTo("p");

HTML（実行前）
- 　<p> テキスト</p>
- 　<strong>強調文字</strong>
　　　 (実行時)
- 　<p>テキスト<strong>強調文字</strong></p>

p 要素の後ろにあった strong 要素を、p 要素の内側の最後に移動しています。

insertBefore() - HTML 要素の前に移動

insertBefore() を使います。カッコ内に移動先の要素をセレクタで指定します。

HTML 要素の前に移動
- 　$("h1").insertBefore("p");

HTML（実行前）
- 　<p> テキスト</p>
- 　<h1>見出し１</h1>
　　　 (実行時)
- 　<h1>見出し１</h1>
- 　<p>テキスト</p>

h1 要素が p 要素の前に移動しています。

insertAfter() - HTML 要素の後ろに移動

insertAfter() を使います。カッコ内に移動先の要素をセレクタで指定します。

HTML 要素の後ろに移動
- 　$("h1").insertAfter("p");

HTML（実行前）
- 　<h1>見出し１</h1>
- 　<p> テキスト</p>
　　　 (実行時)
- 　<p>テキスト</p>
- 　<h1>見出し１</h1>

h1 要素が p 要素の後ろに移動しています。

トップへ

５．他の要素で包む

wrap() - 各要素を指定した要素で包む

wrap() は、セレクタで指定した要素を別の要素で囲む命令です。包みたいHTMLタグを <要素名></要素名> のように空の状態でカッコ内に記述します。

各要素を指定した要素で包む
- 　$("strong").wrap("<h1></h1>");

HTML（実行前）
- 　<strong>テキスト</strong>
- 　<strong> テキスト</strong>
　　　 (実行時)
- 　<h1><strong>テキスト</strong></h1>
- 　<h1><strong>テキスト</strong></h1>

strong 要素が h1 要素で囲まれます。セレクタに複数の要素が含まれる場合は、それぞれの要素が個別に包まれます。

wrapAll() - 全要素を別の要素で包む

指定した複数の要素をまとめて別の要素で包むには、wrapAll() を使います。包みたい HTML タグを空の状態でカッコ内に記述します。

全要素を別の要素で包む
- 　$("strong").wrapAll("<h1></h1>");

HTML（実行前）
- 　<strong>テキスト</strong>
- 　<strong> テキスト</strong>
　　　 (実行時)
- 　<h1>
- 　<strong>テキスト</strong>
- 　<strong>テキスト</strong>
- 　</h1>

すべての strong 要素をまとめて１つの h1 要素で包むように変更します。
wrapAll() は、セレクタで指定した要素が複数ある場合、要素の間に含まれる別の要素やテキストを除外します。

全要素を別の要素で包むー別要素が間にある場合
- 　$("strong").wrapAll("<h1></h1>");

HTML（実行前）
- 　<strong>テキスト１</strong>
- 　テキスト２
- 　<strong> テキスト３</strong>
　　　 (実行時)
- 　<h1>
- 　<strong>テキスト１</strong>
- 　<strong>テキスト３</strong>
- 　</h1>
- 　テキスト２

テキスト２が追い出され、strong 要素だけが h1 要素で包まれます。

wrapInner() - 指定した要素の子要素を別の要素で包む

指定した要素の子要素やテキストを別の要素で包みたいときは、wrapInner() を使います。包みたい HTML タグを空の状態でカッコ内に記述します。

指定した要素の子要素別の要素で包む
- 　$("p").wrapInner("<strong></strong>");

HTML（実行前）
- 　<p>テキスト</p>
　　　 (実行時)
- 　<p><strong>テキスト</strong></p>

p 要素の中身のテキストを strong 要素で包むように変更します。

トップへ

６．親要素を取り除く

unwrap() - 親要素を取り除く

指定した要素の親要素を取り除く場合は unwrap() を使用します。

親要素を取り除く
- 　$("strong").unwrap();

HTML（実行前）
- 　<h1><strong>テキスト</strong></h1>
　　　 (実行時)
- 　<strong>置き換え後</strong>

strong 要素の親要素である h1 要素が取り除かれます。

トップへ

７．要素の置き換え

replaceWith() - 要素の置き換え

指定した要素を他の要素に置き換えるには、replaceWith() を使います。置き換え後の HTML を括弧内に記述します。

要素の書き換え
- 　$("p").replaceWith("<h1>置き換え後</h1>");

HTML（実行前）
- 　<p>テキスト</p>
　　　 (実行時)
- 　<h1>置き換え後</h1>

p 要素が h1 要素に置き換えて表示されます。

トップへ

８．要素の削除

remove() - 要素の削除

remove() を使うと、セレクタで指定した要素を削除します。

要素の削除
- 　$("p strong").remove();

HTML（実行前）
- 　<p><strong>強化された</strong>テキスト</p>
　　　 (実行時)
- 　<p>テキスト</p>

p 要素に含まれる strong 要素が削除されます。

トップへ

９．属性値の変更と取得

attr(…,…) - 属性値の変更

attr() を使って属性値を変更します。attr() は。変更したい属性名と変更後の属性値を括弧内に , (カンマ)区切りで指定します。

属性値の変更
- 　$("a").attr("href","http://pasobora.jp/");

HTML（実行前）
- 　<a href="http://ascii.jp/">リンク先</a>
　　　 (実行時)
- 　<a href="http://pasobora.jp/">リンク先</a>

a 要素の href 属性の値が http://ascii.jp/ から http://pasobora.jp/ へ変更になります。

attr() - 属性値の取得

attr() を使います。括弧内に属性名のみを指定すると、指定した属性値を取得できます。

属性値の取得
- 　$("a").text($("a").attr("href"));

HTML（実行前）
- 　<a href="http://pasobora.jp/">リンク先</a>
　　　 (実行時)
- 　<a href="http://pasobora.jp/">http://pasobora.jp/</a>

a 要素の href 属性の値を取得し、取得した値を text() で a 要素内のテキストとして書き換えています。

removeAttr() - 属性値の削除

セレクタで指定した要素に特定の属性が設定されているとき、removeAttr() で属性を削除します。

属性値の削除
- 　$("a").removeAttr("target");

HTML（実行前）
- 　<a href="http://pasobora.jp/" target="_blank">リンク先</a>
　　　 (実行時)
- 　<a href="http://pasobora.jp/">リンク先</a>

a 要素の target 属性が削除されます。

トップへ

１０．class 属性の追加と削除

addClass() - class 属性の追加

class 属性を追加するには addClass() を使います。括弧内に追加したい class 属性を記述します。複数の class 属性をスペース区切りで追加できます。

class 属性の追加
- 　$("p").addClass("red");

HTML（実行前）
- 　<p>　テキストテキストテキスト</p>
　　　 (実行時)
- 　<p class="red">　テキストテキストテキスト</p>

p 要素に red という class 属性が追加されます。

removeClass() - class 属性の削除

class 属性の削除には removeClass() を使います。括弧内に削除したい class 属性の値を記述します。複数の class 属性をスペース区切りで記述できます。

class 属性の削除
- 　$("p").removeClass("red");

HTML（実行前）
- 　<p class="red">　テキストテキストテキスト</p>
　　　 (実行時)
- 　<p>　テキストテキストテキスト</p>

p 要素の red という class 属性が削除されます。

トップへ

１１．CSSの制御

css(…,…) - CSSプロパティの設定

css() を使って CSS プロパティの値を設定します。括弧内にプロパティ名と値を, （カンマ区切り）で記述します。

class プロパティの設定
- 　$("p").css("color","red");

p 要素の color プロパティの値が red（赤色）に変更されます。

複数の CSS プロパティの値を同時に設定する場合は、括弧内に以下のような形式で記述します。

class プロパティの設定
- 　$(セレクタ).css({
- 　　"プロパティ名１" : "プロパティの値" ,
- 　　"プロパティ名２" : "プロパティの値" ,
- 　　（中略）
- 　　"プロパティ名ｎ" : "プロパティの値"
- 　});

プロパティ名とプロパティの値は :（コロン）でつなぎ、値は "（ダブルクォーテーション）で包みます。CSS はグループセレクタのように ,（カンマ）でつなげていきます。

css(…) - CSS プロパティの値の取得

CSSプロパティの値を取得するには、css() のカッコ内に値を取得したいプロパティ名を記述します。

CSS プロパティの値の取得
- 　$("p").text($("p").css("color") );

HTML（実行前）
- 　<p>　テキストテキストテキスト</p>
　　　 (実行時)
- 　<p>rgb(0, 0, 0)</p> 　あるいは　<p>#000000</p>

p 要素の color プロパティの値を取得し、 text() を使って p 要素内にテキストとして書き込まれます。（color プロパティの値の形式はブラウザによる違いがある。）

トップへ

１２．メソッドチェーン

jQuery のコードの書き方に関しての重要なものです。

jQuery では、命令と命令を、 . （ドット）でつなげて記述することができます。１つのセレクタに対して２つ以上の命令を連続して実行できます。こうした記述方法を メソッドチェーン と言います。

メソッドチェーン

同じセレクタに対して複数の命令を指定する。
- メソッドは左（メソッドＡ）から順に実行される。各メソッドの処理対象は基本的に、最初の $() 関数によって生成される jQuery オブジェクトです。

メソッドチェーン（例１）
- 　$("p").prepend("<strong>先頭に挿入</strong>")
- 　　　　.append("<strong>最後に挿入</strong>");

メソッドチェーン（例２）
- $(function(){
- 　$('#typo')
- 　　.on('mouseover', function(){
- 　　　$('#typo').css({
- 　　　　color: '#ebc000',
- 　　　　backgroundColor: '#ae5e9b'
- 　　　});
- 　　})
- 　　.on('mouseout', function(){
- 　　　$('#typo').css({
- 　　　　color: '',
- 　　　　backgroundColor: ''
- 　　　});
- 　　});
- });

メソッドチェーンのメリットは、プログラムの処理速度が向上することです。$() 関数の記述を減らすことで、毎回セレクタから要素を集める処理が少なくなり、jQuery オブジェクトを複数のメソッドで使いまわせることになり、プログラムの処理速度が向上します。

トップへ

次に、jQuery の命令を見てみましょう。

資料小分類

資料大分類

リンク

text(…) - テキストの変更

text() - テキストの取得

html(…) - HTML の変更

html() - HTML の取得

prepend() - HTML 要素内の先頭に挿入

append() - HTML 要素内の最後に挿入

before() - HTML 要素の前に挿入

after() - HTML 要素の後ろに挿入

prependTo() - HTML 要素内の先頭に移動

appendTo() - HTML 要素内の最後に移動

insertBefore() - HTML 要素の前に移動

insertAfter() - HTML 要素の後ろに移動

wrap() - 各要素を指定した要素で包む

wrapAll() - 全要素を別の要素で包む

wrapInner() - 指定した要素の子要素を別の要素で包む

unwrap() - 親要素を取り除く

replaceWith() - 要素の置き換え

remove() - 要素の削除

attr(…,…) - 属性値の変更

attr() - 属性値の取得

removeAttr() - 属性値の削除

addClass() - class 属性の追加

removeClass() - class 属性の削除

css(…,…) - CSSプロパティの設定

css(…) - CSS プロパティの値の取得

メソッドチェーン