[RUBY] [JQuery] Ein Typ, den selbst Anfänger gut verstehen konnten

【verdienen】

■ Verbesserung von UX ■ Verbessertes Verständnis von Javascript

【Entwicklungsumgebung】

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

【Implementierung】

Umgebung

■ Erstellen Sie eine Anwendung

$ rails new hoge

$ cd hoge

$ rails s -b 0.0.0.0

■ Laden Sie Jquery.min.js von der folgenden URL herunter 　https://jquery.com/download/

■ Platzieren Sie den Download nach Abschluss in den Assets der Anwendung

[Häufig verwendete Beschreibung]

Folgendes wird in der js-Datei beschrieben. Das -Tag ist erforderlich, wenn Sie direkt in eine HTML-Datei schreiben.

.css

Ändern Sie das Ziel-CSS. In den folgenden Fällen ist die Hintergrundfarbe rot

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

.slideUp

Wenn Sie mit id angeben, ist das Innere von "" "#" anstelle von "."
Zielgegenstände werden erhöht.

$("#hoge").slideUp(Beliebige Geschwindigkeit)

.slideDown

Das Ziel erscheint von oben.
Es ist notwendig, display: none; zur Hoge-Klasse mit CSS hinzuzufügen.

$(".hoge").slideDown(Beliebige Geschwindigkeit)

.fadeIn

Die Hoge-Klasse wird leicht reflektiert.
Geben Sie Anzeige an: keine; in der Hoge-Klasse mit CSS

$(".hoge").fadeIn(Beliebige Geschwindigkeit)

fadeOut

Die Hoge-Klasse verschwindet leicht.

$(".hoge").fadeOut(Beliebige Geschwindigkeit)

.mouseover

Verwenden Sie jquery
Wenn die Maus auf dem Ziel platziert ist, wird sie rot.
Synonym für hoge :: hover in CSS.

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

.mouseout

Wenn Sie dies nicht hinzufügen, bleibt es für den Rest Ihres Lebens im Mouseover angegeben.
Kehrt zu Weiß zurück, wenn die Maus entfernt wird

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

.on("click", function)

Zum Zünden anklicken.
Klicken Sie auf das Ziel, um die Hintergrundfarbe in Rot zu ändern.

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

.this ※HTML Fügen Sie der Datei Folgendes hinzu

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

Zur CSS-Datei hinzugefügt

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

Zur js-Datei hinzugefügt
In diesem Fall bedeutet "dies" das angeklickte "Feld".
Die Hintergrundfarbe, auf die Sie klicken, ändert sich in Rot.

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

.children

Zur HTML-Datei hinzugefügt

`/.html`


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

Zu js Datei
Li unter ul ist rot Es wird in Zeichen geändert.

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

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

das ist alles. Allein damit wird es sich ziemlich viel bewegen, also probieren Sie es bitte aus! !! !!