Script jquery : Exemples d'utilisation de jQuery
Quelques usages de jQuery, avec les s駘ecteurs CSS, la manipulation d'駘駑ents, la gestion des 騅駭ements et un appel Ajax
Partie III : Pour aller encore plus loin avec JavaScript
Edition 1 | Chapitre 23 : Biblioth鑷ues et frameworks / Page 304
Edition 2 | Chapitre 24 : Biblioth鑷ues et frameworks / Page 333
Edition 3 | Chapitre 24 : Biblioth鑷ues et frameworks / Page 333
Exécution du script
Emulation de la console
Code source
<html><head> <title>jQuery - Exemples du chapitre 20</title> <script src="framework/jquery.min.js" async id="jquery"></script></head><body><h1>jQuery, le framework historique JavaScript</h1><p>Write Less, Do More</p><p>Survolez sur les div 1 à 9</p><p>Cliquez sur les div 1 à 9</p><div data-jour="2" class="inline">Div 1</div><div data-jour="5" class="inline">Div 2</div><div data-jour="0" class="inline">Div 3</div><div data-jour="7" class="inline">Div 4</div><div data-jour="8" class="inline">Div 5</div><div data-jour="4" class="inline">Div 6</div><div data-jour="1" class="inline">Div 7</div><div data-jour="0" class="inline">Div 8</div><div data-jour="9" class="inline">Div 9</div><div id="bigDiv"> Elément div#bigDiv</div><p>Ajax avec jQuery pour récupérer le cours du Bitcoin</p><div id="bitcoin"></div><script>/* Détecter que le framework est bien chargé */ document.querySelector("script#jquery").addEventListener("load", function(e) { console.log("Version de jQuery = "+$.fn.jquery); /* Détecter que le document est prêt à être manipulé */ $(document).ready(function(evt) { console.log("Document chargé"); /* Les traitements peuvent être réalisés maintenant */ $("p").addClass("bord"); $("p").addClass("bord").addClass("fluo").removeClass("basique"); $("div").addClass("bord").addClass("pointer").attr("data-clic", 0); $("div[data-jour][data-jour!='0']").addClass("fluo"); $("div:eq(4)").addClass("shadow"); $("div[data-jour]").on("click", function(evt) { $(this).attr("data-clic", parseInt($(this).attr("data-clic"))+1); var content="<p>data-jour = "+this.dataset.jour+"</p><p>data-clic = "+this.dataset.clic+"</p>"; $("div#bigDiv").html(content).fadeIn(250); }).on("mouseover", function(evt) { $(this).addClass("over"); }).on("mouseout", function(evt) { $(this).removeClass("over"); $("div#bigDiv").hide(250); }); }); jQueryBTC();});function jQueryBTC() { console.log("Lancement de jQueryBTC()"); /* Appel AJAX via jQuery */ $.ajax({ url: "https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=EUR", cache: false, method: "GET", dataType: "json" }).done(function( data ) { /* Fonction à réaliser lors de la réussite de l'appel */ console.log( data ); if (data.EUR) { $("div#bitcoin").html(data.EUR.toFixed(2)+" €"); } }).fail(function() { /* Fonction à réaliser si une erreur est détectée */ console.log("Erreur de retour AJAX"); }); setTimeout(jQueryBTC, 60000);}</script><style type="text/css">div { padding:5px; margin:5px; font-weight: bold;}div.inline { display:inline-block; border-radius: 4px;}p { padding: 5px; margin:6px;}.bord { border:1px solid #999;}.pointer { cursor: pointer;}.fluo { background-color:#ff0; font-weight: bold;}.shadow { box-shadow: 1px 1px 5px #000; border:2px solid #000; padding:4px;}.over { box-shadow: 1px 1px 5px #000; border:2px solid #000; padding:4px;}div#bigDiv { border:2px solid #ccc; padding:5px; margin:5px; min-height: 100px; background: #eee;}div#bitcoin { width:200px; height:50px; margin:10px; padding:10px; margin-left: auto; margin-right: auto; font-weight: bold; font-size:25px; text-align: center; line-height: 50px;}</style></body></html>