デザイン・プログラミングなど

jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】

jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
こがねさん
こがねさん
「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の命令2 – 取得する

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のHTML、CSSを操作する命令一覧と、「変更する」「取得する」「取得して変更する」といった基本的な書き方を、なるべく分かりやすい様に実行サンプル付きでまとめてみました。

またそれぞれのサンプルを追加した記事を随時アップしていきます。

jQueryの書き方の確認用、現在勉強中の方や、どんな事ができるか知りたい方の参考としてご活用いただけれれば幸いです。

 

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...
【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】なんか小難しくて、jQueryの書き方がスッキリ分からない…。そんな方へ向けて、jQueryの基本的な書き方として、CSSの指定の仕方を例に簡単、分かりやすく解説しています。jQueryプラグインの設置やカスタマイズでお困りの方は是非参考にご覧ください。...
【jQuery】まとめて指定「メソッドチェーン」の書き方のアドバイス【分かりやすいデモサンプル付き】
jQuery - まとめて指定「メソッドチェーン」の書き方のアドバイス。分かりやすいデモサンプル付きjQuery(ジェイクエリー)で複数の命令をまとめて記述する「メソッドチェーン」の書き方をお探しですか?本記事ではサンプル付きで分かりやすくjQueryのメソッドチェーンの書き方について解説しています。書き方を忘れてしまった時の確認用として、勉強中の方の参考としてご活用ください。...
プログラミングなんて自分にできるの?そんな方はスクールの無料体験がオススメ。
こがねさん
こがねさん

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ…。」

AIソルトくん
AIソルトくん
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事がれば、あとは独学でも様々な言語に手を広げていく事ができます

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「短期間でプログラミングスキルを身に付けたい。」
「しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そんな方は最初に短期間スクールで学んでみる事もオススメです。

もちろん今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しています。

「余計な回り道を省いて、手っ取り早くしっかりとしたスキルを身に着けたい。」

そういった方は、実績のあるオンラインスクールを一度体験してみるという方法もあります。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でもTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースも用意されています。

独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料コースを体験してみると、プログラミング学習の行きづまりを解消すると共に、楽しさや将来への道が大きく開ける可能性があります。

無料コースを試してみてやめるもよし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみてください。
そうする事で様々なプログラミング言語の習得の難易度も一気に下がります。

奪われないし裏切らないスキルは、きっとあなたの人生の助けになります。

関連記事