More than 3 years have passed since last update.

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

Last updated at 2020-06-13Posted at 2020-06-05

##【メリット】
■　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"});
	});
});

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up