デイトラ初級コース振り返り中

振り返った時に「ああ、こうだったな」とすぐにわかるようなふうにしないといけないな。でも、これだとわかりにくいところもあるような。
冗談でもなんでもなく、ちょっとした１行をすんなり書けない。
振り返ってさがして、ようやく見つけて、みたいなことの繰り返しで甚だ効率が悪い。
考えてみれば昔からノートを取るのが不得手だったなあと思う。

// ーーーーーーーーーーDAY17 jQueryを学ぼう①ーーーーーーーー


// jQuery("主語").動詞("補語")　　
// jQuery("セレクタ").メソッド("パラメータ")

document.querySelector("#js-title").innerText = "Daily Trial"

// ⚫︎jQueryでも同じように書いてみる↓↓↓
jQuery("#js-title").text("daily trial");
                    // .text ←　HTML要素のテキストを操作するメソッド

jQuery("#js-title").css("color","red");
    // ⚫︎これで文字が赤くなる、、ID,クラス、タグで指定できる
jQuery(".text").css("color","red");
jQuery("h1").css("color","red");


jQuery("[href]").css("color","red");
    // ⚫︎属性で指定するときは("[属性名]")と書く。

jQuery("h1, h2").css("color","red");
    // ⚫︎セレクタを二つ同時に指定することもできる

const elements = jQuery(".text");
    // まず定数elementsを定義する,,,textクラス要素を全て取得
elements.each(function(){
    console.log(jQuery(this).text());
    // 　⚫︎ .each(function())　で繰り返し処理を行う
})

// #js-sectionを起点に子孫要素のpタグを操作
jQuery("#js-section").find("p").css("color", "red");

// #js-sectionを起点に子要素のpタグを操作
jQuery("#js-section").children("p").css("color", "red");

// ⚫︎ .find()と.children()メソッドは似ていますが、.find()が子要素以下の階層から検索できるのに対して、.children()は直属の子要素のみ検索できます。



// ーーーーーーーーーーDAY18 jQueryを学ぼう②ーーーーーーーーーーー

    // jQuery("セレクタ").メソッド("パラメータ")
    // メソッドとは命令文(クラスを追加して、模試を変更して)など。
    // パラメーターとは具体的な内容、引数と呼ぶ。

    // クラスの追加
jQuery("#js-btn").addClass("btn-register");
    // ID  js-btn に btn-registerというクラスを追加する。

    // クラスの削除
jQuery("#js-register").removeClass("btn-register");
    // addClassなどを使用する際は追加削除したいクラス名の頭にドット(.)は不要

    // cssプロパティの設定
jQuery("#js-title").css("color", "red");
    // cssのプロパティは複数まとめて指定することもできる
jQuery("#js-title").css({
    color: "red",
    fontSize: "80px"
});
//  ハイフンが含まれる場合は後ろを大文字にする(例　font-size→fontSize）キャメルケースという

    // 文字列の変更
jQuery("#js-title").text("daily trial");

const title =jQuery("#js-title").text();
alert(title);
    // .text() というメソッドは、要素のテキストの取得という使い方もできる








// ーーーーーーーーーーメソッドチェーンーーーーーーー
    // 一つのセレクタに対して複数のメソッドを指定する場合、メソッドを繋げて書くこともできます。
jQuery("#js-title").css("color", "red").text("daily trial");


// -----------メソッドを使ったアニメーション--------------
    // まずはtitleクラスをnone displayで非表示にしておきましょう。

// .fadeIn()  フワッと表示。1500などで秒数設定
jQuery("#js-title").fadeIn(1500);

// .fadeOut()  フワッと消える。
jQuery("#js-btn").fadeOut();

// .slideDown()  スライドして表示。
jQuery("#js-title").slideDown();


// .slideUp()  スライドして消える。
jQuery("#js-btn").slideUp();


// ーーーーーーーーイベントの監視ーーーーーーーーー
// イベントの構文は 
// jQuery("セレクタ").on("イベント名", function() {}) という構文で書きます。
// 例えば、クリックされたときに何か処理を追加したい場合は
jQuery("セレクタ").on("click", function() {
// //ここに処理を書く
});

// スクロールしたときに何か処理を追加したい場合は
jQuery("セレクタ").on("scroll", function() {
// //ここに処理を書く
});

    // イベント監視（click編)
jQuery("#js-btn").on("click",function(){
     jQuery("#js-title").text("daily trial").css("color", "red");
});

    // イベント監視(hover編)
        //ちょっと特殊。ホバーされた時、ホバーを外した時、ふたつのイベントを書く。
jQuery("#js-title").on({
    mouseenter: function (){
        jQuery(this).css("color","orange");
    },
    mouseleave: function(){
        jQuery(this).css("color","#082b48");
    }
});


jQuery("#js-title").on({
    mouseenter: function ()
});


    // ここでは両者の違いには触れませんが、イベントの構文は
    // jQuery("セレクタ").イベント名(function(){ });
    // を使って書く方法もあります！
//     例えば、クリックされたときに何か処理を追加したい場合は
// jQuery("セレクタ").click(function(){
//     //ここに処理を書く
// });
    
//     スクロールしたときに何か処理を追加したい場合は
// jQuery("セレクタ").scroll(function(){
//     //ここに処理を書く
// });  
//     という風に書いていきます。