2023-07-11:レバテックフリーランス様のサイトで当サイトがご紹介されました
コーディングの勉強

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

 

こんにちは。mito（@mito_works）です。

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

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

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

30DAYSトライアルの始め方

mito
mito
30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

4. 30DAYSトライアル【コーダーとして企業と仕事ができる実力をつけよう】

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-」から始まる属性名を自由に設定できるよ！

 

30DAYSトライアル jquery
ABOUT ME
mito
こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。
RELATED POST