Objectifs
- Etre capable d'utiliser les sélecteurs jQuery.
Exercice 01
Énoncé
-
Vous pouvez visualiser l'énoncé de l'exercice
Solution
<!DOCTYPE html> <head> <title>table de multiplication</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { var max=prompt("Combien de lignes de multiplication souhaitez-vous faire?"); var table= $("#tableMultiplication"); var ajoutLigne=""; ajoutLigne="<tr><td>X</td>"; for (var i=1; i<=max; i++) { ajoutLigne += "<td>" + i + "</td>"; } ajoutLigne += "</tr>"; table.append(ajoutLigne); for (var m=1; m<=max; m++) { ajoutLigne="<tr><td>"+m+"</td>"; for (var y=1; y<=max; y++) { ajoutLigne += "<td>" + m*y + "</td>"; } ajoutLigne += "</tr>"; table.append(ajoutLigne); } $("td:first").css("background-color","red"); $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); $("td:even").addClass("even"); $("td:odd").addClass("odd"); max=Number(max)+1; alert(max); $("td:lt("+max+")").css( "backgroundColor", "orange" ); $("tr > td:nth-child(1)").css( {"backgroundColor":"orange","Font-Weight":"Bold"}); $("td:first" ).css("background-color","yellow"); }); </script> <style type="text/css"> td { margin: 3px; width: 2em; text-align:center; } table{border: 5px solid red; font-size: 20px;} tr.even td.even { background-color: #ee2288; } tr.even td.odd { background-color: #00ff88; } tr.odd td.even { background-color: #ee44cc; } tr.odd td.odd { background-color: #7799dd; } </style> </head> <body> <table id="tableMultiplication"> </table> </body> </html>
Exercice 02
Énoncé
-
Vous pouvez visualiser l'énoncé de l'exercice
Solution
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#cours-jquery > li').addClass('horizontal'); }); </script> <style type="text/css"> .horizontal { float: left; list-style: none; margin: 10px; } </style> </head> <body> <ul id="cours-jquery"> <li>Présentation de jQuery <ul> <li>Historique du jquery</li> <li>Présentation de jQuery</li> <li>Comprendre jQuery</li> </ul> </li> <li>Mise en oeuvre de jQuery <ul> <li>Installation de jQuery</li> <li>La Syntaxe de base de jQuery</li> <li>Les bases de jQuery</li> </ul> </li> <li>Sélecteurs en jQuery <ul> <li>Les sélecteurs de base en jQuery <ul> <li>Tp1 sélecteurs jquery</li> <li>Tp2 sélecteurs jquery</li> </ul> </li> <li>Les sélecteurs hiérarchiques</li> <li>Filtres en jQuery</li> </ul> </li> </ul> </body> </html>