[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]

.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

[JQuery] A guy that even beginners could understand well
Basics of jQuery that even freeters can understand
"Inheritance" that even beginners of object-oriented programming can understand
Polymorphism that even beginners of object-oriented programming can understand
A story that even a man who does not understand C language could add new functions to Ruby 2.6
I tried learning Java with a series that beginners can understand clearly
After verifying the Monty Hall problem with Ruby, a story that I could understand well and did not understand well
Scala's Implicit that even Java shops can understand