Help us understand the problem. What is going on with this article?

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

【メリット】

■ 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"});
    });
});

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

tanaka-yu3
さくっと30秒で読める記事をたくさん 初学者向け
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした