Cours Python

 CopyrightFrance.com
Cours Python
  1. Introduction à Python
  2. Ide Python
  3. Premier programme Python
  4. Les variables en Python
  5. Les commentaires en Python
  6. Les opérateurs Python
  7. Les fonctions en Python
  8. Structure If else... Python
  9. For While Python
  10. Formatage des chaines Python
  11. Les listes en Python
  12. Les tuples en Python
  13. Les dictionnaires en Python
  14. Les ensembles en Python
  15. POO et classes en Python
  16. Héritage en Python
  17. Les exceptions en Python
  18. Le gestionnaire des packages pip
  19. Télécharger le cours complet
  20. Les modules en Python
  21. Le module OS
  22. Module datetime Python
  23. Le module Platform
  24. Le module virtualenv
  25. Le Module PyInstaller
  26. Le module googletrans
  27. Les fichiers en Python
  28. Les fichiers ouverture & lecture
  29. Les fichiers ouverture & écriture
  30. Les fichiers CSV en Python
  31. Les Fichiers JSON En Python
  32. Fichier de configuration .ini
  33. Python & SQLite database
  34. DB Browser for SQLite
  35. Interface Graphique Tkinter
  36. Les Windgets Tkinter
  37. Bibliothèque d'images PILLOW
  38. Module de style tkinter.ttk
  39. Liste déroulante ttk Combobox
  40. le module filedialog
  41. Projet: Création éditeur de texte
  42. Bibliothèque graphique wxPython
  43. Bibliothèque graphique PyQt5
  44. Le module Math
  45. La bibliothèque matplotlib
  46. Le module Python statistics
  47. Bibliothèque Sympy
  48. Bibliothèques Numpy
  49. Bibliothèques Scipy
  50. Bibliothèques Pandas
  51. Bibliothèques Scikit Learn
  52. Bibliothèques TensorFlow
  53. Python Machine Learning
  54. Introduction à Django
  55. Installation de Django
  56. Premier Projet Django
  57. Interface administrateur
  58. Créer une application django
  59. Les modèles de django
  60. Templates Django
  61. Les formulaires Django
  62. Fichiers Statiques Django
  63. Upload des fichiers django
  64. Systeme Pagination Django
  65. Authentification Utilisateurs Django
  66. Les bases en Python: Variables String
  67. Exercices sur les listes Python
  68. Arithmétiques en Python
  69. Exercices Python: les classes
  70. Exercices sur les dictionnaires
  71. Exercices Python: les fichiers
  72. Exercices GUI Tkinter
  73. Exercices Python & bases de données SQLite3
  74. Tous les TP Python
  75. Création Editeur de Texte en Python Partie1
  76. Mini Logiciel Conjugaison Des Verbes
  77. Système Traduction En Python
  78. Carnet d'adresse en Python
  79. Formation Python-partie1
Dart & Flutter
Développement Web
  1. Introduction au langage HTML
  2. Structure d'un document HTML
  3. Mise en forme d’un document HTML
  4. Liens hypertexte
  5. Insertion d’images
  6. Les attributs de la balise BODY
  7. Les tableaux HTML
  8. Les listes HTML
  9. Les Frames HTML
  10. Les formulaires HTML
  11. Les caractères spéciaux HTML
  12. Ressources et références HTML
  13. Exercices HTML avec correction
  1. Introduction au langage CSS
  2. Propriétés d'un sélecteur
  3. La propriété Text CSS
  4. La propriété background CSS
  5. La propriété Font CSS
  6. La propriété border CSS
  7. Propriétés margin et padding
  8. Propriétés Height & Width
  9. Class et les ID CSS

Javascript Basique
  1. Introduction au langage Javascript
  2. Variables, fonctions et operateurs Javascript
  3. Les structures de contrôle et les boucles Javascript
  4. Les événements Javascript
  5. Le modèle Objet du Javascript
  6. L'objet array Javascript
Framework JQuery
  1. Introduction au Framework jQuery
  2. Premier pas avec le framework jQuery
  3. Les Sélecteurs jQuery
  1. Introduction au langage PHP
  2. Premier programme php
  3. Variables et Fonctions php
  4. Opérateurs arithmétiques et logiques
  5. Les structures de contrôle en php
  6. Les tableaux en php
  7. Control des formulaires en php
  8. Upload des fichiers en php
  9. Gestion des dossiers et des fichiers en php
  10. Colorisation syntaxique en php
  11. Cookies php
  12. Les variables globales php
  13. Sessions php
  14. Les variables php d’environnement
  15. Les classes et la poo php
  16. La librairie php_gd2 des images
  17. Lecture d’un fichier xml en php
  18. Les expressions régulières en php
  19. Moteurs de template php : smarty et fast temp…
  1. Langage MySql
  2. Introduction au langage MySql
  3. Installation du Serveur MySql
  4. Manipulation des bases de donnée MySql
  5. Manipulation desTables MySql
  6. Insértion de données MySql
  1. Installation Wordpress
  2. Modification du theme Wordpress
  3. Installation d'un plugin
  4. Gestion des catégories
  5. Gestion des articles
  6. Gestion des menus Wordpress
  7. Gestion des pages
  8. Gestion des Plugins
  9. Gestion des Widgets
  10. Gestion des Médias
  11. Gestion des commentaires
  12. Création formulaire de contact
  13. Outil Importation & exportation
  14. Gestion des extensions
  15. Réglage et paramètres
  1. Introduction à Joomla
  2. Installation Joomla
  3. Architecture de Joomla
Bases de données
TICE & Multimédia
Math Pour Informatiques
UserOnline
Utilisateurs/utilisatrices: 4 Guests, 8 Bots

1 - Syntaxe d'un sélecteur jQuery

Les sélecteurs jQuery sont l'une des parties les plus importantes de la bibliothèque jQuery.
Les sélecteurs jQuery vous permettent de sélectionner et de manipuler les éléments HTML, XHTM et CSS.
Les sélecteurs jQuery sont utilisés pour "trouver" (ou sélectionner) des éléments HTML / CSS en fonction de leur nom, identifiant, classes, types, attributs, valeurs d'attributs et bien plus encore. Il est basé sur les sélecteurs CSS existants, et en plus, il possède ses propres sélecteurs personnalisés.

Tous les sélecteurs dans jQuery commencent par la commande jQuery(), ou bien pour simplifier la syntaxe par le signe dollar et les parenthèses: $().

 

Le sélecteur d'élément jQuery sélectionne les éléments en fonction du nom de l'élément via la syntaxe :

$("élément_à_séletionner").méthode_à_appliquer();

Vous pouvez à titre d'exemple sélectionner tous les éléments <p> sur une page de la façon suivante:

$("p").méthode();

Exemple ( cacher un paragraphe avec la méthode hide() )

<h1>Exemple de sélecteur jQuery</h1>
<p>Ce contenu sera caché à l'exécution ! </p>
<script type="text/javascript">
$(document).ready(function(){

$("p").hide();
});
</script>

Exemple complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Premier pas avec jQuery</h1>
<p>Ce contenu sera caché à l'exécution ! </p>
<script type="text/javascript">
$(document).ready(function(){
        $("p").hide();
});
</script>
</body>
</html>

Ce qui affiche au navigateur après exécution :

 

Vous avez bien remarquer que le paragraphe : "Ce contenu sera caché à l'exécution !"  a été caché à l’exécution

2 - Les différents types d'un  sélecteur  jQuery

On peut classifier les sélecteurs jQuery selon l'élément qu'ils sélectionnent :

2.1 - Sélecteur jQuery pour les balises HTML

Nous avons déjà traité ce type de sélecteur au paragraphe précédent. Sa syntaxe est de la forme :

$("élément").methode() ;

Imaginons maintenant une page web qui contient plusieurs paragraphe et qu'on souhaite sélectionner un seul paragraphe bien déterminé la méthode  $("p") ne peut être appliquer dans ce cas puisqu'elle sélectionne tous les paragraphes. Nous auron donc besoin des paramètres supplémentaires :

$('p:first');   // sélectionne le premier paragraphe de la page
$('p:eq(i)');  // sélectionne le (i+1)ème paragraphe de la page (l'indice commence à 0)
$('p:last');  // sélectionne le dernier paragraphe  de la page

Exemple

<h1>Premier pas avec jQuery</h1>
<p>Contenu du premier paragraphe </p>
<p>Contenu du 2ème paragraphe </p>
<p>Contenu du 3ème paragraphe </p>
<script type="text/javascript">
$(document).ready(function(){
$("p:eq(1)").hide();
});
</script>

L'exemple ci dessus permet de cacher le paragraphe à la position 1 qui est donc le 2ème paragraphe puisque le compteur commence à 0. Il va donc afficher après exécution au navigateur :

Contenu du premier paragraphe
Contenu du 3ème paragraphe

2.2 - Sélecteur jQuery pour les classes CSS

Les sélecteur  jQuery peuvent aussi s'appliquer aux classes CSS en utilisant la syntaxe :

$(".Classes_CSS").methode( );

Exemple

Considérons la classe CSS suivante :

.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}

Essayons d'applique cette classe CSS à une balise div :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}
</style>
</head>
<body>
<h1>Sélecteur de Class CSS avec jQuery</h1>
<div class="myClass">Voici un exemple de sélcteur jQuery pour les  classes CSS</div> 
</body>
</html>

On obtient après exécution :

Sélecteur de Class CSS avec jQuery Voici un exemple de sélcteur jQuery pour les classes CSS

Mais si on ajoute le code de sélecteur jQuery suivant :

<script type="text/javascript">
$(document).ready(function(){
$(".myClass").hide();
});
</script>

On obtient alors après exécution au navigateur :

Voici le code complet :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
.myClass{
font-family: arial ;
font-size: 28 ;
font-weight: bold ;
color:red ;
}
</style>
</head>
<body>
<h1>Sélecteur de Class CSS avec jQuery</h1>
<div class="myClass">Voici un exemple de sélcteur jQuery pour les  classes CSS</div> 
<script type="text/javascript">
$(document).ready(function(){
$(".myClass").hide();
});
</script>
</body>
</html>

2.3 - Sélecteur jQuery pour les id CSS

Les sélecteurs jQuery pour les id CSS se fond de la même manirèe en remplaçant le code :

$(".Classes_CSS").methode( );

par :

$("#id_CSS").methode( );

Younes Derfoufi
CRMEF OUJDA

Laisser un commentaire