デイトラWeb制作コース中級編DAY4の学び

【この記事に書いてあること】

プログラミング学習29日目⏩

Web制作コース中級編DAY4💻

学習時間:3時間3分⏳

学習内容:jQueryについて✏

学び📚
・セレクタの指定方法
・メソッドを使用した要素の指定
・イベント処理
・アニメーション#デイトラ #プログラミング初心者 #プログラミング学習 pic.twitter.com/sfwoA6Cl4r
— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 8, 2021

　【学び】

【jQueryの解説】

＜jQueryとは＞

JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの。
主にWebサイトやWebアプリケーションで使用されている。

＜jQueryのメリット＞

①　短いコードで書ける
②　ブラウザごとの対応がいらない
③　便利なライブラリがたくさんある

【jQueryの書き方】

＜jQueryを書くときの型＞

①　ｊQueryのライブラリ本体を最初に読み込む
②　ｊQueryで書いたファイルを読み込む

↓

maiin.js


<!-- jQueryのライブラリー -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<!-- jQueryで書いたファイル-->
<script src="js/practice.js"></script>

＜ｊQueryの書き方のルール＞

ポイント
①　＄マークで始まり
②　function()で囲む
③　$("主語").動詞("補語")の文法で書く
　
↓

maiin.js

$(function() {  
  //この中にプログラムを書いていく
});

*イメージは

主語：　セレクタ（id,class,tagの名前など）

動詞：　メソッド（どうしたいのか）

補語：　メソッドによって追加で条件式を足す（補語を書かなくていい時もある）

＜ｊQueryでのセレクタの指定方法＞

①　タグ名で指定する：$("タグ名")
②　クラス名で指定する：$(".クラス名")
③　ID名で指定する：$("#id名")

＜ｊQueryでプログラムを書いてみた＞

maiin.js

$(function(){
  const status = $('#user-status').val();　//val（） = フォームの入力値（value属性の値）を取得する
  const button = $('#register');

// HTMLデータから、statusとbuttonの値を取得できた

if(status === 'visiter'){
   button.text('登録');　//.text('変更したいテキスト') =    テキストを''内の文字列に変更する
   button.removeClass('btn-login'); //.removeClass(class属性値) = class属性を削除する
   button.addClass('btn-register'); //.addClass(class属性値) = class属性を追加する
}else if(status === 'user'){
 button.text('ログイン'); //.text('変更したいテキスト') =  テキストを''内の文字列に変更する
 button.removeClass('btn-register'); //.removeClass(class属性値) = class属性を削除する
 button.addClass('btn-login'); //.addClass(class属性値) = class属性を追加する
 $('.login-area').append('<a href="https://tokyofreelance.jp/" class="btn btn-withdraw">退会</a>')
 //.append('要素') = 要素の最後にHTMLを挿入する
}
});

【メソッドを使用した要素の指定】

＜fund()かchildren()の違い＞

子要素の中から探すときはこの２つのどちらかを使用する！

①　.find('セレクタ')
対象要素の子孫要素から、セレクタに該当するもの取得する

maiin.js

var texts = $('#js-for-web').find('p');
console.log(texts[0]);

//変数を「texts」と名付けて、id名「js-for-web」から、pタグの０番目を表示させる

＊ findは子孫要素全体から探してくるので、どの階層を指定してもOK！

②　.children('セレクタ')
対象要素の直属の子要素から、セレクタに該当するものを取得する

maiin.js

 var texts = $('#js-for-web').children('p');
console.log(texts[0]); 

//変数を「texts」と名付けて、id名「js-for-web」から、pタグの０番目を表示させる

＊　childrenは直属の子要素からしか探せないので、孫要素の指定はできない！

【イベント処理】

＜イベントの構文＞

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

＜click＞
ボタンがクリックされたときの処理

maiin.js

「#button」をクリックすると「#service-title」の文字が「デイトら」に変わる処理

↓
$("#button").click(function(){ 
 //.click() = 対象要素をクリックする
 $("#service-title").text("デイトラ") 
 //.text('変更したいテキスト') = テキストを''内の文字列に変更する
});

＜hover＞

hoverイベントはfunctionをコンマ区切りで2個続けて書く。
１　「ホバーされたときの処理」
２　「ホバーが外れたときの処理」

maiin.js


 $('セレクタ名').hover( 
    function() {
    //ここにホバーされたときの処理を書く
    },
    function() {
    //ここにホバーが外れたときの処理を書く
    }
  );　

↓

例：
  $("#service-title").hover(
    function() {
     $(this).css('color','orange');
     //.css(プロパティ名,値) = 指定したCSSプロパティの値を設定する
    },
    function() {
     $(this).css("color","#082B48");
　　　//.css(プロパティ名,値) = 指定したCSSプロパティの値を設定する
    }
  );

【アニメーション】

jQueryにはページに動きをつける様々なアニメーションが用意されている。

参考サイト: アニメーション一覧

＜スライドのように開閉して表示＞

maiin.js


 $('#service-title').hover(
  function(){
    $('#register').slideUp();
  },
  function(){
    $('#register').slideDown();
  }
); 

　/* [#service-title] に
　　ホバーしたとき、[register]が「slideUp」し、
　　ホバーを解除したとき、[register]が「slideDown」する */

＊　Q&Aで、Qにホバーした時に、Aが出てくる仕様などに使う

＜ふわっと浮き上がる表示＞

maiin.js


 $('#service-title').hover(
  function(){
    $('#register').fadeIn();
  },
  function(){
    $('#register').fadeOut();
  }
);

/* [#service-title] に
　　ホバーしたとき、[register]が「fadeIn」し、
　　ホバーを解除したとき、[register]が「fadeOut」する */

＊　クリックしたとき、写真がふわっと表示する仕様などに使う（モーダル）

jQueryを学ぶ

デイトラWeb制作コース中級編DAY4の学び

【この記事に書いてあること】

【学び】

　【学び】