[RUBY] [JQuery] Un gars que même les débutants pourraient bien comprendre

【mérite】

■ Amélioration de l'UX ■ Meilleure compréhension de javascript

【Environnement de développement】

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

【La mise en oeuvre】

Environnement

■ Créer une application

$ rails new hoge

$ cd hoge

$ rails s -b 0.0.0.0

■ Téléchargez Jquery.min.js à partir de l'URL ci-dessous 　https://jquery.com/download/

■ Une fois le téléchargement terminé, placez-le dans les actifs de l'application

[Description fréquemment utilisée]

Ce qui suit est décrit dans le fichier js. La balise est requise lors de l'écriture directe dans un fichier html.

.css

Changez le CSS cible. Dans les cas suivants, la couleur de fond sera rouge

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

.slideUp

Lors de la spécification avec id, l'intérieur de "" est "#" au lieu de "."
Les éléments cibles augmenteront.

$("#hoge").slideUp(Toute vitesse)

.slideDown

La cible apparaît d'en haut.
Il est nécessaire d'ajouter display: none; à la classe hoge avec css.

$(".hoge").slideDown(Toute vitesse)

.fadeIn

La classe hoge est légèrement reflétée.
Spécifiez l'affichage: aucun; dans la classe hoge avec CSS

$(".hoge").fadeIn(Toute vitesse)

fadeOut

La classe hoge disparaîtra légèrement.

$(".hoge").fadeOut(Toute vitesse)

.mouseover

Utilisez jquery
Lorsque la souris est placée sur la cible, elle devient rouge.
Synonyme de hoge :: hover en CSS.

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

.mouseout

Si vous ne l'ajoutez pas, il restera spécifié au survol de la souris pour le reste de votre vie.
Revient au blanc lorsque la souris est retirée

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

.on("click", function)

Cliquez pour s'enflammer.
Cliquez sur la cible pour changer la couleur d'arrière-plan en rouge.

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

.this ※HTML Ajoutez ce qui suit au fichier

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

Ajouté au fichier 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;
}

Ajouté au fichier js
Dans ce cas, "ceci" signifie celui qui a cliqué, c'est-à-dire "boîte".
La couleur d'arrière-plan sur laquelle vous cliquez deviendra rouge.

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

.children

Ajouté au fichier html

`/.html`


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

Au fichier js
Li sous ul est rouge Il sera changé en caractères.

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

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

c'est tout. Avec cela seul, cela bougera un peu, alors essayez-le! !! !!