** 1. Ajouter une gemme **
Gemfile
gem "jquery-rails"
Faisons une installation groupée
** 2. Ajouter au fichier application.js **
app/assets/javascripts/application.js
//= require jquery //← Ajouter ici
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
Vous êtes maintenant prêt à utiliser jQuery.
Le nom du sélecteur vient souvent après le = in class, id . Est avant le nom de la classe # avant le nom de l'ID
python
$('.Nom du sélecteur').Nom de l'événement(function(){
Traitement effectué lorsqu'un événement se produit
});
** Liste des événements **
| click | Le traitement est effectué lors d'un clic gauche sur l'élément spécifié. |
|---|---|
| dblclick | Le traitement est effectué en double-cliquant sur l'élément spécifié. |
| contextmenu | Le traitement est effectué lors d'un clic droit sur l'élément spécifié. |
| mousedown | Le traitement est effectué lors d'un clic gauche ou droit sur l'élément spécifié. |
| mouseup | Le traitement est effectué lorsque le bouton gauche ou droit est enfoncé sur l'élément spécifié puis relâché. |
| mouseout | Le processus est exécuté lorsque la souris est libérée de l'élément spécifié. |
| mouseover | Le traitement est effectué lorsque la souris survole l'élément spécifié. |
| mousemove | Le traitement est effectué lorsque le curseur de la souris se déplace vers l'élément spécifié. |
| scroll | Le traitement a lieu lorsque l'écran défile. |
| resize | Le traitement a lieu lorsque la largeur de la fenêtre change. |
| blur | Se produit lorsqu'un élément perd le focus |
| focus | Se produit lorsqu'un élément obtient le focus |
| load | Se produit lorsque toutes les ressources du document ont été chargées |
| change | Se produit lorsqu'un élément obtient le focus et que la correction de valeur est terminée |
| select | Se produit lorsque le texte de l'élément d'entrée et de l'élément textarea dont la valeur d'attribut de type est "text" est sélectionné. |
| submit | Se produit lorsque le formulaire est soumis |
| keydown | Se produit lorsqu'une touche est enfoncée |
| keypress | Se produit lorsqu'une touche est enfoncée |
| keyup | Se produit lorsque la clé est levée |
| error | Se produit lorsqu'une erreur javascript se produit |
Ajouter une classe à l'élément .addClass () $ (". Nom du sélecteur"). AddClass ("Ajouter un nom de classe");
Supprimer la classe de l'élément .removeClass () $ (". Nom du sélecteur"). RemoveClass ("nom de classe à ajouter");
Ajouter / supprimer des classes .toggleClass () toggleClass () est une méthode à ajouter si la classe spécifiée n'existe pas dans l'élément spécifié, et à la supprimer si elle existe déjà. $ (". Nom du sélecteur"). On ("clic", fonction () { $ (". Nom du sélecteur"). ToggleClass ("Ajouter ou supprimer un nom de classe"); });
L'animation est réalisée en modifiant continuellement la propriété CSS d'un élément HTML spécifique.
python
Élément cible.animate(Propriétés CSS, duration, easing,une fonction)
La «durée» est spécifiée en millisecondes et vous pouvez définir la durée jusqu'à la fin de l'animation. «Easing» vous permet de spécifier le comportement de l'animation et définit deux types, «linéaire» et «swing», sous forme de chaîne de caractères.
Exemple
python
$('h1').animate({
'fontSize': '200px'
}, 3000);
Une fois exécuté, il passera de la taille de police actuelle aux 200 pixels spécifiés lors de l'animation et la taille changera en 3 secondes.
** var **: Déclarez une variable pour initialiser toute valeur que vous spécifiez.
python
nom de variable var=valeur;
** attr () **: Vous pouvez obtenir la valeur de l'élément. ** Sélecteur d'ID **: Un sélecteur spécifié par l'attribut id de l'élément HTML et avec # ajouté à la valeur de l'attribut id que vous souhaitez acquérir. ** Sélecteur de classe **: sélecteur spécifié par l'attribut de classe de l'élément HTML et doté d'un. Ajouté à la valeur de l'attribut de classe que vous souhaitez acquérir. ** Sélecteur d'élément **: cible les éléments HTML tels que h1 et p, et utilise le nom d'élément que vous souhaitez acquérir tel quel en tant que sélecteur. ** Sélecteur d'attribut **: Si vous souhaitez spécifier la valeur d'attribut de la balise HTML, vous pouvez obtenir le sélecteur d'attribut avec $ ("[attribute = 'value']").
-Obtenir, ajouter et supprimer du code HTML arbitraire à l'aide de jQuery Ajouter / supprimer une classe -Vous pouvez faire n'importe quel mouvement avec animation.
Recommended Posts