Download WordPress Themes, Happy Birthday Wishes

jQuery Exemple

jQuery est développé par Google. Pour créer le premier exemple jQuery, vous devez utiliser un fichier JavaScript pour jQuery. Vous pouvez télécharger le fichier jQuery à partir de jquery.com ou utiliser l’URL absolue du fichier jQuery.

Dans cet exemple jQuery, nous utilisons l’URL absolue du fichier jQuery. L’exemple jQuery est écrit à l’intérieur de la balise de script.

Voyons un exemple simple de jQuery.

<!DOCTYPE html>  
<html>  
<head>  
 <title>Premier exemple jQuery</title>  
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(document).ready(function() {  
 $("p").css("background-color", "cyan");  
 });  
 </script>  
 </head>  
<body>  
<p>Le premier paragraphe est sélectionné.</p>  
<p>Le deuxieme paragraphe est sélectionné.</p>  
<p>Le troisieme paragraphe est sélectionné.</p>  
</body>  
</html>

Résultat :

jquery-exemple

$(document).ready() et $()

Le code inséré entre $(document) .ready() est exécuté une seule fois lorsque la page est prête pour l’exécution du code JavaScript.

Au lieu de $(document).ready (), vous pouvez utiliser la notation abrégée $() uniquement.

$(document).ready(function() {  
$("p").css("color", "red");  
});

Le code ci-dessus est équivalent à ce code.

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

Voyons l’exemple complet de jQuery en utilisant la notation abrégée $().

<!DOCTYPE html>  
<html>  
<head>  
 <title>Deuxieme exemple de jQuery</title>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
 </script>  
 <script type="text/javascript" language="javascript">  
 $(function() {  
 $("p").css("color", "red");  
 });  
 </script>  
 </head>  
<body>  
<p>Le premier paragraphe est sélectionné.</p>  
<p>Le deuxieme paragraphe est sélectionné.</p>  
<p>Le troisieme paragraphe est sélectionné.</p>  
</body>  
</html>

Résultat :

jquery-exemple-2