【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(<要素名></要素名>) | 要素を他の要素で包む |
| wrapAll(<要素名></要素名>) | 要素をまとめて他の要素で包む |
| wrapInner(<要素名></要素名>) | 子要素/テキストを他の要素で包む |
| 要素の置き換え | |
| replaceWith(置換後の要素) | 要素を他の要素に置き換える |
| 要素の削除 | |
| remove() | 要素を削除する |
| 属性値の変更と取得 | |
| attr(属性名, 属性値) | 指定した属性の値を変更する |
| attr(属性名) | 指定した属性の値を取得する |
| removeAttr(属性名) | 指定した属性を削除する |
| class属性の追加と削除 | |
| addClass(class属性値) | class属性を追加する |
| removeClass(class属性値) | class属性を削除する |
| CSSの制御 | |
| css(プロパティ名,値) | 指定したCSSプロパティの値を設定する |
| css(プロパティ名) | 指定したCSSプロパティの値を取得する |
| フォーム部品の操作 | |
| val（"入力値"） | フォームの入力値（val ue属性の値）を変更する |
| val（） | フォームの入力値（val ue属性の値）を取得する |
■Amazon.co.jpで購入
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)西畑 一馬(著)アスキー・メディアワークス
