Retourner à la page d'accueil de TJS

Script jquery : Exemples d'utilisation de jQuery

Quelques usages de jQuery, avec les sélecteurs CSS, la manipulation d'éléments, la gestion des événements et un appel Ajax
Partie III : Pour aller encore plus loin avec JavaScript / Chapitre 23 : Bibliothèques et frameworks / Page 304

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)+" &euro;");    }  }).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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 22/02/2019 05:22:30 sur php7 en 39.99 ms