「値の変更、取得、取得して変更するといった基本的な使い方を確認したい。」
「サンプルでササッと使い方を把握したい」
本記事では、
・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の書き方の確認用、現在勉強中の方や、どんな事ができるか知りたい方の参考としてご活用いただけれれば幸いです。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
