oujood.com

La syntaxe de jQuery

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

chercher |

La syntaxe de jQuery

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()

  • Un signe dollar $ pour définir jQuery
  • Un sélecteur ou « requête » pour définir le ou les éléments HTML à manipuler avec jQuery.
  • Une action() de jQuery à effectuer sur le ou les éléments

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

  Copier le 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>

Explication du code

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

  Copier le 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.

Lancement de Code sur Document Ready

La plupart de programmeurs Javascript font un code dans leur programme, qui semblable à celui-ci :

Sélectionner 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( ) :

Sélectionner 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é :

  • Essayer de cacher un élément qui n'existe pas
  • Essayer d'obtenir la taille d'une image qui n'est pas chargée

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

  Copier le 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

  Copier le 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   
Par gerywa 25 juillet 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web