** 1. Edelstein hinzufügen **
Gemfile
gem "jquery-rails"
Lassen Sie uns die Bundle-Installation durchführen
** 2. Zur Datei application.js hinzufügen **
app/assets/javascripts/application.js
//= require jquery //← Hier hinzufügen
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
Jetzt können Sie jQuery verwenden.
Der Selektorname steht häufig nach dem = in class, id Ist vor dem Klassennamen # steht vor dem ID-Namen
python
$('.Name des Selektors').Veranstaltungsname(function(){
Die Verarbeitung wird ausgeführt, wenn ein Ereignis auftritt
});
** Liste der Ereignisse **
| click | Die Verarbeitung wird ausgeführt, wenn Sie mit der linken Maustaste auf das angegebene Element klicken. |
|---|---|
| dblclick | Die Verarbeitung wird ausgeführt, wenn auf das angegebene Element doppelklickt wird. |
| contextmenu | Die Verarbeitung wird ausgeführt, wenn Sie mit der rechten Maustaste auf das angegebene Element klicken. |
| mousedown | Die Verarbeitung wird ausgeführt, wenn Sie mit der linken oder rechten Maustaste auf das angegebene Element klicken. |
| mouseup | Die Verarbeitung wird ausgeführt, wenn die linke oder rechte Taste auf das angegebene Element gedrückt und dann losgelassen wird. |
| mouseout | Der Vorgang wird ausgeführt, wenn die Maus vom angegebenen Element losgelassen wird. |
| mouseover | Die Verarbeitung wird ausgeführt, wenn Sie mit der Maus über das angegebene Element fahren. |
| mousemove | Die Verarbeitung wird ausgeführt, wenn sich der Mauszeiger zum angegebenen Element bewegt. |
| scroll | Die Verarbeitung erfolgt beim Scrollen des Bildschirms. |
| resize | Die Verarbeitung erfolgt, wenn sich die Breite des Fensters ändert. |
| blur | Tritt auf, wenn ein Element den Fokus verliert |
| focus | Tritt auf, wenn ein Element fokussiert wird |
| load | Tritt auf, wenn alle Ressourcen im Dokument geladen wurden |
| change | Tritt auf, wenn ein Element fokussiert wird und die Wertekorrektur abgeschlossen ist |
| select | Tritt auf, wenn der Text des Eingabeelements und des Textbereichselements ausgewählt wird, dessen Typattributwert "Text" ist. |
| submit | Tritt auf, wenn das Formular gesendet wird |
| keydown | Tritt auf, wenn eine Taste gedrückt wird |
| keypress | Tritt auf, wenn eine Taste gedrückt wird |
| keyup | Tritt auf, wenn die Taste angehoben wird |
| error | Tritt auf, wenn ein Javascript-Fehler auftritt |
Klasse zum Element .addClass () hinzufügen $ (". Selector name"). AddClass ("Klassenname hinzufügen");
Klasse aus Element entfernen .removeClass () $ (". Selector name"). RemoveClass ("Klassenname zum Hinzufügen");
Klassen hinzufügen / entfernen .toggleClass () toggleClass () ist eine Methode zum Hinzufügen, wenn die angegebene Klasse im angegebenen Element nicht vorhanden ist, und zum Löschen, wenn sie bereits vorhanden ist. $ (". Selektorname"). On ("click", function () { $ (". Selector name"). ToggleClass ("Klassennamen hinzufügen oder entfernen"); });
Die Animation wird realisiert, indem die CSS-Eigenschaft eines bestimmten HTML-Elements kontinuierlich geändert wird.
python
Zielelement.animate(CSS-Eigenschaften, duration, easing,Funktion)
"Dauer" wird in Millisekunden angegeben, und Sie können die Zeit einstellen, bis die Animation abgeschlossen ist. Mit "Beschleunigen" können Sie das Verhalten der Animation festlegen und zwei Typen, "linear" und "Swing", als Zeichenfolge festlegen.
Beispiel
python
$('h1').animate({
'fontSize': '200px'
}, 3000);
Bei der Ausführung ändert sich die Größe während der Animation von der aktuellen Schriftgröße auf die angegebenen 200 Pixel, und die Größe ändert sich über 3 Sekunden.
** var **: Deklarieren Sie eine Variable, um einen von Ihnen angegebenen Wert zu initialisieren.
python
var Variablenname=Wert;
** attr () **: Sie können den Wert des Elements abrufen. ** ID-Selektor **: Ein Selektor, der durch das ID-Attribut des HTML-Elements angegeben wird und mit # zum Wert des ID-Attributs hinzugefügt wird, das Sie erfassen möchten. ** Klassenselektor **: Ein Selektor, der durch das Klassenattribut des HTML-Elements angegeben wird und über einen Wert verfügt, der dem Wert des Klassenattributs hinzugefügt wird, das Sie erfassen möchten. ** Elementauswahl **: Zielt auf HTML-Elemente wie h1 und p ab und verwendet den Elementnamen, den Sie erfassen möchten, so wie er ist, als Auswahl. ** Attributauswahl **: Wenn Sie den Attributwert des HTML-Tags angeben möchten, können Sie die Attributauswahl mit $ ("[attribute = 'value']") abrufen.
Recommended Posts