Cours Python

 CopyrightFrance.com
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. Introduction au Framework PHP Laravel
  • Installation Laravel 8 & premier projet
    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: 5 Guests, 4 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