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

jquery(ジェイクエリー)リファレンス。基本的な命令一覧のまとめ。

jquery(ジェイクエリー)リファレンス。基本的な命令一覧のまとめ。

「jQueryの基本的な命令を一覧で確認したい。」

「久しぶりのjQueryコーディングで、命令を忘れてしまった。」

「HTMLのid、classの取得、フェードインやマウスオーバーイベントってどう書くんだっけ…?」

 

この記事はそんな方へ向けて書いています。

Webサイトに手軽にスタイリッシュな動きをつける事ができるjQuery(ジェイクエリー)。

初心者の方のコーディング中の確認用として、また、中級者の方が命令のつづりを忘れてしまった時にパッと確認できる日本語リファレンスとして、
基本的なjQuery(ジェイクエリー)の命令を一覧でまとめてみました

jQueryを扱う際の虎の巻としてご活用ください。

jQueryの基本的な命令一覧

jQueryの基本的な命令一覧

HTML/CSSを操作するjQueryの命令

jQueryのHML/CSSを操作する命令一覧
命令意味
変更と取得
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プロパティの値を取得する

 

jQueryのイベント命令一覧

jQueryのイベント命令一覧
命令意味
click()クリックした時に処理を実行
dblclick()ダブルクリックした時に処理を実行
mousedown()マウスのボタンが押された時に処理を実行
mouseup()マウスのボタンが離された時に処理を実行
mouseover()マウスオーバーした時に処理を実行
mouseout()マウスアウトした時に処理を実行
mousemove()マウスが移動した時に処理を実行
one()イベントが発生した時に一度だけ処理を実行
on()なにかイベントが発生した時に特定の処理を実行
off()設定されているイベント処理を取り消す

 

jQueryのアニメーション関係の命令一覧

jQueryのアニメーション関係の命令一覧
命令意味
show(…)要素を徐々に表示する
hide(…)要素を徐々に非表示にする
toggle(…)要素の表示・非表示を徐々に切り換える
slideDown(…)要素をスライドダウンのアニメーションで表示する
slideUp(…)要素をスライドアップのアニメーションで非表示にする
slideToggle(…)要素の表示・非表示をスライドアニメーションで切り換える
fadeIn(…)要素をフェードインで表示する
fadeOut(…)要素をフェードアウトで非表示にする
fadeTo(…)要素の透明度を指定した値に徐々に変更する
animate(…)任意のCSSプロパティの値を徐々に変更する

 

jQueryの初期設定と基本的な書き方

jQueryの基本的な書き方の再確認

jQueryの本体コードを読み込む

一番手軽にできるのが、Google Hosted Librariesからリンクを引っ張ってくる方法です。

Google Hosted Libraries で提供されているjQueryの本体コードのリンクをコピーし、HTMLのheadタグ、もしくはbodyの閉じタグの直前に貼り付けをすることで、jQueryを使う準備が整います。

2019年8月現在のjQuery最新のバージョンは下記コードです。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>

 

ちなみに、上記のコードをwebサイトに設置してjQueryを利用する方法は、あくまで方法の1つです。

jQueryの本体コードをダウンロードして設置する方法など、jQueryの初期設置について詳しくはコチラのページでも詳しく解説しています。

もっと詳しく知りたい方は是非そちらのページを参考にしてみてください。

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...

 

jQueryの基本的な書き方

jquery(ジェイクエリー)の基本的な書き方の再確認

基本的な型

$(function() {何かしらの命令});


 

例)HTMLのsampleクラスの中の、strongタグの文字を赤色にしたい。

$(function() {
 $(“.sample strong”).css(“color”, “#ff0000”);
});

 

jQueryの基本的な書き方の型は上記の通りです。

前半の①部分でHTMLのjQueryを適用したい要素を指定し、後半の②で適用する命令を記述します。

また、jQueryのスクリプトはヘッダーもしくは、bodyタグの終了直前に書いていきます。
以前はヘッダーに書く事が慣習でしたが、現在は読み込み速度の影響を考慮して、bodyの終了タグの直前に書く事が主流になっています。

jQueryの基本的な書き方については、コチラのページで解説しています。
もっと詳しく知りたい方は是非参考にご覧ください。

【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】なんか小難しくて、jQueryの書き方がスッキリ分からない…。そんな方へ向けて、jQueryの基本的な書き方として、CSSの指定の仕方を例に簡単、分かりやすく解説しています。jQueryプラグインの設置やカスタマイズでお困りの方は是非参考にご覧ください。...

 

まとめ

jquery(ジェイクエリー)リファレンス。基本的な命令一覧のまとめ。

Web業界は日進月歩でスピードが早く、次々と様々な言語が出てきてきます。

僕自身も新たな言語を身につけようと勉強すればするほど、覚えたはずのjQuery言語の書き方が頭の中でごっちゃになってしまい、いざ書こうととすると
「あれ、どう書くんだっけ…?」
みたいな事によくなります(^ ^;)

そういった自分の経験もあり、この記事を作成してみました。

Webデザイン初心者の方はもちろん、中級者の方も忘れてしまった時のリファレンスとして、この記事をご活用いただければ幸いです。

 

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...
【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】なんか小難しくて、jQueryの書き方がスッキリ分からない…。そんな方へ向けて、jQueryの基本的な書き方として、CSSの指定の仕方を例に簡単、分かりやすく解説しています。jQueryプラグインの設置やカスタマイズでお困りの方は是非参考にご覧ください。...
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...
【無料】プログラミングなんて自分にできるの?一番簡単に最短でスキルを身に着ける方法。
こがねさん
こがねさん

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

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

無料体験コース開催中!オンラインプログラミングスクール「TechAcademy」

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

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

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

僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。

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

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

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

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

その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。

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

スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。

登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。

無料体験コース開催中!オンラインプログラミングスクール「TechAcademy」

 

関連記事