M lange les caractères d'une chaîne de caractères
La syntaxe de jQuery est constituée d’un sélecteur d’élément HTML et d’une action sur le ou les éléments
Une instruction jQuery commence généralement par le signe dollar ($) et se termine par un point-virgule ( ;).
La syntaxe de jQuery est constituée d’un sélecteur d’élément HTML et d’une action sur le ou les éléments.
Syntaxe de base est :
$(selector).action()
Exemples :Dans jQuery, le signe dollar ($) est tout simplement une extension pour désigner jQuery. Prenons l'exemple de code suivant, qui illustre l'instruction la plus élémentaire de jQuery.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Syntaxe standard de jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Le code à exécuter....
alert("Bonjour le monde!");
});
</script>
</head>
<body>
<!--Contenu de la page web -->
</body>
</html>
Si vous êtes totalement nouveau dans le domaine de jQuery, vous vous demandez peut-être à quoi correspond ce code. OK, passons en revue chacune des parties de ce script une par une.
L'élément <script> - Comme jQuery n'est qu'une bibliothèque JavaScript, le code jQuery doit être placé dans l'élément <script>. Toutefois, si vous souhaitez le placer dans un fichier JavaScript externe, ce qui est préférable, il suffit de supprimer cette partie. L'instruction $(document).ready(handler) ; - Cette instruction est généralement connue sous le nom d'événement ready. Le gestionnaire est essentiellement une fonction qui est transmise à la méthode ready() pour être exécutée en toute sécurité dès que le document est prêt à être manipulé, c'est-à-dire lorsque la hiérarchie DOM a été entièrement construite. La méthode jQuery ready() est généralement utilisée avec une fonction anonyme. Ainsi, l'exemple ci-dessus peut également être écrit dans une notation abrégée comme celle-ci :
Code
<script>
$(function(){alert("Bonjour le monde!");}
</script>
Note :
jQuery utilise une combinaison de syntaxe de sélecteur de XPath et CSS.
Vous en apprendrez plus sur la syntaxe de sélecteur dans un prochain chapitre de ce tutorial.
La plupart de programmeurs Javascript font un code dans leur programme, qui semblable à celui-ci :
Exemple : Copier le code
window.onload = function(){ alert("Bien venu"); }
Ce code va être exécuté dés qu’on appelle la page. Or à ce moment tous les éléments de la page ne sont pas téléchargés
Et le scripte doit être appliqué à certains de ces éléments qui ne sont pas encore chargés, nous aurons donc un problème.
Pour contourner ce problème, vous l’allez remarquer, que toutes les méthodes de jQuery, dans nos exemples, seront placées dans une fonction document.ready( ) :
Exemple : Copier le code
$(document).ready(function(){
alert("Bien venu");
});
C'est pour empêcher tout code jQuery de s'exécuter avant que le document ne soit entièrement chargé et prêt.
Voici quelques exemples d'actions qui peuvent échouer si les fonctions sont exécutées avant que le document ne soit entièrement chargé :
En outre, à l'intérieur d'une fonction de gestion d'événement, vous pouvez écrire les instructions jQuery pour effectuer n'importe quelle action en suivant la syntaxe de base, comme :
$(selector).action() ;
Dans ce cas, $(selector) sélectionne les éléments HTML de l'arborescence DOM afin qu'ils puissent être manipulés et la fonction action() applique une action sur les éléments sélectionnés, par exemple en modifiant la valeur de la propriété CSS ou en définissant le contenu de l'élément, etc.
Considérons un autre exemple qui définit le texte du paragraphe après que la page soit chargée
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration de jQuery Document Ready</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Bonjour le Monde!");
});
</script>
</head>
<body>
<p>Pas encore chargé.</p>
</body>
</html>
Dans la déclaration jQuery de l'exemple ci-dessus, le p est un sélecteur jQuery qui sélectionne tous les paragraphes, c'est-à-dire les éléments
dans le document, puis la méthode text() définit le contenu textuel du paragraphe avec le texte "Bonjour le Monde !".
Le texte du paragraphe dans l'exemple ci-dessus est remplacé automatiquement lorsque le document est prêt. Mais que faire si nous voulons que l'utilisateur effectue une action avant d'exécuter le code jQuery pour remplacer le texte du paragraphe. Prenons un autre exemple :
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration de jQuery Document Ready</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Bonjour le Monde!");
});
});
</script>
</head>
<body>
<p>Pas encore chargé.</p>
<button type="button">Replacer le texte</button>
</body>
</html>
Dans l'exemple ci-dessus, le texte du paragraphe est remplacé uniquement lorsqu'un événement de clic se produit sur le bouton "Remplacer le texte", ce qui signifie simplement lorsqu'un utilisateur clique sur ce bouton.
Maintenant que vous avez compris la base du fonctionnement de jQuery, dans les prochains chapitres, vous apprendrez en détail les termes que nous avons abordés ici.
|
Cours precedent: Introduction |
Sommaire de : JQuery |
Cours suivant: Les selecteurs jQuery |