「あとで」読まずに今すぐ始める

40分で覚える！jQuery速習講座

2010年02月16日 11時00分更新

文● 西畑一馬／to-R

【10分目：基礎編】
jQueryでHTML/CSSを操作する

　jQueryにはさまざまな機能がありますが、Web制作者にとっては「HTML/CSSを操作するためのライブラリー」と考えておけば間違いありません。jQueryでHTML/CSSを操作するには、次のような書式でjQueryの命令を記述します。

　jQueryの命令は豊富にあり、たとえばhtml()という命令を使うと、セレクターで指定した要素の内側を変更できます。

▼サンプル1（スクリプト部分）


$("p#first").html("<strong>変更後</strong>");

　上記のサンプルコードを実行すると、id属性に「first」が設定されているp要素の内容が、<strong>変更後</strong> に変わります。

▼サンプル1（元のHTML部分）


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

▼サンプル1（実行結果）


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

　CSSを変更する場合は、css()という命令を使います。css()はCSSプロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述します。

▼サンプル2（スクリプト部分）


$("p").css("color","red");

　上記のサンプルコードを実行すると、p要素のCSSのcolorプロパティがredに変わり、p要素のテキストが赤色で表示されます。

▼サンプル2（元のHTML部分）


<p>テキストテキストテキストテキストテキスト</p>


サンプル2の実行画面（画像クリックでサンプルページを表示します）

　このように、jQueryではさまざまな命令でHTMLやCSSを操作できます。次の表を参考に、使える命令を少しずつ増やしていきましょう。

【参考：あとで覚える】
jQueryで利用できる主なHTML/CSSを操作する命令

命令名・書式	意味
テキストの変更と取得
text(変更後のテキスト)	テキストを変更する
text()	テキストを取得する
HTMLの変更と取得
html(変更後のHTML)	HTMLを変更する
html()	HTMLを取得する
HTMLの挿入
prepend(挿入するHTML)	要素内の先頭にHTMLを挿入する
append(挿入するHTML)	要素内の最後にHTMLを挿入する
before(挿入するHTML)	要素の前にHTMLを挿入する
after(挿入するHTML)	要素の後にHTMLを挿入する
HTMLの移動
prependTo(移動先のセレクター)	他の要素内の先頭に要素を移動する
appendTo(移動先のセレクター)	他の要素内の最後に要素を移動する
insertBefore(移動先のセレクター)	他の要素の前に要素を移動する
insertAfter(移動先のセレクター)	他の要素の後に要素を移動する
他の要素で包む
wrap(<要素名></要素名>)	要素を他の要素で包む
wrarpAll(<要素名></要素名>)	要素をまとめて他の要素で包む
wrapInner(<要素名></要素名>)	子要素/テキストを他の要素で包む
要素の置き換え
replaceWith(置換後の要素)	要素を他の要素に置き換える
要素の削除
remove()	要素を削除する
属性値の変更と取得
attr(属性名, 属性値)	指定した属性の値を変更する
attr(属性名)	指定した属性の値を取得する
removeAttr(属性名)	指定した属性を削除する
class属性の追加と削除
addClass(class属性値)	class属性を追加する
removeClass(class属性値)	class属性を削除する
CSSの制御
css(プロパティ名,値)	指定したCSSプロパティの値を設定する
css(プロパティ名)	指定したCSSプロパティの値を取得する
フォーム部品の操作
val（"入力値"）	フォームの入力値（val ue属性の値）を変更する
val（）	フォームの入力値（val ue属性の値）を取得する