■ Improvement of UX ■ Improved understanding of javascript
■ Mac OS catalina ■ Ruby on Rails (5.2.4.2) ■ Virtual Box:6.1 ■ Vagrant: 2.2.7
■ 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
.css
$(".hoge").css({"background-color":"red"});
.slideUp
$("#hoge").slideUp(Any speed)
.slideDown
$(".hoge").slideDown(Any speed)
.fadeIn
$(".hoge").fadeIn(Any speed)
fadeOut
$(".hoge").fadeOut(Any speed)
.mouseover
$(function(){
$(".hoge").mouseover(function(){
$(".hoge").css({"background-color":"red"});
});
});
.mouseout
$(function(){
$(".hoge").mouseout(function(){
$(".hoge").css({"background-color":"white"});
});
});
.on("click", function)
$(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>
/.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;
}
$(function(){
$("box").on("click", function(){
$("this").css({"backgroun-color":"red"});
});
});
.children
/.html
<div>
<ul>
<li>aaaaaa</li>
<li>xxxx</li>
<li>ccccc</li>
<li>vvvv</li>
<li>dddd</li>
</ul>
</div>
$(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! !! !!
Recommended Posts