jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる！】
「値の変更、取得、取得して変更するといった基本的な使い方を確認したい。」
「サンプルでササッと使い方を把握したい」
本記事では、
・jQueryを使ったHTML、CSSを操作する基本的な命令一覧
・値を「変更する」「取得する」「取得して変更する」といった基本的な書き方の例
を瞬時に分かりやすく把握できる様に、サンプルを付きでまとめています。
ぜひご参考にご覧ください。
HTML／CSSを操作するjQueryの命令一覧
| HML/CSSを操作するjQueryの命令 | |
| 命令 | 意味 |
| 変更と取得 | |
| text(変更後のテキスト) | カッコ内のテキストに変更 |
| text() | テキストを取得 |
| 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(囲う要素) | 子要素をカッコ内の要素で包む |
| 親要素を取り除く | |
| unwrap() | 親要素を取り除く |
| 要素の置き換え | |
| replaceWith（置き換える要素） | 要素をカッコ内の要素に置き換える |
| 要素をカッコ内の要素に置き換える | |
| remove(削除する要素) | 要素を削除する |
| 属性値の変更と取得 | |
| attr(値を変更する属性A, Aに入れる値B) | 指定した属性Aの値をBに変更する |
| attr(取得する属性の値) | 指定した属性の値を取得する |
| removeAttr(削除する属性) | 指定した属性を削除する |
| class属性の追加と削除 | |
| addClass(追加するクラス名) | class属性を追加する |
| removeClass(削除するクラス名) | removeClass(削除するクラス名) |
| CSSの制御 | |
| css(“A”, “B”) | 指定したCSSプロパティAにBの値を設定する |
| css(取得するCSSプロパティ) | 指定したCSSプロパティの値を取得する |
HTML／CSSを操作するjQueryの基本的な3つの命令
HTML、CSSを操作するjQueryの書き方として、大きく
- 変更する。
- 取得する。
- 取得したものに変更する。
という方法があります。
その3つの方法を詳しく解説していきます。
HTML／CSSを操作するjQueryの命令1 – 変更する
jQuery変更命令のコードサンプル
jQuery変更命令の実行用サンプル
See the Pen
jquery_sample1 by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
上記のスクリプトは、
id=”test”が付けられたpタグの中の要素に変更を加える命令のサンプルです。
「コードサンプル」はコードの見本で、「実行用サンプル」はボタンをクリックしたらスクリプトが適用される様にカスタマイズしています。（スマホの方はデスクトップパソコン表示にして試してみてください。）
上記htmlコードにScriptを適用するとpタグが
<p id=”test”>変更前</p>
↓
<p id=”test”><strong>変更後</strong></p>
に変更されます。
HTML／CSSを操作するjQueryの命令２ – 取得する
jQuery取得命令のコードサンプル
上記の様にスクリプトを書くと、
id=”test”が付けられたpタグの中の要素が取得されます。
上記スクリプトを適用すると、
<strong>変更前</strong>
が取得されます。
しかしこれだけでは次の動きが命令されていないので何も起こりません。
基本的には次の「取得して変更する」という事を行います。
HTML／CSSを操作するjQueryの命令3
– 取得して変更する
jQuery取得変更命令のコードサンプル
jQuery取得変更命令の実行用サンプル
See the Pen
jquery_sample2 by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
「コードサンプル」は見本として、「実行用サンプル」はコードサンプルを元にボタンをクリックしたタイミングでスクリプトが実行される様にカスタマイズしています。
上記のスクリプトは、「変更」と「取得」の合わせ技で、
id=”test1″が付けられたpタグの中の要素が取得され、
id=”test2″が付けられたpタグの中の要素を書き換えます。
上記スクリプトを実行すると、html内が
<body>
<p id=”test1″><strong>取得するテキスト</strong></p>
<p id=”test2″>変更前のテキスト</p>
</body>
↓
<body>
<p id=”test1″><strong>取得するテキスト</strong></p>
<p id=”test2″><strong取得するテキスト</strong></p>
</body>
に変化します。
まとめ
jQueryのHTML、CSSを操作する命令一覧と、「変更する」「取得する」「取得して変更する」といった基本的な書き方を、なるべく分かりやすい様に実行サンプル付きでまとめてみました。
またそれぞれのサンプルを追加した記事を随時アップしていきます。
jQueryの書き方の確認用、現在勉強中の方や、どんな事ができるか知りたい方の参考としてご活用いただけれれば幸いです。
