Cet article a été créé pour ceux qui découvrent jQuery. Si vous êtes intéressé, veuillez le lire.
jQuery est décrit dans le fichier js (javascript), mais vous devez être prudent lors de la lecture du fichier. Par exemple, lors du chargement d'un fichier js (sample.js) dans un fichier html
<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>Texte à lire dans le fichier js</p>
</body>
</html>
(Puisque jQuery est utilisé, il existe une autre balise de script), mais si vous voulez changer la phrase "texte à charger dans le fichier js" lors de la lecture du fichier html, faites un exemple. js
$("p").text("Le texte peut changer")
Quand ça devient
・ ・ La raison en est que javascript ne reconnaît pas l'élément jusqu'à ce qu'il puisse lire le fichier html et identifier l'élément html (balise p, etc.), donc il démarre après la lecture du fichier html. Si vous le souhaitez, écrivez comme suit.
//Si vous placez le contenu que vous souhaitez exécuter dans celui-ci, il sera exécuté
$(function(){
$("p").text("Le texte peut changer")
})
Si vous êtes intéressé, voyez ce qui se passe lorsque vous ouvrez le fichier html dans deux cas!
En passant, il semble que certaines personnes aient remarqué les contenus qui ont été exécutés jusqu'à présent, je vais donc les expliquer. Tout d'abord, la syntaxe de base de jQuery est la suivante.
$("Sélecteur (nom d'élément, nom de classe, etc.)")... (Après cela, le sélecteur est livré avec une méthode à exécuter)
Ceci est en fait similaire au CSS, et cela prend le style d'écriture du type de traitement à effectuer après l'avoir spécifié pour la première fois avec le sélecteur. Par conséquent, le contenu du fichier js mentionné précédemment est
$("p").text("Le texte peut changer")
→ Spécifiez la balise p et changez le texte qu'il contient en "Le texte peut changer"
Ce sera comme ça. (En ajoutant $ au sélecteur, l'élément est récupéré et la méthode jQuery peut être utilisée.)
Après cela, au fur et à mesure que vous vous y habituerez, vous pourrez l'utiliser naturellement, mais ce que vous devez faire attention ici, c'est que le sélecteur est usé. Qu'est-ce que cela signifie, par exemple
<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>Je veux le rendre rouge!</p>
<p>Je veux le rendre bleu!</p>
</body>
</html>
Il existe un fichier html appelé, et sample.js est écrit comme suit.
$(function(){
$("p").css("color","red")
$("p").css("color","blue")
})
Si tu l'écris comme ça,
La raison est que lorsque p est défini comme sélecteur, toutes les balises p sont spécifiées et toutes sont invitées à changer la couleur. Par conséquent, si vous souhaitez les spécifier séparément, utilisez le nom de classe ou le nom d'id.
<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">Je veux le rendre rouge!</p>
<p id="blue">Je veux le rendre bleu!</p>
</body>
</html>
$(function(){
$("#red").css("color","red")
$("#blue").css("color","blue")
})
Dans Rails, il est pratique de définir d'abord le nom de la classe comme "nom du contrôleur_ nom de l'action". Par exemple, l'action d'index du contrôleur secteur
class = "mains_index"
Si vous le spécifiez dans la balise en haut du fichier, vous n'avez pas à le chevaucher avec le nom de la classe dans d'autres fichiers.
Recommended Posts