コーディングの勉強

30DAYSトライアル〜jQueryの基礎を学ぶDAY4~6〜

こんにちは。mito(@mito_works)です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何?どうやって始めるの?といった疑問をお持ちの方、こちらをご覧ください。

mito
mito
30DAYSトライアルの2ndステージ。より実践レベルのトライアルです!
momo
momo
2ndのDAY4~6はprogateを使ってjQueryを学んでいくよ!

jQueryとは

QueryはJavaScriptのライブラリの1つでHTMLとCSSだけでは実現できなかったアニメーションなどの動きを実現します。

基本の書き方

  1. jQueryオブジェクトを作成
  2. そのjQueryオブジェクトに対してメソッド(機能)を呼び出す

①$(‘セレクタ’)②.メソッド(引数);

例) $(‘h1’).hide();

momo
momo
jQueryのオブジェクトは$(‘セレクタ’)で生成される配列のような構造をしているものだよ!セレクタにはHTMLのタグ名やclass名などを指定してね。
mito
mito
jQueryのオブジェクトの中身は合致した要素が配列のように並んでいるんだね〜。
Tips

メソッドのhide();と似たものとしてfadeOut();があります。後者の場合アニメーションをつけることが可能です。

要素を非表示にしたい hide(); fadeOut(); slideUp();
非表示を表示したい show(); fadeIn(); slideDown();
css要素を変更したい css(‘プロパティ名’,’値’;) ex) css(‘display’,’block’);
文字列を置き換えたい text(”置き換えたい内容);
htmlを置き換えたい html(置き換えたい内容);
子要素全て取得したい find(‘セレクタ’);
1階層下の子要素を取得したい children(‘セレクタ’);
クラスを付与したい addClass(‘クラス名’);
クラスを外したい removeClass(‘クラス名’);
引数に指定したクラスを、オブジェクトが持っているか判定したい hasClass(‘クラス名’);
指定したindex番号の要素を取り出したい eq(数字);
特定の要素のindex番号を取得したい index($(‘セレクタ’));  ex)$(‘.index-btn’).index($(this)); //クリックしたボタンの番号取得
兄弟要素(同じ階層の要素)の中から一つ前の要素を取得したい prev();
兄弟要素(同じ階層の要素)の中から一つ後の要素 next();
要素の個数を取得したい length();
HTML属性をget、setしたい attr();
値を取得したい val();
値をセットしたい val(‘セットしたい値’);
アニメーションをつけたい animate({‘プロパティ’: 値},秒数);
ページ上部から指定したpxの場所へ移動したい $(‘html, body’).scrollTop(0); //最上部の場合は0
スクロールにアニメーションをつけたい $(‘html, body’).animate({‘scrollTop’: 0}, 時間);
要素の表示位置を取得したい $(‘h1’).offset(); //h1要素の表示位置 (topからxx、leftからxxなど)

$(‘h1’).offset().top; //トップからh1の距離

Tips

attr(‘id’, ‘topMessage’)のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。そして、第二引数を指定しない場合は、その属性の値を取得できます。

if文の中身の=は2つで繋げます。

if (Index == 0) {
      $('.prev-btn').hide();
    } else if (Index == $('.slide').length-1) {
      $('.next-btn').hide();
}

classとidの使いわけ

idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されます。
なので、jQueryオブジェクトのセレクタにはidを使うことが推奨されています。

処理を行うタイミングの指定

イベントを用いると処理を行うタイミングを設定できます。

mito
mito
例えば、このボタンが押されたらモーダルを開くなどです。

$(‘セレクタ’).イベント名(function(){ });

 $('#open-btn').click(function(){
    $('#modal').fadeIn();
  });
クリック時のイベント click(function(){});
ホバー時のイベント hover(function(){},funtion(){});
送信時のイベント submit(function(){});
momo
momo
hoverはマウスを①乗せたとき、②離した時の設定をするため引数は2つだよ。

thisの使い方

thisを使うと、実際にイベントが起こった要素を取得できます。

momo
momo
例えば複数行あるリストの中のクリックした行のみの要素を取得したい場合などに使うよ。
  $('.li').click(function(){
    $(this).css('color','blue');
  });

 

変数の宣言

変数宣言にはvarを使います。

var 変数名= 要素;

jQuery使用の準備

  1. <head>タグの中でjQueryライブラリを読み込む
  2. </body>の直前にjsファイルを読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
momo
momo
<script>はCSSファイルの読み込みのように<head>タグの中にも書けるけれど、</body>の直前に書くことで、Webページの表示速度をより早めることができるよ!

カスタムデーター属性

属性は自分でつくることもできます。これをカスタムデータ属性と言います。

momo
momo
data-」から始まる属性名を自由に設定できるよ!

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始めました。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、フリーランスを模索しています。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。