【jQuery】初心者でもよく理解できたやつ #Ruby

【メリット】

■　UXの向上
■　javascript理解度向上

【開発環境】

■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

【実装】

環境構築

■アプリケーションを作成

$ rails new hoge

$ cd hoge

$ rails s -b 0.0.0.0

■下記URLよりJquery.min.jsをダウンロード
　https://jquery.com/download/

■ダウンロード完了後、アプリケーション内assetsへ配置

【よく使った記述】

※以下はjsファイルへ記述。htmlファイルへ直書きする場合はタグが必要。

.css

※対象のCSSを変更。下記の場合は背景色が赤に

$(".hoge").css({"background-color":"red"});

.slideUp

※idでの指定は””内が「 . 」ではなく「 # 」になります
※対象のものが上に上がっていきます。

$("#hoge").slideUp(任意のスピード)

.slideDown

※対象が上から現れます。
※cssでhogeクラスにdisplay:none;を追加する必要があります。

$(".hoge").slideDown(任意のスピード)

.fadeIn

※hogeクラスがうっすら写ってきます
※CSSでhogeクラスに　display: none;を指定

$(".hoge").fadeIn(任意のスピード)

fadeOut

※hogeクラスがうっすら消えていきます

$(".hoge").fadeOut(任意のスピード)

.mouseover

※jquey使います
※対象にマウスが乗ると赤色に変わります。
※CSSのhoge::hoverと同義。

$(function(){
  $(".hoge").mouseover(function(){
    $(".hoge").css({"background-color":"red"});
  });
});

.mouseout

※こちらを追加しないと一生mouseoverで指定したままです
※マウスが外れると白色に戻す

$(function(){
  $(".hoge").mouseout(function(){
    $(".hoge").css({"background-color":"white"});
  });
});

.on("click", function)

※クリックすると発火します。
※対象をクリックすると背景色を赤に

$(function(){
  $(".hoge").on("click", function(){
    $(".hoge").css({"background-color":"red"});
  });
});

.this

※HTML
ファイルに下記を追記

/.html

    <body>
        <div class="box-container">
            <div class="box aa"></div>
            <div class="box bb"></div>
            <div class="box cc"></div>
            <div class="box dd"></div>
        </div>
    </body>

※CSSファイルに追記

/.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    background-color: white;
    height: 200px;
    width: 200px;
    float: left;
}

.aa {
    background-color: gray;
}

.bb {
    background-color: lightgray;
}

.cc {
    background-color: lightgreen;
}

.dd {
    background-color: green;
}

※jsファイルに追記
※この場合「this」はクリックされたものつまり「box」を指します
※クリックした背景色は赤に変更されます

$(function(){
  $("box").on("click", function(){
    $("this").css({"backgroun-color":"red"});
  });
});

.children

※htmlファイルに追記

/.html

<div>
  <ul>
    <li>aaaaaa</li>
    <li>xxxx</li>
    <li>ccccc</li>
    <li>vvvv</li>
    <li>dddd</li>
  </ul>
</div>

※jsファイルへ
※ulの配下のliが赤色の
文字へ変更されます。

$(function(){
    $("li").mouseover(function(){
      $("ul").children().css({"color":"red"});
    });

    $("li").mouseout(function(){
      $("ul").children().css({"color":"black"});
    });
});

以上です。
これだけで、結構動き着くので試してみたください！！！