Einführung

Dieser Artikel wurde für diejenigen erstellt, die neu in jQuery sind. Wenn Sie interessiert sind, lesen Sie es bitte.

Hinweise zu js-Dateien

jQuery wird in der Datei js (Javascript) beschrieben, Sie müssen jedoch beim Lesen der Datei vorsichtig sein. Zum Beispiel beim Laden einer js-Datei (sample.js) in eine HTML-Datei

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>Text, der in die js-Datei eingelesen werden soll</p>
  </body>
</html>

(Da jQuery verwendet wird, gibt es ein anderes Skript-Tag.) Wenn Sie jedoch beim Lesen der HTML-Datei den Satz "Text, der in die js-Datei geladen werden soll" ändern möchten, geben Sie ein Beispiel. js

$("p").text("Der Text kann sich ändern")

Wenn es wird

Der Text ändert sich nicht!

・・ Der Grund dafür ist, dass Javascript das Element erst erkennt, wenn es die HTML-Datei lesen und das HTML-Element (p-Tag usw.) identifizieren kann. Daher beginnt es, nachdem die HTML-Datei das Lesen beendet hat. Wenn Sie möchten, schreiben Sie wie folgt.

//Wenn Sie den Inhalt, den Sie ausführen möchten, in dieses Feld einfügen, wird es ausgeführt
$(function(){
  $("p").text("Der Text kann sich ändern")
})

Wenn Sie interessiert sind, sehen Sie bitte, was passiert, wenn Sie die HTML-Datei in zwei Fällen öffnen!

jQuery-Syntax

Übrigens scheinen einige Leute die Inhalte bemerkt zu haben, die bisher ausgeführt wurden, also werde ich sie erklären. Erstens lautet die grundlegende Syntax von jQuery wie folgt.

$("Selektor (Elementname, Klassenname usw.)")... (Danach kommt der Selektor mit einer Methode zum Ausführen)

Dies ähnelt tatsächlich CSS und erfordert den Schreibstil, welche Art von Verarbeitung ausgeführt werden soll, nachdem sie zuerst mit dem Selektor angegeben wurde. Daher ist der Inhalt der zuvor erwähnten js-Datei

  $("p").text("Der Text kann sich ändern")
→ Geben Sie das p-Tag an und ändern Sie den Text darin in "Der Text kann sich ändern".

Es wird so sein. (Durch Hinzufügen von $ zum Selektor wird das Element abgerufen und die jQuery-Methode kann verwendet werden.)

Vorsichtsmaßnahmen bezüglich Selektoren

Wenn Sie sich daran gewöhnt haben, können Sie es natürlich verwenden. Was Sie hier jedoch beachten sollten, ist, dass der Selektor abgenutzt ist. Was bedeutet das zum Beispiel?

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>Ich möchte es rot machen!</p>
    <p>Ich möchte es blau machen!</p>
  </body>
</html>

Es gibt eine HTML-Datei namens und sample.js wird wie folgt geschrieben.

$(function(){
 $("p").css("color","red")
 $("p").css("color","blue")
})

Wenn Sie es so schreiben,

Alle Sätze werden blau sein.

Der Grund ist, dass, wenn p als Selektor festgelegt ist, alle p-Tags angegeben werden und alle angewiesen werden, die Farbe zu ändern. Wenn Sie sie separat angeben möchten, verwenden Sie daher den Klassennamen oder den ID-Namen.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p id="red">Ich möchte es rot machen!</p>
    <p id="blue">Ich möchte es blau machen!</p>
  </body>
</html>

$(function(){
 $("#red").css("color","red")
 $("#blue").css("color","blue")
})

[Ergänzung] So geben Sie den Klassennamen in Rails an

In Rails ist es zweckmäßig, zuerst den Klassennamen als "Controller-Name_Aktionsname" festzulegen. Zum Beispiel die Indexaktion des Netzreglers

class = "mains_index"

Wenn Sie es im Tag oben in der Datei angeben, müssen Sie es nicht mit dem Klassennamen in anderen Dateien überlappen.

[RUBY] Die Idee von jQuery