[RUBY] [JQuery] A guy that even beginners could understand well

【merit】

■ Improvement of UX ■ Improved understanding of javascript

【Development environment】

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

【Implementation】

Environment

■ Create an application

$ rails new hoge

$ cd hoge

$ rails s -b 0.0.0.0

■ Download Jquery.min.js from the URL below 　https://jquery.com/download/

■ After the download is completed, place it in the assets in the application

[Frequently used description]

The following is described in the js file. tag is required when writing directly to an html file.

.css

Change the target CSS. In the following cases, the background color will be red

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

.slideUp

When specifying with id, the inside of "" is "#" instead of "."
Target items will go up.

$("#hoge").slideUp(Any speed)

.slideDown

The target appears from above.
It is necessary to add display: none; to the hoge class with css.

$(".hoge").slideDown(Any speed)

.fadeIn

The hoge class is slightly reflected.
Specify display: none; in the hoge class with CSS

$(".hoge").fadeIn(Any speed)

fadeOut

The hoge class will disappear slightly.

$(".hoge").fadeOut(Any speed)

.mouseover

Use jquery
When the mouse is placed on the target, it turns red.
Synonymous with hoge :: hover in CSS.

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

.mouseout

If you do not add this, it will remain specified in mouseover for the rest of your life.
Return to white when the mouse is removed

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

.on("click", function)

Click to ignite.
Click the target to change the background color to red.

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

.this ※HTML Add the following to the file

`/.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>

Added to CSS file

`/.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;
}

Added to js file
In this case, "this" means the clicked one, that is, "box".
The background color you click will change to red.

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

.children

Added to html file

`/.html`


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

To js file
Li under ul is red It will be changed to characters.

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

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

that's all. With this alone, it will move quite a bit, so please give it a try! !! !!