#6 progateでjQueryを学んでwebエンジニアを目指す!~jQueryの基礎編~

jQuery
この記事は約7分で読めます。
スポンサーリンク

webエンジニアを目指して勉強中の私の学習記録シリーズ。

前回までにprogateの【HTML&CSS】は終わりましたので、今回から【jQuery】を勉強します。

webエンジニアへの道

webエンジニアを目指して勉強する当ブログ管理人の記録です

progate学習記録

プログラミングのオンライン学習サービス[progate]を使って学習した記録です

jQueryとは

jQueryとはHTML&CSSで書いたwebページにアニメーションなどの動きをつけるためのもの。

javascriptというプログラミング言語から、web用の機能を簡単に使えるようにまとめたライブラリがjQueryです。

マウスを重ねた時の処理やクリックしたときの処理など、jQueryを身につけることで近代的なwebページを作ることができるようになります。

学んだコース

今回学んだのはprogateの【jQuery初級編】。

内容はjQueryの基本的な使い方と、いくつかの機能の実装。

さくさくと勉強することができるのでprogateは本当にお勧めです。

学んだ内容をアウトプット!

今回も今までと同様、勉強した内容を生かしてwebページを作成しました。

といっても今回はjQueryの練習をメインとしたページで、実際にあるようなページではありません。

しかしwebページを1から作っていくことで前回までに勉強したHTML&CSSの復習にもなりますし、記憶が定着しやすくなりますのでこれからも続けていきます。

今回作成したwebページはこちら。レスポンシブ対応させたのでスマホでも見ることができると思います。

jQuery練習

下の備忘録で紹介する関数なども実装してありますので、例が見たい方は見てみてください。

学んだ内容の備忘録(jQuery)

今回学んだ内容をまとめます。

jQueryの準備

jQueryを使うには、まずhtmlのheadタグ内でjQueryを読み込む必要がある。

その後、作ったjQueryのファイル(.js)も読み込む。

<head>
  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  ...
</head>

<body>
   <script src="script.js"></script>
</body>

jQueryの書き方

新規ファイル作成で、xxxx.jsというファイルを作りこの中に記述していく。

jQueryは$(‘対象のセレクタ’).動作;という形で記述する。

例えば、hideクラスを隠したいときは以下のようになる。

$('.hide').hide();

jQueryでは対象が一つならばidを使ったほうが動作が快適になるらしい。

このボタンを押したら→どうする  という処理の時はidを使うとよい

対象がクリックされたときの関数 .click()

ここからはより具体的な例。

対象がクリックされたときに処理をさせたいときは、以下のように記述する。

$('#btn0').click(function(){
  させたい処理;
});

$(‘セレクタ’).click(function(){});の形。function(){}にさせたい処理を書く。

対象にマウスが乗った時/離れた時の関数 .hover()

.hoverは対象にマウスが乗った/離れた時に動作する。

$(‘セレクタ’).hover(function(){},function(){});の形。

一つ目のfunctionに載った時の処理を書き、二つ目には離れた時の処理を書く

$('.hv').hover(function(){
  載った時にさせたい処理;
},
function(){
  離れた時にさせたい処理;
});

対象を隠す .hide()

.hideで対象を隠す。jQueryで出現させたいとき、まずhideにしておく時などに使う。

cssでのdisplay:noneと同じ役割。

$('#hoge').hide();

対象を出現させる .show()

hideとは逆に見せるときはshowを使う.

showとhideなどとclick,hoverなどを組み合わせることで「ボタンを押したら出現する」などが作れる。

$('#hoge').show();

ゆっくり隠す .fadeOut()

hideはぱっと消えるが、ゆっくりフェードアウトするのがfadeOut()

$('#hoge').fadeOut();

ゆっくり出現する .fadeIn()

showはぱっと現れるが、ゆっくり現れるのがfadeIn()

$('#hoge').fadeIn();

スライドして消える .slideUp()

上方向にスライドしてぱっと消える .slideUp()

$('#hoge').slideUp();

スライドして出てくる .slideDown()

下方向にスライドして出てくる .slideDown()

$('#hoge').slideDown();

CSSのプロパティを操作する .css(‘プロパティ’,’値’)

cssのプロパティ(colorとかfont-sizeとか)を操作するには.cssを使う。

$(‘対象のセレクタ’).css(‘プロパティ’,’値’);という形式。

下のコードではhogeというIDのところの文字色が赤くなる。

$(#hoge).css('color','red');

すべての子要素を探す .find()

親要素に対して適応し、すべての子要素を探すのがfind()

下のコードでは、parentクラスの子要素の<p>タグすべての枠線を赤くする。

findでは孫の位置にある要素も取得できる。

$('.parent').find('p').css('border','solid red 2px');

直下の子要素を探す.children()

childrenは親に対して適応し、一つ下(孫までいかない)にある子要素を探す。

$('.parent').children('p').css('border','solid blue 2px');

.hoverや.clickの対象を示す$(this)

.hoverや.clickなど、「乗ったら」や「クリックしたら」の時に「何に乗った/クリックしたか」を示すのがthis

処理を書く時に指定しなくてよくなるので簡単になる。

したのコードでは、btnクラスにマウスが乗ったときの中にあるthisなので、thisはbtnクラスを指す

$('.btn').hover(function(){
  $(this).css('background-color','rgba(249, 159, 72,1)');

},function(){
  $(this).css('background-color','rgba(249, 159, 72,0.7)');
});

まとめ

jQueryの勉強を開始し、webページに少しずつ動きをつけることができるようになってきました。

もう少し勉強すればサイトによくあるスライドショーやメニュー表示などができるようになりそうです。

これからも勉強を続けていくので応援よろしくお願いします。

現在同じように勉強中の方は一緒に頑張りましょう!

コメント

タイトルとURLをコピーしました